让我来介绍一下如何使用JavaScript实现打地鼠小游戏的攻略。这个攻略将涵盖整个实现过程，并且提供两个示例来帮助解释。
准备工作
首先，为了开始这个小游戏的开发，我们需要准备一些基本的工具和框架。以下是需要准备的内容：
- HTML：用于构建页面并显示游戏。
- CSS：用于样式和布局方案。
- JavaScript：用于游戏逻辑的实现。
- 图片资源：用于创建动画和显示地鼠。
HTML和CSS的设置
首先，我们需要创建一个HTML文件，用于构建基本的页面和布局方案。在HTML文件中，创建一个包含菜单、游戏区域、得分和倒计时的容器。游戏区域是指玩家需要打击地鼠的区域。在HTML中设置好CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠 - JavaScript 小游戏</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>打地鼠 - JavaScript 小游戏</h1>
<div class="menu">
<h2>菜单</h2>
<button id="start">开始游戏</button>
<button id="restart" disabled>重新开始</button>
<h3>分数: <span id="score">0</span></h3>
<h3>倒计时: <span id="timer">30</span></h3>
</div>
<div class="game">
<div class="hole hole1" id="hole1"><img src="./images/mole.png"></div>
<div class="hole hole2" id="hole2"><img src="./images/mole.png"></div>
<div class="hole hole3" id="hole3"><img src="./images/mole.png"></div>
<div class="hole hole4" id="hole4"><img src="./images/mole.png"></div>
<div class="hole hole5" id="hole5"><img src="./images/mole.png"></div>
<div class="hole hole6" id="hole6"><img src="./images/mole.png"></div>
<div class="hole hole7" id="hole7"><img src="./images/mole.png"></div>
<div class="hole hole8" id="hole8"><img src="./images/mole.png"></div>
<div class="hole hole9" id="hole9"><img src="./images/mole.png"></div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 50px 0;
}
h1 {
text-align: center;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.game {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.hole {
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.hole img {
position: absolute;
bottom: 0;
opacity: 0;
transition: all 0.3s;
}
.hole.active img {
bottom: -20px;
opacity: 1;
}
.hole.scored img {
opacity: 0.5;
}
#score, #timer {
font-size: 24px;
margin: 0;
color: #333;
font-weight: bold;
}
button {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #333;
background-color: white;
color: #333;
border-radius: 10px;
cursor: pointer;
}
button:disabled, button[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
button:not(:disabled):hover {
background-color: #333;
color: white;
}
实现游戏逻辑
在游戏逻辑中，我们需要实现以下几个功能：
- 随机出现地鼠。
- 点击地鼠得分。
- 游戏倒计时和结束游戏。
- 重新开始游戏。
在JavaScript文件中，创建一个对象，用于存储游戏中的变量和函数
var game = {
}
随机出现地鼠
在随机出现地鼠的函数中，我们需要获取到所有的地鼠框，并从中随机选择其中一个地鼠进行显示。我们可以使用Math.random()函数随机从数组中选择一个地鼠。
randomHole: function() {
var holes = document.querySelectorAll('.hole');
var hole = holes[Math.floor(Math.random() * holes.length)];
return hole;
}
在每隔一定的时间，随机出现一个地鼠并显示在游戏区域中。
startGame: function() {
game.timer = setInterval(game.randomHole, 1000);
}
点击地鼠得分
在点击地鼠的函数中，我们需要获取到点击的地鼠元素，并将其得分加一，并在界面上更新显示分数。
clickMole: function(e) {
if (!e.isTrusted) return;
var mole = this.querySelector('.mole');
if (!mole.classList.contains('active')) return;
mole.classList.remove('active');
mole.classList.add('scored');
game.score++;
document.getElementById('score').innerText = game.score;
}
游戏倒计时和结束游戏
我们需要在游戏开始时，启动一个定时器，每隔一秒，将游戏的倒计时减一，并在界面上更新显示。
countDown: function() {
game.timer = setInterval(function() {
game.timeLeft--;
document.getElementById('timer').innerText = game.timeLeft;
if (game.timeLeft < 1) game.gameOver();
}, 1000);
}
在结束游戏的函数中，我们需要清除随机出现地鼠定时器和倒计时定时器，并在界面上显示游戏结束信息。
gameOver: function() {
clearInterval(game.timer);
alert('Game over. \nYour score: ' + game.score);
document.getElementById('start').disabled = false;
document.getElementById('restart').disabled = true;
document.getElementById('score').innerText = '0';
document.getElementById('timer').innerText = '30';
document.querySelectorAll('.mole').forEach(function(mole) {
mole.classList.remove('active');
});
}
重新开始游戏
在重新开始游戏的函数中，我们需要清除所有的倒计时和得分数据，并在按钮上添加有效和无效状态。
restartGame: function() {
clearInterval(game.timer);
this.disabled = true;
document.getElementById('start').disabled = true;
game.timeLeft = 30;
game.score = 0;
game.countDown();
game.startGame();
setTimeout(function() {
document.getElementById('restart').disabled = false;
}, 3000);
}
示例介绍
下面我们来看两个比较简单的示例，来帮助理解打地鼠小游戏的实现过程。
示例1
在这个示例中，我们使用了一个简单的布局方案。玩家可以通过点击按钮开始或重新开始游戏。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打地鼠 - 示例</title>
<style>
.container {
width: 600px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 32px;
font-weight:bold;
}
.game {
margin: 50px 0;
}
.hole {
width: 120px;
height: 120px;
border: 2px solid #333;
display: inline-block;
margin: 10px;
position: relative;
overflow: hidden;
transition: all 0.2s;
cursor: pointer;
}
.hole > img {
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transition: all 0.2s;
}
.hole.active > img {
opacity: 1;
}
#score {
font-size: 24px;
color: #333;
margin: 20px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #333;
background-color: white;
color: #333;
border-radius: 10px;
cursor: pointer;
}
button:not(:disabled):hover {
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>打地鼠 - 示例</h1>
<button id="start">开始游戏</button>
<button id="restart" disabled>重新开始</button>
<div class="game">
<div class="hole" id="hole1"><img src="./images/mole.png"></div>
<div class="hole" id="hole2"><img src="./images/mole.png"></div>
<div class="hole" id="hole3"><img src="./images/mole.png"></div>
<div class="hole" id="hole4"><img src="./images/mole.png"></div>
<div class="hole" id="hole5"><img src="./images/mole.png"></div>
<div class="hole" id="hole6"><img src="./images/mole.png"></div>
<div class="hole" id="hole7"><img src="./images/mole.png"></div>
<div class="hole" id="hole8"><img src="./images/mole.png"></div>
<div class="hole" id="hole9"><img src="./images/mole.png"></div>
</div>
<div id="score">得分: 0</div>
</div>
<script src="game.js"></script>
</body>
</html>
var game = {
timeLeft: 30,
score: 0,
timer: null,
randomHole: function() {
var holes = document.querySelectorAll('.hole');
var hole = holes[Math.floor(Math.random() * holes.length)];
hole.classList.add('active');
setTimeout(function() {
hole.classList.remove('active');
}, 1000);
},
clickMole: function(e) {
if (!e.isTrusted) return;
var mole = this.querySelector('img');
if (!mole) return;
if (!mole.classList.contains('active')) return;
mole.parentElement.classList.remove('active');
mole.classList.add('scored');
game.score++;
document.getElementById('score').innerText = '得分: ' + game.score;
},
countDown: function() {
game.timer = setInterval(function() {
game.timeLeft--;
if (game.timeLeft < 1) game.gameOver();
}, 1000);
},
startGame: function() {
game.timer = setInterval(game.randomHole, 1000);
},
gameOver: function() {
clearInterval(game.timer);
alert('Game over. \nYour score: ' + game.score);
document.getElementById('start').disabled = false;
document.getElementById('restart').disabled = true;
var moles = document.querySelectorAll('.hole img');
moles.forEach(function(mole) {
mole.classList.remove('active');
});
game.score = 0;
document.getElementById('score').innerText = '得分: 0';
game.timeLeft = 30;
},
restartGame: function() {
clearInterval(game.timer);
game.timeLeft = 30;
game.score = 0;
game.countDown();
game.startGame();
document.getElementById('restart').disabled = true;
setTimeout(function() {
document.getElementById('restart').disabled = false;
}, 3000);
}
}
document.getElementById('start').addEventListener('click', function() {
this.disabled = true;
game.countDown();
game.startGame();
document.getElementById('restart').disabled = true;
});
document.getElementById('restart').addEventListener('click', game.restartGame);
document.querySelectorAll('.hole').forEach(function(hole) {
hole.addEventListener('click', game.clickMole);
});
示例2
在这个示例中，我们使用了CSS动画，在地鼠出现和消失时添加了一些额外的动画效果。另外，游戏倒计时和分数信息通过固定的底部栏显示。
```html
打地鼠 - 示例2
赞 (0)
微信扫一扫 
支付宝扫一扫
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
上一篇
2023年6月11日
使用jquery的cookie实现登录页记住用户名和密码的方法
下一篇
2023年6月11日
