スロットゲーム作成時にスコアが加算されない場合がある。

すみません、少し条件を変え以下の対応としまして、自己解決いたしました。お騒がせしました。

const imageT = 'img/20240323203116.png';
const imageF = 'img/20240323203122.png';
const images = [imageT, imageF]; // AとBの画像のパス
let spinning = [true, true, true]; // 各スロットのスピン状態を管理
let score = 0; // スコアを初期化
let powerLevel = 0; // ひらめきパワーのレベル
let currentImages = [null, null, null]; // 各スロットの現在の画像を保持

const startButton = document.getElementById('startButton');
const slotPowerCanvas = document.getElementById('slotPowerCanvas');
const slotPowerCtx = slotPowerCanvas.getContext('2d');

startButton.addEventListener('click', startSpin);

function startSpin() {
const canvasElements = document.querySelectorAll('.slot-container canvas');
const randomImageIndices = generateRandomImageIndices(); // ランダムな要素を持つ配列を生成

canvasElements.forEach((canvas, index) => { spinning[index] = true; // スロットをスピン状態に let frameCount = 0; // フレームカウンター let imageIndex = 0; // 画像のインデックス const ctx = canvas.getContext('2d'); function draw() { if (++frameCount % 5 === 0) { // 10フレームごとに画像を更新 const currentImage = randomImageIndices[imageIndex % randomImageIndices.length]; // 現在の画像 const nextImage = randomImageIndices[(imageIndex + 1) % randomImageIndices.length]; // 次の画像 ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア // 次の画像を描画 const nextImg = new Image(); nextImg.onload = function() { ctx.drawImage(nextImg, 0, 0, canvas.width, 50); // 上部に描画 }; nextImg.src = images[nextImage]; // 現在の画像を描画 const currentImg = new Image(); currentImg.onload = function() { ctx.drawImage(currentImg, 0, 50, canvas.width, 50); // 中央に描画 }; currentImg.src = images[currentImage]; // 一つ前の画像を描画 const prevImage = (currentImage - 1 + images.length) % images.length; // 一つ前の画像のインデックス const prevImg = new Image(); prevImg.onload = function() { ctx.drawImage(prevImg, 0, 100, canvas.width, 50); // 下部に描画 }; prevImg.src = images[prevImage]; imageIndex++; // 画像のインデックスを更新 } if (spinning[index]) { // スピンがtrueの場合にアニメーション続行 requestAnimationFrame(draw); } else { // スロットが止まったら現在の画像を記録 currentImages[index] = images[randomImageIndices[(imageIndex - 1 + randomImageIndices.length) % randomImageIndices.length]]; // すべてのスロットが停止したかどうかを確認 if (spinning.every(val => val === false)) { // すべてのスロットの画像がimageTであるか確認 if (currentImages.every(img => img === imageT)) { score += 100; // 条件を満たす場合はスコアを加算 console.log("Score after bonus:", score); updatePowerLevel(); } } } } draw(); }); document.querySelectorAll('.stopButton').forEach((button, btnIndex) => { button.onclick = () => { spinning[btnIndex] = false; // 対応するスロットのスピンを停止 }; });

}

function generateRandomImageIndices() {
const randomIndices = [];
for (let i = 0; i < 7; i++) {
randomIndices.push(Math.floor(Math.random() * 2)); // AとBの画像をランダムに選択
}
return randomIndices;
}

function updatePowerLevel() {
powerLevel++;
if (powerLevel === 10) {
drawPowerMessage();
} else {
drawPowerBar();
}
}

function drawPowerBar() {
slotPowerCtx.clearRect(0, 0, slotPowerCanvas.width, slotPowerCanvas.height);
slotPowerCtx.fillStyle = 'yellow';
slotPowerCtx.fillRect(0, 0, 40 * powerLevel, slotPowerCanvas.height);
}

function drawPowerMessage() {
slotPowerCtx.clearRect(0, 0, slotPowerCanvas.width, slotPowerCanvas.height);
slotPowerCtx.font = 'bold 20px Arial';
slotPowerCtx.fillStyle = 'black';
slotPowerCtx.fillText('You Can Create Innovations!', 50, 50);
}