Javascriptでのスロットマシン

Question

質問させていただきます。 Javascriptでスロットマシンを作っているのですが、最後の「あたり」「はずれ」の判定をどうやっていいのか分かりません。どなたか教えて下さい。 javascript //左リールの制御 function a1() { //aにHTMLから取得した数字を代入 var a=document.getElementById("su1").innerHTML; //文字列のiを数字に変換し１を足してxに代入 var x=parseInt(a)+1; //取得した値が９を超えたら１に戻す if(x>9) { x=1; } //xに書き換えてして表示する document.getElementById("su1").innerHTML=x; //一定期間繰り返す TimeoutID1=setTimeout("a1()",100); } //スタートボタンを押すと６を表示する function rstart() { a2(); a1(); a3(); } //真ん中のリールの制御 function a2() { //iにHTMLから取得した数字を代入 var i=document.getElementById("su2").innerHTML; //文字列のiを数字に変換し１を足してjに代入 var j=parseInt(i)+1; //取得した値が９を超えたら１に戻す if(j>9) { j=1; } //Jに書き換えてして表示する document.getElementById("su2").innerHTML=j; //一定期間繰り返す TimeoutID2=setTimeout("a2()",100); } //ストップボタンで止める function stop(btn) { if(btn == 0) {clearTimeout(TimeoutID1);} if(btn == 1) {clearTimeout(TimeoutID2);} if(btn == 2) {clearTimeout(TimeoutID3);} } //右のリールの制御 function a3() { var c=document.getElementById("su3").innerHTML; //文字列のiを数字に変換し１を足してjに代入 var z=parseInt(c)+1; if(z>9) { z=1; } //zに書き換えてして表示する document.getElementById("su3").innerHTML=z; //一定期間繰り返す TimeoutID3=setTimeout("a3()",100); } HTML

Hibiya Ryuto · Answer

機能を追加しにくいと感じたら、そのコードは複雑になり過ぎています。一度コード全体を整理したほうがいいでしょう。リファクタリングと言います。具体的には、よく似た処理を行っているa2、a1、a3をひとつの関数に纏めます。 a1という関数名は意味がわかりづらいので、意味のわかりやすいものに変えます。ゲーム全体の状態を表わすようなオブジェクトを追加します。例としては以下のようになります。 // 各リールの状態 var reelStates = [{ elementID: "su1", timerID: null }, { elementID: "su2", timerID: null }, { elementID: "su3", timerID: null }]; //リールの開始 function startReel(state) { if (state.timerID === null) { //一定期間繰り返す state.timerID = setInterval(function () { //aにHTMLから取得した数字を代入 var a = document.getElementById(state.elementID).innerHTML; //文字列のiを数字に変換し１を足してxに代入 var x = parseInt(a) + 1; //取得した値が９を超えたら１に戻す if (x > 9) { x = 1; } //xに書き換えてして表示する document.getElementById(state.elementID).innerHTML = x; }, 100); } } //スタートボタンを押すと６を表示する function rstart() { // すべてのリールの回転を開始 for (var i = 0; i < reelStates.length; i++) { startReel(reelStates[i]); } // スコア表示を消す document.getElementById("score").textContent = ""; } //ストップボタンで止める function stop(btn) { // 既に止まっているリールに対して処理を行わないようにチェックする if (reelStates[btn].timerID !== null) { // タイマーを止める clearInterval(reelStates[btn].timerID); // nullを代入してリールが回っていない状態を示す reelStates[btn].timerID = null; // それぞれのリールが回っているかどうかを調べる var isAllReelStopped = reelStates.every(function (state) { return state.timerID === null; }); // すべてのリールが停止していたらスコアの計算 if (isAllReelStopped) { // それぞれのリールの数字を取得する var reelNumbers = reelStates.map(function (state) { return document.getElementById(state.elementID).innerHTML; }); // スコアを計算 // ここでは7ひとつごとに1点で計算している var score = reelNumbers.reduce(function (score, number) { return score + (number === "7" ? 1 : 0); }, 0); // スコアを表示 document.getElementById("score").textContent = "Score: " + score; } } } // 各リールの状態 var reelStates = [{ elementID: "su1", timerID: null }, { elementID: "su2", timerID: null }, { elementID: "su3", timerID: null }]; //リールの開始 function startReel(state) { if (state.timerID === null) { //一定期間繰り返す state.timerID = setInterval(function() { //aにHTMLから取得した数字を代入 var a = document.getElementById(state.elementID).innerHTML; //文字列のiを数字に変換し１を足してxに代入 var x = parseInt(a) + 1; //取得した値が９を超えたら１に戻す if (x > 9) { x = 1; } //xに書き換えてして表示する document.getElementById(state.elementID).innerHTML = x; }, 100); } } //スタートボタンを押すと６を表示する function rstart() { // すべてのリールの回転を開始 for (var i = 0; i < reelStates.length; i++) { startReel(reelStates[i]); } // スコア表示を消す document.getElementById("score").textContent = ""; } //ストップボタンで止める function stop(btn) { // 既に止まっているリールに対して処理を行わないようにチェックする if (reelStates[btn].timerID !== null) { // タイマーを止める clearInterval(reelStates[btn].timerID); // nullを代入してリールが回っていない状態を示す reelStates[btn].timerID = null; // それぞれのリールが回っているかどうかを調べる var isAllReelStopped = reelStates.every(function(state) { return state.timerID === null; }); // すべてのリールが停止していたらスコアの計算 if (isAllReelStopped) { // それぞれのリールの数字を取得する var reelNumbers = reelStates.map(function(state) { return document.getElementById(state.elementID).innerHTML; }); // スコアを計算 // ここでは7ひとつごとに1点で計算している var score = reelNumbers.reduce(function(score, number) { return score + (number === "7" ? 1 : 0); }, 0); // スコアを表示 document.getElementById("score").textContent = "Score: " + score; } } } .surot { text-align: center; font-size: 38; font-weight: bold; color: #ff0000; width: 90; height: 65; background-color: #0000ff; } .surot2 { font-size: 14pt; font-weight: bold; color: #0000ff; text-align: center; width: 96; }

Javascriptでのスロットマシン

One Answer

Add your own answers!

Ask a Question