HTML上でモグラ叩きゲームを作って観ました。ダラダラと半年かかりました（^o^）
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>モグラ叩きゲーム</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: black;
}
#title_box {
display: inline-flex;
height: 70px;
width: 360px;
background: violet;
margin: 0px auto;
}
/* ボードを表示するためのグリッド */
#game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
justify-content: center;
margin-top: 20px;
}
/* モグラが現れる穴 */
.hole {
width: 100px;
height: 100px;
background-image: radial-gradient(circle, #000, #900);
border-radius: 50%;
position: relative;
}
/* モグラ */
.mole {
width: 60px;
height: 60px;
position: absolute;
top: 20px;
left: 20px;
display: none;
}
#start-button {
padding: 0px 20px;
font-size: 16px;
margin-top: 0px;
}
#time-left {
font-size: 20px;
margin-top: 10px;
}
h2 {
color: white;
}
p {
color: white;
}
</style>
</head>
<body>
<div id="title_box"> 
<img src="pic/mole.png" width="70px" height="70px">
<h2>モグラ叩きゲーム</h2>
<img src="pic/mole.png" width="70px" height="70px">
</div>
<p><font color ="yellow" size="4">
スコア: </font><font color ="yellow"
size="5"><span id="score">0</span>
</font>  残り時間:
<span id="time-left">30</span>秒</p>
<button id="start-button">スタート</button>
<div id="game-board">
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
<div class="hole">
<img src="pic/mole.png" class="mole"></div>
</div>
<script>
var score = 0;
var activeMole = null;
var gameInterval = null;
var countdownInterval = null;
// カウントダウンのタイマーを管理するための変数を追加
var timeLeft = 30;
// ランダムな穴を選択
function getRandomHole() {
var holes = document.querySelectorAll('.hole');
var index = Math.floor(Math.random() * holes.length);
return holes[index];
}
// ランダムな穴にモグラを表示し
// モグラがクリックされたらスコアを増やす
function showMole() {
if (activeMole) {
activeMole.style.display = 'none';
}
var hole = getRandomHole();
var mole = hole.querySelector('.mole');
mole.style.display = 'block';
activeMole = mole;
mole.onclick = function() {
score++;
document.getElementById('score').innerText = score;
mole.style.display = 'none';
activeMole = null;
};
}
// スコアと残り時間をリセットし、
// gameIntervalとcountdownIntervalを設定してゲームを開始。
// 「スタート」ボタンを無効化して、
// ゲームが開始後にもう再クリック防止。
function startGame() {
score = 0;
timeLeft = 30;
document.getElementById('score').innerText = score;
document.getElementById('time-left').innerText = timeLeft;
gameInterval = setInterval(showMole, 1000);
countdownInterval = setInterval(updateTimer, 1000);
document.getElementById('start-button').disabled = true;
}
// 残り時間を1秒ずつ減少し、0秒でゲーム終了。
// clearIntervalを使用しgameIntervalと
// countdownIntervalを停止し、終了時にアラートを表示。
function updateTimer() {
timeLeft--;
document.getElementById('time-left').innerText = timeLeft;
if (timeLeft <= 0) {
clearInterval(gameInterval);
clearInterval(countdownInterval);
alert('ゲーム終了！スコア: ' + score);
document.getElementById('start-button').disabled = false;
}
}
document.getElementById('start-button').onclick = startGame;
</script>
</body>
</html>
<!-- index.html -->
表示直後の状態
ゲーム終了後の状態
