前提・実現したいこと

次のようなルールのゲームを実装したいと考えています。
A,B,Cの三プレイヤーで行うゲームです（Aプレイヤーが実際にプレイする人、残りはコンピューター）
A=0,B=0,C=0の点数でゲーム開始です。

１、同じ点数のもの同士がじゃんけんをします。（三人or二人で、その時の点数による）
２、じゃんけんをして勝ったものには１点、じゃんけんに参加しているものの人数が二人で、あいこの時は、じゃんけんに参加していないプレイヤーに３点、といったルールで点数が加算されていきます。
３、トップのプレイヤーと二番目のプレイヤーの間に２点差がついた時点で１ゲーム終了とします。

このようなゲームをJavaScriptで実装したいのですが、条件分岐が多すぎて私の力では実装できません。どなたか良い方法をご存知ないでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

JavaScript
1
2<!doctype html>
3<html>
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width,initial-scale=1">
7<title>テンプレート</title>
8<link href="../../_common/images/favicon.ico" rel="shortcut icon">
9<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
10<link href="../../_common/css/style.css" rel="stylesheet">
11    
12    
13    
14<style>
15
16    #edit_area0{
17      font-size: 100px  
18    } 
19    
20    #edit_area4{
21      font-size: 100px  
22    }
23    
24    
25    
26    
27    </style>   
28</head>
29<body>
30<header>
31<div class="container">
32
33</div><!-- /.container -->
34</header>
35<main>
36<div class="container">
37<section>
38 
39    <input type="button" value="0" onclick="OnButtonClick(0);"/>
40    <input type="button" value="1" onclick="OnButtonClick(1);"/>
41    <input type="button" value="2" onclick="OnButtonClick(2);"/>
42    
43    
44    <div  id="edit_area0">a</div>
45    <div  id="edit_area1">a</div>
46    <div  id="edit_area2">a</div>
47    <div  id="edit_area3">a</div>
48    <div  id="edit_area4">a</div>
49    <div  id="edit_area5">a</div>
50    <div  id="edit_area6">a</div>
51    
52</section>
53</div><!-- /.container -->
54</main>
55<footer>
56<div class="container">
57</div><!-- /.container -->
58</footer>
59
60    <script>
61        
62        
63       
64
65function OnButtonClick(number) {         
66        
67        
68let array　= [ ];
69let judge = {}    
70let flag = false
71const a = 0
72const b = 1
73const c = 2
74
75array[0] = number   
76    
77for(i=1;i<=2;i++){
78    
79array[i]= Math.floor(Math.random()*3)    
80    
81    
82}
83    
84if((array[0]+array[1]+array[2])%3 === 1 && array[0] === array[1]){
85    
86judge[a]=1
87judge[b]=1
88judge[c]=0
89      
90}
91    
92if((array[0]+array[1]+array[2])%3 === 1 && array[1] === array[2]){
93    
94judge[a]=0
95judge[b]=1
96judge[c]=1
97      
98}
99    
100if((array[0]+array[1]+array[2])%3 === 1 && array[0] === array[2]){
101    
102judge[a]=1
103judge[b]=0
104judge[c]=1
105      
106}
107    
108if((array[0]+array[1]+array[2])%3 === 2 && array[0] === array[1]){
109    
110judge[a]=0
111judge[b]=0
112judge[c]=1
113      
114}    
115    
116if((array[0]+array[1]+array[2])%3 === 2 && array[1] === array[2]){
117    
118judge[a]=1
119judge[b]=0
120judge[c]=0
121      
122}     
123    
124if((array[0]+array[1]+array[2])%3 === 2 && array[0] === array[2]){
125    
126judge[a]=0
127judge[b]=1
128judge[c]=0
129      
130} 
131    
132if((array[0]+array[1]+array[2])%3 === 0){
133    
134judge[a]=0
135judge[b]=0
136judge[c]=0 
137    
138}
139    
140console.log(judge[a])
141console.log(judge[b])
142console.log(judge[c])
143    
144
145
146    
147if(judge[a]===1 && judge[b]===1 && judge[c]===0){
148    
149    document.getElementById('edit_area0').innerHTML = array;
150    document.getElementById('edit_area1').innerHTML = "一回戦C負け";    
151    document.getElementById('edit_area2').innerHTML = "A v.s. B";
152    document.getElementById('edit_area3').innerHTML ="<input type='button' value='0' onclick='OnButtonClick1(0);'/><input type='button' value='1' onclick='OnButtonClick1(1);'/><input type='button' value='2' onclick='OnButtonClick1(2);'/>";
153    
154
155    
156    
157}
158    
159if(judge[a]===1 && judge[c]===1 && judge[b]===0){
160    
161    document.getElementById('edit_area0').innerHTML = array;
162    document.getElementById('edit_area1').innerHTML = "一回戦B負け";    
163    document.getElementById('edit_area2').innerHTML = "A v.s. C";
164    document.getElementById('edit_area3').innerHTML ="<input type='button' value='0' onclick='OnButtonClick2(0);'/><input type='button' value='1' onclick='OnButtonClick2(1);'/><input type='button' value='2' onclick='OnButtonClick2(2);'/>";
165}
166    
167if(judge[b]===1 && judge[c]===1 && judge[a]===0){
168    
169    document.getElementById('edit_area0').innerHTML = array;
170    document.getElementById('edit_area1').innerHTML = "一回戦a負け";    
171    document.getElementById('edit_area2').innerHTML = "B v.s. C";
172    document.getElementById('edit_area3').innerHTML ="<input type='button' value='start' onclick='OnButtonClick3();'/>";
173}    
174    
175    
176    
177    
178    
179    
180    
181    
182    
183    
184}
185 
186let count = []
187        
188for(i=0;i<=2;i++){
189    
190count[i]= 0    
191       
192}        
193    
194function OnButtonClick1(number) {
195    
196let array2　= [ ];
197let judge2 = {}
198
199    
200    
201const a = 0
202const b = 1
203const c = 2
204
205array2[0] = number
206array2[1]= Math.floor(Math.random()*3)
207document.getElementById('edit_area4').innerHTML = array2;    
208    
209if((array2[0]-array2[1])%3 === 1){
210    
211judge2[a] = 0    
212judge2[b] = 1    
213judge2[c] = 0    
214    
215} 
216    
217if((array2[0]-array2[1])%3 === 2){
218    
219judge2[a] = 1    
220judge2[b] = 0    
221judge2[c] = 0     
222    
223}
224    
225if((array2[0]-array2[1])%3 === 0){
226    
227judge2[a] = 0    
228judge2[b] = 0     
229judge2[c] = 1    
230     
231}    
232    
233if(judge2[a]===1){
234    
235document.getElementById('edit_area5').innerHTML = 'Aの勝ち';    
236count    
237count[0]= count[0]+1   
238}    
239   
240if(judge2[b]===1){
241    
242document.getElementById('edit_area5').innerHTML = 'Bの勝ち';    
243    
244count[1]= count[1]+1    
245}
246    
247if(judge2[c]===1){
248    
249document.getElementById('edit_area5').innerHTML = 'Cの勝ち';    
250    
251count[2]= count[2]+1    
252}    
253    
254document.getElementById('edit_area6').innerHTML = count;    
255   
256}
257        
258        
259
260        
261function OnButtonClick2(number) {
262    
263let array2　= [ ];
264let judge2 = {}
265const a = 0
266const b = 1
267const c = 2
268
269array2[0] = number
270array2[1]= Math.floor(Math.random()*3)
271document.getElementById('edit_area4').innerHTML = array2;    
272    
273if((array2[0]-array2[1])%3 === 1){
274    
275judge2[a] = 0    
276judge2[b] = 0    
277judge2[c] = 1    
278    
279} 
280    
281if((array2[0]-array2[1])%3 === 2){
282    
283judge2[a] = 1    
284judge2[b] = 0    
285judge2[c] = 0     
286    
287}
288    
289if((array2[0]-array2[1])%3 === 0){
290    
291judge2[a] = 0    
292judge2[b] = 1     
293judge2[c] = 0    
294     
295}    
296    
297if(judge2[a]===1){
298    
299document.getElementById('edit_area5').innerHTML = 'Aの勝ち';    
300    
301count[0]= count[0]+1    
302}    
303   
304if(judge2[b]===1){
305    
306document.getElementById('edit_area5').innerHTML = 'Bの勝ち';    
307    
308count[1]= count[1]+1    
309}
310    
311if(judge2[c]===1){
312    
313document.getElementById('edit_area5').innerHTML = 'Cの勝ち';    
314    
315count[2]= count[2]+1    
316}    
317    
318document.getElementById('edit_area6').innerHTML = count;       
319   
320}                
321
322function OnButtonClick3() {
323    
324let array2　= [ ];
325let judge2 = {}
326const a = 0
327const b = 1
328const c = 2
329
330array2[0] = Math.floor(Math.random()*3)
331array2[1]= Math.floor(Math.random()*3)
332document.getElementById('edit_area4').innerHTML = array2;    
333    
334if((array2[0]-array2[1])%3 === 1){
335    
336judge2[a] = 0    
337judge2[b] = 0    
338judge2[c] = 1    
339    
340} 
341    
342if((array2[0]-array2[1])%3 === 2){
343    
344judge2[a] = 0    
345judge2[b] = 1    
346judge2[c] = 0     
347    
348}
349    
350if((array2[0]-array2[1])%3 === 0){
351    
352judge2[a] = 1    
353judge2[b] = 0     
354judge2[c] = 0    
355     
356}    
357    
358if(judge2[a]===1){
359    
360document.getElementById('edit_area5').innerHTML = 'Aの勝ち';    
361    
362count[0]= count[0]+1    
363}    
364   
365if(judge2[b]===1){
366    
367document.getElementById('edit_area5').innerHTML = 'Bの勝ち';    
368    
369count[1]= count[1]+1    
370}
371    
372if(judge2[c]===1){
373    
374document.getElementById('edit_area5').innerHTML = 'Cの勝ち';    
375    
376count[2]= count[2]+1    
377}    
378    
379document.getElementById('edit_area6').innerHTML = count;       
380   
381}    
382    
383
384        
385    </script>
386</body>
387</html>

