Javascriptのスロットゲームを指定した画像で停止させたい
解決したいこと
JavascriptやjQueryの初心者のため、いろんなサイトを参考にしながら、スロットゲームの作成を試しています。
画像をanimateでリールを回転させてストップボタンで画像は停止し、当選番号にそった画像を表示させたいのですが、
当たり等数の指定した画像で停止（表示）させることができません。
※当たり当数（result_no）はサーバ側で指定した確率で選定されます。
1等の場合は「7（0.png）」がそろうように指定の画像で停止させたいのですが、
中央で3つとも「7」が表示され正しく停止できることもあるものの、
一つ上にずれていたり、3つとも上にずれていたりと不安定な状態です。
windowsのPC(window11）の環境では、ほぼ指定した画像で停止できるのですが、
スマホ（android バージョン12）やiPad（ios16.2）などで実行すると指定した画像で停止せず、
一つ上部で停止するなど正しく表示されません。
色々試行錯誤してみているのですが解決できず、助言いただけると助かります。
どうぞよろしくお願い致します。
該当するソースコード
<div class="main">
<div class="slot">
<div id="slot-frame">
<ul class="reels">
<li class="reel"><img src="images/1.png"></li>
<li class="reel"><img src="images/4.png"></li>
<li class="reel"><img src="images/3.png"></li>
<li class="reel"><img src="images/2.png"></li>
<li class="reel"><img src="images/0.png"></li> //1等「7」
<li class="reel"><img src="images/1.png"></li>
<li class="reel"><img src="images/2.png"></li>
</ul>
<ul class="reels">
<li class="reel"><img src="images/0.png"></li>
<li class="reel"><img src="images/2.png"></li>
<li class="reel"><img src="images/1.png"></li>
<li class="reel"><img src="images/3.png"></li>
<li class="reel"><img src="images/4.png"></li>
<li class="reel"><img src="images/0.png"></li> //1等「7」
<li class="reel"><img src="images/2.png"></li>
</ul>
<ul class="reels">
<li class="reel"><img src="images/3.png"></li>
<li class="reel"><img src="images/2.png"></li>
<li class="reel"><img src="images/4.png"></li>
<li class="reel"><img src="images/1.png"></li>
<li class="reel"><img src="images/0.png"></li> //1等「7」
<li class="reel"><img src="images/3.png"></li>
<li class="reel"><img src="images/2.png"></li>
</ul>
</div>
</div>
<div>
<button type="button" class="stop-btn" data-val="0" disabled="true">STOP!</button>
<button type="button" class="stop-btn" data-val="1" disabled="true">STOP!</button>
<button type="button" class="stop-btn" data-val="2" disabled="true">STOP!</button>
</div>
<div>
<button type="button" id="start-btn">START！</button>
</div>
<div>
<button id="btn_clear" style="display:none;">結果をクリア</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
let slot_frame = document.getElementById("slot-frame");
let reel = document.getElementsByClassName("reel");
let reels = document.getElementsByClassName("reels");
let start_btn = document.getElementById("start-btn");
let stop_btn = document.getElementsByClassName("stop-btn");
let sec = 100; //スロットのリール回転速度(実行毎秒数)
let stopReelFlag = []; //スロットのリール停止フラグ
let reelCounts = []; //どの画像をどの位置にさせるか
let slotFrameHeight; //フレームの大きさ
let slotReelsHeight; //リール(画像)全体の大きさ
let slotReelItemHeight; //リール(画像)1個の大きさ
let slotReelStartHeight; //画像の初期値
let Slot = {
init: function() { //初期化
stopReelFlag[0] = stopReelFlag[1] = stopReelFlag[2] = false;
reelCounts[0] = reelCounts[1] = reelCounts[2] = 0;
//[0, 0, 0] 最初に中央にくる画像の設定
},
start: function() { //クリックイベント
Slot.init();
for (let index = 0; index < 3; index++) {
Slot.animation(index); //スロット３つ動かす
}
},
stop: function(i) { //ストップボタンのクリックイベント
//ストップボタンを押すと指定時間後に停止
setTimeout(() => {
stopReelFlag[i] = true; //animateのループから抜け出せる
}, 2000);
//result_no（当選結果番号）により、reelCounts[]に該当する画像を指定して表示させる
//1等の場合
if (result_no == 1) {
if (i == 0) {
reelCounts[0] = 1;
} else if (i == 1) {
reelCounts[1] = 0;
} else if (i == 2) {
reelCounts[2] = 1;
}
console.log('stop', '当たり1', i, reelCounts[i]);
//2等の場合
} else if (result_no == 2) {
if (i == 0) {
reelCounts[0] = 0;
} else if (i == 1) {
reelCounts[1] = 3;
} else if (i == 2) {
reelCounts[2] = 2;
}
console.log('stop', '当たり2', i, reelCounts[i]);
}
if (stopReelFlag[0] && stopReelFlag[1] && stopReelFlag[2]) {
start_btn.removeAttribute("disabled"); //スタートボタンの機能を機能させる
}
},
resetLocationInfo: function() { //最初の位置を設定
slotFrameHeight = slot_frame.offsetHeight;
slotReelsHeight = reels[0].offsetHeight;
slotReelItemHeight = reel[0].offsetHeight;
slotReelStartHeight = -slotReelsHeight; // -2700
//画像末端がフレームのトップ 画像末端がフレームの末端 画像末端がフレームの中央 画像1.5枚分下げる
slotReelStartHeight = slotReelStartHeight + slotFrameHeight-(slotFrameHeight / 2) + slotReelItemHeight * 3 / 2;
for (let i = 0; i < reels.length; i++) {
reels[i].style.top = String(slotReelStartHeight) + "px";
}
},
animation: function(index) { //スロットを動かす
if (reelCounts[index] >= 5) {
reelCounts[index] = 0;
}
//animate( CSSプロパティ, 速度, イージング関数名, アニメーション完了後に実行する関数 );
$('.reels').eq(index).animate({
'top': slotReelStartHeight + (reelCounts[index] * slotReelItemHeight)
//indexが増えるたびに、画像１つ分下がる
}, {
duration: sec, //回転速度
easing: 'linear', //常に一定の速度
complete: function() {
if (stopReelFlag[index]) { //stopReelFlag[index]がtrueになるまでループ
// return;
return;
}
reelCounts[index]++;
Slot.animation(index);
}
});
},
};
window.onload = function() {
Slot.init();
Slot.resetLocationInfo();
start_btn.addEventListener("click", function(e) {
e.target.setAttribute("disabled", true) //スタートボタンを無効化
Slot.start();
for (let i = 0; i < stop_btn.length; i++) {
stop_btn[i].removeAttribute("disabled"); //ストップボタンを機能させる
}
});
for (let i = 0; i < stop_btn.length; i++) {
stop_btn[i].addEventListener("click", function(e) {
Slot.stop(e.target.getAttribute('data-val')); //どのボタンをストップさせるか
start_btn.style.display = 'none';
document.getElementById('btn_clear').style.display = 'block';
})
}
};
btn_clear.addEventListener('click', function() {
// draw.classList.remove('inactive');
window.location.reload();
});
</script>
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0 likes
