teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JS　じゃんけんゲーム

編集履歴

質問編集履歴

6

修正

2021/08/10 12:07

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -5,9 +5,9 @@
5
5
 
6
6
 
7
7
  お願い致します。
8
- ![イメージ説明](7eec58aa426183243cf036f8afd3a39c.png)
9
8
 
10
9
 
10
+
11
11
  ```HTML
12
12
  <!DOCTYPE html>
13
13
  <html>

5

修正

2021/08/10 12:07

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -3,12 +3,11 @@
3
3
  判定がちゃんとできているのかわからない状態です。
4
4
 
5
5
 
6
- ![イメージ説明](2c3e6ff132eb6053103575077f8ccfde.png)
7
6
 
8
7
  お願い致します。
8
+ ![イメージ説明](7eec58aa426183243cf036f8afd3a39c.png)
9
9
 
10
10
 
11
-
12
11
  ```HTML
13
12
  <!DOCTYPE html>
14
13
  <html>

4

修正

2021/08/10 08:01

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,4 @@
1
- ```ここに言語を入力
2
- コード
3
- ```ジャンケンゲームを作っています。
1
+ ジャンケンゲームを作っています。
4
2
  ファイルのエラーと共に相手のじゃんけんの手が消えてしまいます。
5
3
  判定がちゃんとできているのかわからない状態です。
6
4
 

3

修正

2021/08/10 06:24

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,6 @@
1
+ ```ここに言語を入力
2
+ コード
1
- ジャンケンゲームを作っています。
3
+ ```ジャンケンゲームを作っています。
2
4
  ファイルのエラーと共に相手のじゃんけんの手が消えてしまいます。
3
5
  判定がちゃんとできているのかわからない状態です。
4
6
 
@@ -47,11 +49,8 @@
47
49
 
48
50
 
49
51
  ```
50
- ```
51
- ```
52
52
 
53
53
 
54
-
55
54
  ```JavaScript
56
55
 
57
56
  // 定数定義

2

修正

2021/08/10 06:23

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -13,7 +13,7 @@
13
13
  <!DOCTYPE html>
14
14
  <html>
15
15
  <head>
16
- <title>JavaScriptの学習</title>
16
+ <title>JavaScript</title>
17
17
  <meta charset="UTF-8">
18
18
  </head>
19
19
  <body>
@@ -46,8 +46,14 @@
46
46
 
47
47
 
48
48
 
49
- ```JS
49
+ ```
50
+ ```
51
+ ```
50
52
 