試したこと

通常の意味での三人で行うじゃんけんの勝ち負け判定をする関数、二人でのじゃんけんを判定する関数は作れました。
上記のソースコードは途中まで何とか作ろうとしてみたものです。
0グー、1チョキ、2パーと対応させています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

AbeTakashi

2021/05/21 06:38 編集

これは誰かから出された課題かなんかですか？　そうでなければ目標地点をもう少し手前に置いた方がいいと思うのですが。「私の力では実装できません」のであれば、実装できるところから始めた方がいいと思います。無理に身の丈に合わない難しいことから初めても何も身につきませんよ。色々聞きたいのなら、とりあえず「通常の意味での三人で行うじゃんけんの勝ち負け判定をする関数、二人でのじゃんけんを判定する関数は作れました。」のソースコードを質問文に追加してみるといいと思いますよ。

justmeet0924

2021/05/21 06:40

ご助言に感謝いたします。ふと思いつきで閃いたルールのゲームなのですが、普通のじゃんけんでは面白味がない、と思い、このようなゲームを実装してみたくなりました。ソースコードを追加してみたいと思います。

Lhankor_Mhy

2021/05/21 07:35

「同じ点数のもの同士がじゃんけん」「トップのプレイヤーと二番目のプレイヤーの間に２点差がついた時点で１ゲーム終了」とのことですが、 a=2,b=1,c=0 の場合はどうするのですか？ a=0,b=0,c=0 で a,b の勝ち a=1,b=1,c=0 で a の勝ち a=2,b=1,c=0 で普通に実現する状態のように思えます。

