前端开发打地鼠游戏：HTML、CSS 和 JavaScript 实现
当然可以！作为一名高级程序员兼优秀的 UI 设计师，我可以帮你利用前端技术来开发一个小游戏。以下是一个示例，一个简单的打地鼠游戏。
首先，我们需要一个 HTML 文件作为游戏的基本结构。在其中创建一个包含游戏画布的 div 元素，以及一个开始按钮。
<!DOCTYPE html>
<html>
<head>
<title>打地鼠游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.hole {
width: 50px;
height: 50px;
background-color: brown;
border-radius: 50%;
position: absolute;
top: -50px;
left: -50px;
transition: top 0.5s linear;
cursor: pointer;
}
#start-button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>打地鼠游戏</h1>
<div id='game-board'>
<div class='hole'></div>
<div class='hole'></div>
<div class='hole'></div>
</div>
<button id='start-button'>开始游戏</button>
<script src='game.js'></script>
</body>
</html>
接下来，我们需要编写游戏的逻辑和交互。在同一目录下创建一个名为 game.js 的 JavaScript 文件，并将其连接到 HTML 文件中。
window.addEventListener('DOMContentLoaded', (event) => {
const holes = document.querySelectorAll('.hole');
const startButton = document.getElementById('start-button');
let score = 0;
let gameIsRunning = false;
let gameTimer;
// 点击地鼠的事件处理函数
const hitMole = (event) => {
if (!gameIsRunning) return;
event.target.style.top = '-50px';
score++;
};
// 游戏结束的处理函数
const endGame = () => {
clearInterval(gameTimer);
gameIsRunning = false;
alert(`游戏结束！你的得分是 ${score} 分。`);
};
// 开始游戏的处理函数
const startGame = () => {
score = 0;
gameIsRunning = true;
startButton.disabled = true;
gameTimer = setInterval(() => {
const randomIndex = Math.floor(Math.random() * holes.length);
const mole = holes[randomIndex];
mole.style.top = '0';
setTimeout(() => {
mole.style.top = '-50px';
}, 1000);
}, 1500);
setTimeout(endGame, 10000);
};
// 绑定点击事件
holes.forEach((hole) => {
hole.addEventListener('click', hitMole);
});
startButton.addEventListener('click', startGame);
});
现在，你可以在浏览器中打开 HTML 文件，点击'开始游戏'按钮，就可以开始玩这个简单的打地鼠游戏了。地鼠会从洞中冒出，你需要尽可能快地点击它们来获得分数。游戏会在 10 秒后结束，并弹出得分提示。
这只是一个简单的示例，你可以根据自己的兴趣和想法来扩展和改进这个游戏，添加更多的功能和动画效果。希望这个示例对你有所帮助！
原文地址: https://www.cveoy.top/t/topic/pNYm 著作权归作者所有。请勿转载和采集!