javascript、css、htmlでスロットゲームを制作しています。
3つの回転するリールを3つのボタンで1つづつ止めて、リールに描かれた絵柄が横3つ・左右斜3つに揃えば当たりという方式で、
当たりハズレの抽選はwinLottery関数で行なっており、最大65536の乱数を生成し、配列configTableで指定した範囲内であれば当たりで、3つのリールともに当たった絵柄に止まります。
それ以外はハズレで、3つのリールとも乱数で適当に選んだ絵柄に止まるのですが、
時々ハズレの場合でも意図しない形で横3つ・左右斜3つに絵柄が揃ってしまうことがあります。
ハズレの際は絵柄が全く揃わないようにするにはどの様な乱数の決め方やチェックを行えばいいでしょうか。
どうかご提示よろしくお願いいたします。
【ソースコード】
JavaScript
1 // 定数定義 2 var fps = 60; //FPS 3 var interval = 1 / fps * 1000; 4 5 var maxRand = 65536; //最大乱数 6 //11070 7 var configNum = 6; //設定数 8 var configTable = [ 9 // 0:BIG 1:REG 2:コイン 3:スイカ 4:ベル 5:チェリー 6:リプレイ 10 [[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定1 11 [[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定2 12 [[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定3 13 [[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定4 14 [[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]], //設定5 15 [[0,99],[100,149],[150,299],[300,549],[550,869],[870,2539],[2540,4500]] //設定6 16 ]; 17 18 var iconNum = 21; //リールに表示する絵柄絵柄数 19 var iconWidth = 120; //絵柄の幅 20 var iconHeight = 60; //絵柄の高さ 21 22 var reelArray = new Array(); 23 var reelNum = 3; //リール数 24 var reelMargin = 5; 25 var reelBaseX = 18; 26 var reelBaseY = 92; 27 var reelHeight = (iconHeight * iconNum); //リールの高さ 28 var reelMoveSpeedY = Math.floor(iconHeight / 3); //リール移動スピード 29 30 var iconArray = [//絵柄配列 31 [4, 5, 1, 3, 4, 6, 1, 3, 2, 6, 4, 3, 5, 6, 2, 5, 6, 4, 3, 0, 6], 32 [6, 4, 1, 3, 6, 5, 4, 5, 6, 4, 2, 3, 6, 0, 4, 3, 6, 1, 4, 2, 5], 33 [5, 3, 1, 4, 6, 3, 4, 0, 6, 3, 5, 6, 2, 3, 4, 6, 5, 0, 3, 4, 6] 34 ]; 35 var stopLineArray = [[1,1,1],[0,0,0],[2,2,2],[0,1,2],[2,1,0]]; //停止ライン配列 36 var stopLineId = 0; 37 38 //変数定義 39 var configId = Math.floor(Math.random()*configNum); //設定を決める 40 41 var reelStopFlg = [null, null, null]; 42 var reelposY = [0, 0, 0]; //リールの移動量 43 44 var winIconArray = [ //当たり絵柄配列 45 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 46 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 47 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 48 ]; 49 var hitIcon = [ 50 [0, 0, 0], 51 [0, 0, 0], 52 [0, 0, 0] 53 ]; 54 55 // リール回転用 56 var reelmoveAnime; 57 58 addSlots(); 59 60 function slotStart() { 61 reelStopFlg = [false, false, false]; 62 winLottery(); 63 reelmoveAnime = setInterval(slotMove, interval); 64 $('[id^=stopbtn]').css("pointer-events", "auto"); 65 } 66 67 function slotStop(i) { 68 reelStopFlg[i] = true; 69 } 70 71 function winLottery() { 72 var iArray = [0,0,0]; 73 var rand = Math.floor(Math.random()*maxRand); 74 for (var i = 0; i < configTable[configId].length; i++) { 75 if(configTable[configId][i][0] >= rand || rand <= configTable[configId][i][1]){ 76 console.log("あたり"); 77 iArray = [i,i,i]; 78 wIcArrayRewrite(iArray); 79 break; 80 } 81 if(i == configTable[configId].length-1){ 82 console.log("はずれ"); 83 iArray[0] = Math.floor(Math.random()*configTable[configId].length); 84 iArray[1] = Math.floor(Math.random()*configTable[configId].length); 85 iArray[2] = Math.floor(Math.random()*configTable[configId].length); 86 wIcArrayRewrite(iArray); 87 } 88 } 89 } 90 91 function wIcArrayRewrite(iArray) { 92 for (var i = 0; i < reelNum; i++) { 93 for (var j = 0; j < iconNum; j++) { 94 if(iconArray[i][j] == iArray[i]){ 95 winIconArray[i][j] = 1; 96 }else{ 97 winIconArray[i][j] = 0; 98 } 99 } 100 } 101 } 102 103 //リール作成 104 function addSlots() { 105 reelStopFlg[i] = false; 106 for (var i = 0; i < reelNum; i++) { 107 $('.reel').eq(i).css("left", ((iconWidth + reelMargin) * i) + "px"); 108 $('.wrapper').eq(i).css("height", reelHeight + "px"); 109 $('.wrapper').eq(i).css("top", "-" + (iconHeight * Math.floor(Math.random()*iconNum)) + "px"); 110 for (var j = 0; j < 24; j++) { 111 if (j < iconNum) { 112 $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j] + 113 "'>" + iconArray[i][j] + "</li>"); 114 } else { 115 $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j - 21] + 116 "'>" + iconArray[i][j - 21] + "</li>"); 117 } 118 } 119 } 120 } 121 122 //リール回転 123 function slotMove() { 124 for (var i = 0, stopCount = 0; i < reelNum; i++) { 125 if (!reelStopFlg[i] || reelposY[i] % iconHeight || winIconArray[i][(-reelposY[i] / iconHeight)+stopLineArray[stopLineId][i]] != 1) { 126 reelposY[i] += reelMoveSpeedY; 127 if (reelposY[i] > 0) reelposY[i] -= reelHeight; 128 $('.wrapper').eq(i).css("top", reelposY[i] + "px"); 129 } else { 130 stopCount++; 131 } 132 if (stopCount == reelNum) { 133 $('#startbtn').css("pointer-events", "auto"); 134 clearInterval(reelmoveAnime); 135 slotHits(); 136 } 137 } 138 } 139 140 function slotHits() { 141 for (var i = 0; i < reelNum; i++) { 142 for (var j = 0; j < reelNum; j++) { 143 hitIcon[i][j] = ((-reelposY[i] / iconHeight) + j); 144 if (hitIcon[i][j] >= iconNum) { 145 hitIcon[i][j] -= iconNum; 146 } 147 } 148 } 149 if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][0]] && 150 iconArray[1][hitIcon[1][0]] == iconArray[2][hitIcon[2][0]]) { 151 $("#result").html("上段が揃いました"); 152 } else if (iconArray[0][hitIcon[0][1]] == iconArray[1][hitIcon[1][1]] && 153 iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][1]]) { 154 $("#result").html("中段が揃いました"); 155 } else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][2]] && 156 iconArray[1][hitIcon[1][2]] == iconArray[2][hitIcon[2][2]]) { 157 $("#result").html("下段が揃いました"); 158 } else if (iconArray[0][hitIcon[0][2]] == iconArray[1][hitIcon[1][1]] && 159 iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][0]]) { 160 $("#result").html("左斜めが揃いました"); 161 } else if (iconArray[0][hitIcon[0][0]] == iconArray[1][hitIcon[1][1]] && 162 iconArray[1][hitIcon[1][1]] == iconArray[2][hitIcon[2][2]]) { 163 $("#result").html("右斜めが揃いました"); 164 } else { 165 $("#result").html("残念!!"); 166 } 167 } 168
もしお時間があればこちらの質問にも回答していただければ幸いです。
https://teratail.com/questions/114846
【追記】
ご回答された方申し訳ありません。もう少し詳細な説明をするべきでした。
このスロットは、縦3つ・左右斜め3つのラインに絵柄を揃えるルールですので、画面上はこのようになっています。
[2][4][6]
[5][8][3]
[9][7][1]
ハズレの際の絵柄を決める部分はこうなっています。
javascript
1iArray[0] = Math.floor(Math.random()*configTable[configId].length); 2 iArray[1] = Math.floor(Math.random()*configTable[configId].length); 3 iArray[2] = Math.floor(Math.random()*configTable[configId].length);
その結果出力された乱数は例えば
iArray[1,3,5]
だとすると、中央のラインは揃いませんが、画面では
[2][2][2]
[1][3][5]
[4][8][7]
と、上ラインに2の絵柄が揃ってしまいます。
※これは例ですので、実際のリールの配列とは違います
乱数は中央ラインにしか対応しておらず、上下ライン・左右斜めラインが予期しない形で揃ってしまうことがあるので、それを解消したいというわけです。
中央ラインだけ揃わないようにする方法は簡単ですが、これはリール配列の参照を行わないと実現できないと思うのですが、そのロジックが思いつきません。
実際のコードは記載していただかなくても構いませんので、考え方のヒントやアドバイスなどを
よろしくお願い致します。
【追記 2018/03/10】
この部分を
javascript
1iArray[0] = Math.floor(Math.random()*configTable[configId].length); 2 iArray[1] = Math.floor(Math.random()*configTable[configId].length); 3 iArray[2] = Math.floor(Math.random()*configTable[configId].length);
こうしてみたのですが、
JavaScript
1var stopLineArray = [[1,1,1],[0,0,0],[2,2,2],[0,1,2],[2,1,0]]; //停止ライン配列 2 3stopLineId = Math.floor(Math.random()*stopLineArray.length); 4for (var i = 0; i < iconNum; i++) { 5 if (iconArray[0][stopLineArray[stopLineId][i]] != iconArray[1][stopLineArray[stopLineId][i]] && 6 iconArray[1][stopLineArray[stopLineId][i]] != iconArray[2][stopLineArray[stopLineId][i]]) { 7 iArray[0] = iconArray[0][stopLineArray[stopLineId][i]]; 8 iArray[1] = iconArray[1][stopLineArray[stopLineId][i]]; 9 iArray[2] = iconArray[2][stopLineArray[stopLineId][i]]; 10 break; 11 } 12}
時々止まってしまったり、ボタンを押したときにリールが止まらないことがあります。
【追記 2018/03/12】
以下のような関数を作って、
javascript
1 2function slotAdjust(reelId) { 3 var hitIcon = [[0, 0, 0],[0, 0, 0],[0, 0, 0]]; 4 for (var i = 0; i < reelNum; i++) { 5 for (var j = 0; j < reelNum; j++) { 6 hitIcon[i][j] = ((-reelposY[i] / iconHeight) + j); 7 if (hitIcon[i][j] >= iconNum) { 8 hitIcon[i][j] -= iconNum; 9 } 10 } 11 } 12 13 for (var c = 0; c < stopLineNum; c++) { 14 if (iconArray[0][hitIcon[0][stopLineArray[c][0]]] == iconArray[1][hitIcon[1][stopLineArray[c][1]]] && 15 iconArray[1][hitIcon[1][stopLineArray[c][1]]] == iconArray[2][hitIcon[2][stopLineArray[c][2]]]) { 16 return false; 17 }else{ 18 return true; 19 } 20 } 21}
slotMove関数を以下のように変更してみたのですが、
javascript
1//リール回転 2function slotMove() { 3//省略 4 var adjust = slotAdjust(); 5//省略 6if (stopCount == reelNum) { 7 if(adjust){ 8 $('#startbtn').css("pointer-events", "auto"); 9 clearInterval(reelmoveAnime); 10 slotHits(); 11 }else{ 12 reelposY[i] += reelMoveSpeedY; 13 if (reelposY[i] > 0) reelposY[i] -= reelHeight; 14 $('.wrapper').eq(i).css("top", reelposY[i] + "px"); 15 } 16}
これでも揃ってしまうことがあります。
【追記 2018/03/13】
以下のように変更してみたのですが、
javascript
1var slipPosY = [0, 0, 0]; 2 function slotStop(i) { 3 //省略 4 slipPosY[i] = 0; 5 //省略 6 } 7 function slotMove() { 8//省略 9 for (var i = 0, stopCount = 0; i < reelNum; i++) { 10 if (!reelStopFlg[i] || reelposY[i] % iconHeight){ 11//省略 12 } else { 13 if(winFlg && winIconArray[i][(reelposY[i] / iconHeight)+stopLineArray[stopLineId][i]] != 1 || 14 stopCount == reelNum-1 && !winFlg && !adjust) { 15 if(slipPosY[i] < (iconHeight*3)){ 16 adjust = slotAdjust(); 17 slipPosY[i] += iconHeight; 18 reelposY[i] += reelMoveSpeedY; 19 if (reelposY[i] > 0) reelposY[i] -= reelHeight; 20 $('.wrapper').eq(i).css("top", reelposY[i] + "px"); 21 }else{ 22 stopCount++; 23 } 24 }else{ 25 stopCount++; 26 } 27 } 28//省略 29 } 30 } 31
これでもダメでした。
回答8件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/09 02:09