53
+
54
+
55
+ ```JavaScript
56
+
51
57
  // 定数定義
52
58
 
53
59
  const CONSTgoo = 0;
@@ -272,5 +278,4 @@
272
278
  elm = document.getElementById("msg");
273
279
  elm.innerHTML = text;
274
280
  }
275
- ```
276
281
  ```

1

修正

2021/08/10 06:21

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,276 @@
1
- ジャンケンゲームを作りたいのですが
1
+ ジャンケンゲームを作っています。
2
- 頭が回りません。すみません。
3
- ・ユーザーがグー、チョキ、パーいずれかを選択してクリック
4
- ・クリックした後に、相手の手もランダムで決まる。
5
- ・ユーザーがクリックした手と相手の手によって勝敗を判定。
2
+ ファイルのエラーと共に相手のじゃんけんの手が消えてしまいます。
6
- ・ユーザーの手、相手の手、結果（「勝利」、「敗北」、「あいこ」のいずれか）を画面に出力する。
7
- ※ボタンではなくジャンケンは画像を使用
3
+ 判定がちゃんとできているのかわからない状態です。
8
4
 
9
- ![イメージ説明](b6a1b3cb3c4dccce05e7eceaaf2741a9.png)
10
5
 
6
+ ![イメージ説明](2c3e6ff132eb6053103575077f8ccfde.png)
7
+
11
- お願い致します。
8
+ お願い致します。
9
+
10
+
11
+
12
+ ```HTML
13
+ <!DOCTYPE html>
14
+ <html>
15
+ <head>
16
+ <title>JavaScriptの学習</title>
17
+ <meta charset="UTF-8">
18
+ </head>
19
+ <body>
20
+
21
+ <main>
22
+ <div class="flex">
23
+ <div class="box">
24
+ <p>相手</p>
25
+ <div class="imgarea">
26
+ <img id="pc" src="../../images/js_paa.png" alt="PCが出す手の画像">
27
+ </div>
28
+ </div>
29
+
30
+
31
+ <div class="box">
32
+
33
+ <div class="flex column">
34
+ <img id="guu" class="you" src="../../images/js_goo.png" alt="グ－の画像">
35
+ <img id="choki" class="you" src="../../images/js_choki.png" alt="チョキの画像">
36
+ <img id="paa" class="you" src="../../images/js_paa.png" alt="パーの画像">
37
+ </div>
38
+ </div>
39
+ </div>
40
+ <p id="msg">手を選ぶと始まります。</p>
41
+ </main>
42
+
43
+ <script type="text/javascript" src="../js/js3.js"></script>
44
+ </body>
45
+ </html>
46
+
47
+
48
+
49
+ ```JS
50
+
51
+ // 定数定義
52
+
53
+ const CONSTgoo = 0;
54
+ const CONSTchoki = 1;
55
+ const CONSTpaa = 2;
56
+ const CONSTwin = 1;
57
+ const CONSTloss = -1;
58
+ const CONSTdrow = 0;
59
+
60
+ // グローバル変数
61
+
62
+ var intervalid;
63
+ var pcstop = true;
64
+
65
+ // グー・チョキ・パーのエレメント取得
66
+
67
+ var elmguu = document.getElementById("guu");
68
+ var elmchoki = document.getElementById("choki");
69
+ var elmpaa = document.getElementById("paa");
70
+
71
+ // クリックイベントリスナー
72
+
73
+ elmguu.addEventListener("click",goo,false);
74
+ elmchoki.addEventListener("click",choki,false);
75
+ elmpaa.addEventListener("click",paa,false);
76
+
77
+ // マウスオーバーベントリスナー
78
+
79
+ elmguu.addEventListener("mouseover",gooover,false);
80
+ elmchoki.addEventListener("mouseover",chokiover,false);
81
+ elmpaa.addEventListener("mouseover",paaover,false);
82
+
83
+ // グー マウスオーバァー
84
+
85
+ function gooover()
86
+ {
87
+ msout();
88
+ setbdr(elmguu.style);
89
+ }
90
+
91
+ // チョキ マウスオーバァー
92
+
93
+ function chokiover()
94
+ {
95
+ msout();
96
+ setbdr(elmchoki.style);
97
+ }
98
+
99
+ // パー マウスオーバーァー
100
+
101
+ function paaover()
102
+ {
103
+ msout();
104
+ setbdr(elmpaa.style);
105
+ }
106
+
107
+ // グー・チョキ・パーのBorderを消す
108
+
109
+ function msout()
110
+ {
111
+ elmguu.style.borderStyle = "none";
112
+ elmchoki.style.borderStyle = "none";
113
+ elmpaa.style.borderStyle = "none";
114
+ }
115
+
116
+ // 変数で渡されたエレメントを罫線で囲む
117
+
118
+ function setbdr(elmstyle)
119
+ {
120
+ elmstyle.borderStyle = "solid";
121
+ elmstyle.borderWidth = "2px";
122
+ elmstyle.borderColor = "red";
123
+ }
124
+
125
+ // グーを選択
126
+
127
+ function goo()
128
+ {
129
+ janstr(CONSTgoo);
130
+ }
131
+
132
+ // チョキを選択
133
+
134
+ function choki()
135
+ {
136
+ janstr(CONSTchoki);
137
+ }
138
+
139
+ // パーを選択
140
+
141
+ function paa()
142
+ {
143
+ janstr(CONSTpaa);
144
+ }
145
+
146
+ // グー・チョキ・パー共通
147
+
148
+ function janstr(hand)
149
+ {
150
+ var v0;
151
+
152
+ message(" "); // メッセージクリア
153
+
154
+ if ( pcstop == true )
155
+ {
156
+ intval();
157
+ message("もう一度、手を選ぶと止まります。");
158
+ pcstop = false;
159
+ return;
160
+ }
161
+ clearInterval(intervalid);
162
+ pcstop = true;
163
+
164
+ v0 = rand(); // 乱数取得
165
+ dsphand(v0); // 乱数によりグー・チョキ・パーを表示
166
+ v0 = judge(v0,hand); // PCと人間のジャンケン判定
167
+ dspjudge(v0); // 勝敗を判定して表示
168
+ }
169
+
170
+ // インターバル処理
171
+
172
+ function intval()
173
+ {
174
+ var i = 0;
175
+
176
+ intervalid = setInterval(function ()
177
+ {
178
+ dsphand(i);
179
+
180
+ i++;
181
+
182
+ if ( i > 2 )
183
+ {
184
+ i = 0;
185
+ }
186
+ },100);
187
+ }
188
+
189
+ // 0～2の乱数を返す
190
+
191
+ function rand()
192
+ {
193
+ var randnum;
194
+
195
+ randnum = Math.floor(Math.random() * 3);
196
+ return(randnum);
197
+ }
198
+
199
+ // 変数に一致する手を表示
200
+
201
+ function dsphand(hand)
202
+ {
203
+ var elm = document.getElementById("pc");
204
+
205
+ switch ( hand )
206
+ {
207
+ case CONSTgoo :
208
+ elm.src = "js_goo.png";
209
+ break;
210
+ case CONSTchoki :
211
+ elm.src = "js_choki.png";
212
+ break;
213
+ case CONSTpaa :
214
+ elm.src = "js_paa.png"
215
+ break;
216
+ }
217
+ }
218
+
219
+ // ジャンケンの結果を判定して返す
220
+
221
+ function judge(pc,you)
222
+ {
223
+ if ( ( pc == CONSTgoo ) && you == CONSTgoo )
224
+ return(CONSTdrow);
225
+ if ( ( pc == CONSTgoo ) && you == CONSTchoki )
226
+ return(CONSTloss);
227
+ if ( ( pc == CONSTgoo ) && you == CONSTpaa )
228
+ return(CONSTwin);
229
+
230
+ if ( ( pc == CONSTchoki ) && you == CONSTgoo )
231
+ return(CONSTwin);
232
+ if ( ( pc == CONSTchoki ) && you == CONSTchoki )
233
+ return(CONSTdrow);
234
+ if ( ( pc == CONSTchoki ) && you == CONSTpaa )
235
+ return(CONSTloss);
236
+
237
+ if ( ( pc == CONSTpaa ) && you == CONSTgoo )
238
+ return(CONSTloss);
239
+ if ( ( pc == CONSTpaa ) && you == CONSTchoki )
240
+ return(CONSTwin);
241
+ if ( ( pc == CONSTpaa ) && you == CONSTpaa )
242
+ return(CONSTdrow);
243
+ }
244
+
245
+ // 引数で判定し結果を表示
246
+
247
+ function dspjudge(jge)
248
+ {
249
+ if ( jge == CONSTdrow )
250
+ {
251
+ message("あいこ");
252
+ return;
253
+ }
254
+ if ( jge == CONSTwin )
255
+ {
256
+ message("勝利");
257
+ return;
258
+ }
259
+ if ( jge == CONSTloss )
260
+ {
261
+ message("敗北");
262
+ return;
263
+ }
264
+ }
265
+
266
+ // メッセージを表示
267
+
268
+ function message(text)
269
+ {
270
+ var elm;
271
+
272
+ elm = document.getElementById("msg");
273
+ elm.innerHTML = text;
274
+ }
275
+ ```
276
+ ```