スロットゲーム

 

 

超新星スバルファイブ スロット

body {
background-color: #ffcc00; /* ロゴに合わせたイエロー */
font-family: ‘Arial Black’, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}

.logo {
width: 300px;
margin-bottom: 20px;
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3));
}

.slot-container {
display: flex;
background-color: #333;
padding: 20px;
border: 10px solid #ff0000;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.reel {
width: 120px;
height: 120px;
background-color: white;
margin: 0 10px;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #555;
}

.reel img {
width: 100%;
height: 100%;
object-fit: contain;
}

.controls {
margin-top: 30px;
}

#spin-button {
padding: 15px 50px;
font-size: 24px;
background-color: #ff0000;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px #990000;
transition: 0.1s;
}

#spin-button:active {
transform: translateY(5px);
box-shadow: none;
}

#spin-button:disabled {
background-color: #888;
box-shadow: none;
cursor: not-allowed;
}

.result-message {
margin-top: 20px;
font-size: 32px;
color: #ff0000;
height: 40px;
text-shadow: 2px 2px white;
}

// ヒーローたちの画像リスト
const heroes = [
‘e382b9e38390e383abe383ace38383e38389.jpg’,
‘e382b9e38390e383abe38396e383abe383bc.jpg’,
‘e382b9e38390e383abe38394e383b3e382af.jpg’,
‘e382b9e38390e383abe3839de383aae382b9.jpg’,
‘e382b9e38390e383abe382a4e382a8e383ade383bc.jpg’
];

const reels = [
document.getElementById(‘reel1’).querySelector(‘img’),
document.getElementById(‘reel2’).querySelector(‘img’),
document.getElementById(‘reel3’).querySelector(‘img’)
];

const spinButton = document.getElementById(‘spin-button’);
const message = document.getElementById(‘message’);

function spin() {
spinButton.disabled = true;
message.innerText = “”;
let spinCount = 0;
const maxSpin = 20;

const interval = setInterval(() => {
reels.forEach(img => {
const randomHero = heroes[Math.floor(Math.random() * heroes.length)];
img.src = randomHero;
});

spinCount++;
if (spinCount >= maxSpin) {
clearInterval(interval);
checkResult();
spinButton.disabled = false;
}
}, 100);
}

function checkResult() {
const results = reels.map(img => img.src.split(‘/’).pop());
// すべて揃ったか判定
if (results[0] === results[1] && results[1] === results[2]) {
message.innerText = “⭐ BINGO!!! ⭐”;
message.style.color = “#ff0000”;
} else {
message.innerText = “TRY AGAIN!”;
message.style.color = “#555”;
}
}

spinButton.addEventListener(‘click’,

超新星スバルファイブ スロット body { background-color: #ffcc00; /* ロゴに合わせたイエロー */ font-family: ‘Arial Black’, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .logo { width: 300px; margin-bottom: 20px; filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3)); } .slot-container { display: flex; background-color: #333; padding: 20px; border: 10px solid #ff0000; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.5); } .reel { width: 120px; height: 120px; background-color: white; margin: 0 10px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 4px solid #555; } .reel img { width: 100%; height: 100%; object-fit: contain; } .controls { margin-top: 30px; } #spin-button { padding: 15px 50px; font-size: 24px; background-color: #ff0000; color: white; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 5px #990000; transition: 0.1s; } #spin-button:active { transform: translateY(5px); box-shadow: none; } #spin-button:disabled { background-color: #888; box-shadow: none; cursor: not-allowed; } .result-message { margin-top: 20px; font-size: 32px; color: #ff0000; height: 40px; text-shadow: 2px 2px white; } // ヒーローたちの画像リスト const heroes = [ ‘e382b9e38390e383abe383ace38383e38389.jpg’, ‘e382b9e38390e383abe38396e383abe383bc.jpg’, ‘e382b9e38390e383abe38394e383b3e382af.jpg’, ‘e382b9e38390e383abe3839de383aae382b9.jpg’, ‘e382b9e38390e383abe382a4e382a8e383ade383bc.jpg’ ]; const reels = [ document.getElementById(‘reel1’).querySelector(‘img’), document.getElementById(‘reel2’).querySelector(‘img’), document.getElementById(‘reel3’).querySelector(‘img’) ]; const spinButton = document.getElementById(‘spin-button’); const message = document.getElementById(‘message’); function spin() { spinButton.disabled = true; message.innerText = “”; let spinCount = 0; const maxSpin = 20; const interval = setInterval(() => { reels.forEach(img => { const randomHero = heroes[Math.floor(Math.random() * heroes.length)]; img.src = randomHero; }); spinCount++; if (spinCount >= maxSpin) { clearInterval(interval); checkResult(); spinButton.disabled = false; } }, 100); } function checkResult() { const results = reels.map(img => img.src.split(‘/’).pop()); // すべて揃ったか判定 if (results[0] === results[1] && results[1] === results[2]) { message.innerText = “⭐ BINGO!!! ⭐”; message.style.color = “#ff0000”; } else { message.innerText = “TRY AGAIN!”; message.style.color = “#555”; } } spinButton.addEventListener(‘click’, spin);