AbeTakashi

2021/05/21 07:47

ソースがなかなかに長くてすべて追い切れてないのですが（可能であればインデントをして頂くと追いやすくなるのですが・・・）、「２、じゃんけんをして勝ったものには１点、じゃんけんに参加しているものの人数が二人で、あいこの時は、じゃんけんに参加していないプレイヤーに３点、といったルールで点数が加算されていきます。」これだけは条件分岐だけでは実装できないというか、「参加していないプレーヤー」というのがあるので「グー」「チョキ」「パー」以外に「参加しない」というボタンを作るか、もしくはタイマー見たいのを設置して「制限時間が過ぎたら参加しなかったとみなす」みたいな機能を実装する必要があるようにも見えます。前者ならあとは条件分岐でゴリ押ししていけばスクリプトは書けそうな気もします。後者ならさすがに条件分岐だけでは無理で、setTimeoutとsetIntervalなどを使う必要がありそうです。あと、全体的に言えることは変数とfor文を上手く使って繰り返し処理を書けばソースコードを大幅に減らすことはできそうです。大したヒントではありませんが、これで実装の目処が見えてくれば幸いです。厳しいようでしたら最初に申し上げたとおり、もう少しハードルを下げた仕様にした方が良さそうです。

justmeet0924

2021/05/21 07:47

