以下是一个使用
HTML、
CSS 和
JavaScript 实现的打
地鼠游戏源码：
###
HTML 代码
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF-8">
<title>打
地鼠游戏</title>
<link rel="stylesheet" href="style.
css">
</head>
<body>
<div class="container">
<h1>打
地鼠游戏</h1>
<p>在有限的时间内，点击尽可能多的
地鼠。</p>
<p>得分最高者获胜。</p>
<div class="game-area">
<div class="score-panel">
<p>得分：<span id="score">0</span></p>
<p>时间：<span id="time">60</span> 秒</p>
<button id="start-btn">开始
游戏</button>
</div>
<div class="hole-area">
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</
html>
```
###
CSS 代码
```
css
.container {
width: 800px;
margin: 0 auto;
text-align: center;
}
.game-area {
margin-top: 50px;
}
.score-panel {
margin-bottom: 20px;
}
.hole-area {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.hole {
width: 100px;
height: 100px;
margin: 20px;
background: url('img/hole.png') bottom center no-repeat;
cursor: pointer;
position: relative;
}
.hole:hover {
background-position-y: top;
}
.mole {
width: 100px;
height: 100px;
background: url('img/mole.png') bottom center no-repeat;
position: absolute;
left: 0;
top: 0;
display: none;
}
```
###
JavaScript 代码
```
javascript
var score = 0; // 得分
var time = 60; // 剩余时间
var moleTimer = null; //
地鼠定时器
var timeTimer = null; // 时间定时器
var holes = document.querySelectorAll('.hole'); //
地鼠洞
var scoreSpan = document.querySelector('#score'); // 得分区域
var timeSpan = document.querySelector('#time'); // 时间区域
var startBtn = document.querySelector('#start-btn'); // 开始按钮
// 开始
游戏
function startGame() {
score = 0;
time = 60;
scoreSpan.inner
HTML = score;
timeSpan.inner
HTML = time;
startBtn.disabled = true;
moleTimer = setInterval(showMole, 1000);
timeTimer = setInterval(countDown, 1000);
}
// 显示
地鼠
function showMole() {
// 随机选择一个
地鼠洞
var index = Math.floor(Math.random() * holes.length);
// 获取该洞中的
地鼠
var hole = holes[index];
var mole = hole.querySelector('.mole');
// 如果该洞中没有
地鼠，则显示一个
地鼠
if (!mole) {
// 创建
地鼠
mole = document.createElement('div');
mole.className = 'mole';
// 点击
地鼠得分
mole.addEventListener('click', function() {
score += Math.floor(Math.random() * 10) + 1;
scoreSpan.inner
HTML = score;
hideMole(mole);
});
// 将
地鼠添加到洞中
hole.appendChild(mole);
}
// 显示
地鼠
mole.style.display = 'block';
// 隐藏
地鼠
setTimeout(function() {
hideMole(mole);
}, 1000);
}
// 隐藏
地鼠
function hideMole(mole) {
mole.style.display = 'none';
}
// 倒计时
function countDown() {
time--;
timeSpan.inner
HTML = time;
if (time === 0) {
endGame();
}
}
// 结束
游戏
function endGame() {
clearInterval(moleTimer);
clearInterval(timeTimer);
startBtn.disabled = false;
alert('
游戏结束，得分：' + score);
}
// 绑定事件
startBtn.addEventListener('click', startGame);
```
注意：以上代码中使用了两张图片（hole.png 和 mole.png），需要将它们放到项目的 img 目录中，并根据实际路径进行修改。
超级会员免费看
订阅专栏 解锁全文
1784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
