打地鼠游戏源码
时间: 2023-07-02 22:16:12 浏览: 93
打地鼠源码
以下是一个使用 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.innerHTML = score;
timeSpan.innerHTML = 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.innerHTML = 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.innerHTML = 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 目录中,并根据实际路径进行修改。
阅读全文