JavaScriptスロットソースコード

<style>
/* スロットの数字を表示する領域 */
#slots {
display: flex;
gap: 20px;
margin: 20px 0;
}
/* 各スロットのスタイル */
.slot {
font-size: 48px;
width: 60px;
height: 60px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
/* ボタンの共通スタイル */
button {
font-size: 16px;
padding: 5px 10px;
margin: 5px;
cursor: pointer;
}
</style>
<div id="slots">
<div class="slot" id="slot1">1</div>
<div class="slot" id="slot2">1</div>
<div class="slot" id="slot3">1</div>
<button id="startButton">START</button>
</div>
<div>
<button class="stop-button" id="stop1" disabled>STOP</button>
<button class="stop-button" id="stop2" disabled>STOP</button>
<button class="stop-button" id="stop3" disabled>STOP</button>
</div>

<script>
// 使用する数字の配列
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 各スロットの回転を制御するためのタイマーID
let intervalIds = [null, null, null];

// スロットが回転中かどうかを示すフラグ
let isRunning = false;

// DOMエレメントの取得
const slotElements = [
document.getElementById('slot1'),
document.getElementById('slot2'),
document.getElementById('slot3')
];
const stopButtons = [
document.getElementById('stop1'),
document.getElementById('stop2'),
document.getElementById('stop3')
];
const startButton = document.getElementById('startButton');

// 現在の数字の次の数字を取得する関数
function getNextNumber(currentNumber) {
const currentIndex = numbers.indexOf(parseInt(currentNumber));
return numbers[(currentIndex + 1) % numbers.length];
}

// 指定されたスロットの数字を更新する関数
function updateSlot(index) {
const currentNumber = slotElements[index].textContent;
slotElements[index].textContent = getNextNumber(currentNumber);
}

// 勝利条件をチェックする関数
function checkWin() {
const values = slotElements.map(el => el.textContent);
if (values[0] === values[1] && values[1] === values[2]) {
setTimeout(() => {
alert('おめでとうございます！3つの数字が揃いました！');
}, 100);
}
}

// スロットの回転を開始する関数
function startSlots() {
if (!isRunning) {

// 各スロットの回転を開始
intervalIds = intervalIds.map((_, index) => setInterval(() => updateSlot(index), 300));

// 停止ボタンを有効化、開始ボタンを無効化
stopButtons.forEach(button => button.disabled = false);
startButton.disabled = true;
isRunning = true;
}
}

// 指定されたスロットの回転を停止する関数
function stopSlot(index) {
if (intervalIds[index] !== null) {

// スロットの回転を停止
clearInterval(intervalIds[index]);
intervalIds[index] = null;
stopButtons[index].disabled = true;

// 全てのスロットが停止したかチェック
if (intervalIds.every(id => id === null)) {
isRunning = false;
startButton.disabled = false;
checkWin();
}
}
}

// イベントリスナーの設定
startButton.addEventListener('click', startSlots);
stopButtons.forEach((button, index) => {
button.addEventListener('click', () => stopSlot(index));
});

// 初期値をランダムに設定
slotElements.forEach(el => el.textContent = numbers[Math.floor(Math.random() * numbers.length)]);
</script>