ご指摘ありがとうございます。その通りです。すみません。同点のプレイヤーがいない場合、最高得点のプレイヤーの勝利として１ゲーム終了にしたいと考えています。このゲームの実装で困難を覚えたのは、じゃんけんの結果に応じてプレイするプレイヤーを選ばなければならないところで、その分岐をどのように実現したらいいのか、その点に気を取られていました。

justmeet0924

2021/05/21 07:53

Abe Takashi様。ご丁寧にありがとうございます。一つ質問があるのですが、点数をどこかに保存しておき、その結果に応じて、たとえば　A=1,B=1,C=0の時、自動的にA v.s. Bの試合が始まる、といったコードは不可能なのでしょうか？ご提言を汲み取れていない質問でしたらすみません。

AbeTakashi

2021/05/21 08:05

「点数をどこかに保存しておき」の件ですが、むしろこうしないと実装は大変でしょうね。単純に実装するなら、judgeとかflugが宣言してあるところの同列にpointみたいな一次配列の変数を宣言して、それぞれのポイントを管理して、そのポイントを常に監視したり書き換えたりすることで実装することになると思います。「自動的に」というの意味合いがちょっと分かりませんが、時間を管理するなら先ほど申し上げたとおりにsetTimeoutとsetIntervalを使用することになると思います。

行動規範の内容に同意します

回答1件

ベストアンサー

じゃんけんの実装ができてるならば、以下のような感じでいいのでは。

1位のスコア - 2位のスコア >= 2 ならば、終了
3人のスコアが同じならば、3人じゃんけん
さもなくば、同じスコアのプレイヤーがいるなら、2人じゃんけん
さもなくば、終了
じゃんけんの結果からスコアを再計算して1に戻る。

コメントを受けて追記

イベントを考慮して書き直すと、こんな感じです。

メイン処理

1位のスコア - 2位のスコア >= 2 ならば、ゲーム終了
3人のスコアが同じならば、3人じゃんけんのクリック受付をする
さもなくば、同じスコアのプレイヤーがいるなら、2人じゃんけんのクリック受付をする
さもなくば、ゲーム終了
処理を終了

じゃんけんのクリックイベント

全員が手を押していなければ、処理を終了
全員が手を押していれば、勝ち負けの判定をし、スコアを計算する
メイン処理を呼び出す。
処理の終了

投稿2021/05/21 07:55

編集2021/05/21 11:50

Lhankor_Mhy

総合スコア36142

Lhankor_Mhy

2021/05/21 08:56

ついでにこのゲームを考察してみました。 1戦目の結果は・100 一人勝ち 1/2 ・110 一人負け 1/2 一人負けからの2戦目の決着は・210 終了 1/3 ・120 終了 1/3 ・113 終了 1/3 となり、互角です。一人勝ちからの2戦目の決着は・110 一人負けへ 1/3 ・101 一人負けへ 1/3 ・400 終了 1/3 ですので、初手に一人勝ちした人の勝率は、1/3+2/3*1/3 で 5/9 となります。一方で、一人負けしても 1/3 で勝利できます。つまり、「初手で他人と手がかぶらないようにするゲーム」と言えるでしょう。

justmeet0924

2021/05/21 09:29

考察ありがとうございます。もしよろしければもう少しご助言いただけますか？いただいた回答からお察しするに、それは「ループ文」を用いて実装するということでよろしいのでしょうか。具体的にどのような書き方になるのか、もう少しヒントをいただけたら幸いです。

justmeet0924

2021/05/21 09:36

はっきり書きますと、わからないことは２点あります。１、ボタンを押し、じゃんけんをしたスコアをどのように保存すればいいのか。２、ループ文の中で、じゃんけんの勝負が発生するイベントをどうやって書けばいいのか。

Lhankor_Mhy

2021/05/21 11:35 編集

いえ、ループ文は書かないと思います。イベントで書くかと思います。 --- １については、ご提示のコードにある judge2[a] = 1 を judge2[a] += 1 などとすればいいかと思います。２については、ループの中にイベントを書かない方がいいと思います。ブラウザ上で実行するJavaScriptは、すべてイベントの中で動作させる、と覚えておいて害はないです。

行動規範の内容に同意します