1
2
3
4
★
5
6
7
8
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ビンゴゲーム</title>
<style>
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.number-ball {
animation: bounce 1s infinite;
}
.marked {
animation: pop 0.5s;
}
.center {
animation: spin 2s infinite;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 400px; height: 400px; border: 2px solid #000; position: relative;">
<div id="bingo-board" style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; margin-bottom: 20px;">
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">1</div>
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">2</div>
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">3</div>
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">4</div>
<div class="center" style="display: flex; align-items: center; justify-content: center; font-size: 2em;">★</div>
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">5</div>
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">6</div>
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">7</div>
<div style="display: flex; align-items: center; justify-content: center; font-size: 2em;">8</div>
</div>
<div id="number-container" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 100px; position: absolute; bottom: 10px;">
<!-- 1秒ごとに数字の玉が表示される場所 -->
</div>
</div>
<script>
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const bingoBoard = document.querySelector('#bingo-board').children;
const randomNumbers = numbers.sort(() => 0.5 - Math.random()).slice(0, 8);
Array.from(bingoBoard).forEach((cell, index) => {
if (cell.textContent !== '★') {
cell.textContent = randomNumbers.pop();
}
});
let drawnNumbers = [];
function drawNumber() {
if (drawnNumbers.length < 8) {
const number = Math.floor(Math.random() * 10) + 1;
if (!drawnNumbers.includes(number)) {
drawnNumbers.push(number);
const numberBall = document.createElement('div');
numberBall.classList.add('number-ball');
numberBall.style.fontSize = '2em';
numberBall.textContent = `🔴 ${number}`;
document.getElementById('number-container').appendChild(numberBall);
markNumber(number);
}
}
}
function markNumber(number) {
Array.from(bingoBoard).forEach((cell) => {
if (cell.textContent == number) {
cell.textContent = '♥';
cell.classList.add('marked');
}
});
}
setInterval(drawNumber, 1000);
</script>
</body>
</html>
```