JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】，web可视化开发
打地鼠游戏是一个经典的游戏，我们可以使用JavaScript和jQuery来制作。以下是一个简单的实现：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<title>打地鼠游戏</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="game-container">
<div id="game-board"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS部分（style.css）:
#game-container {
width: 500px;
height: 500px;
position: relative;
user-select: none;
}
#game-board {
width: 100%;
height: 100%;
position: absolute;
}
.mouse {
width: 20px;
height: 20px;
background-color: #333;
position: absolute;
border-radius: 50%;
}JavaScript部分（script.js）:
$(document).ready(function() {
const boardSize = 25;
let gameBoard = $('#game-board');
let mice = [];
function createBoard() {
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
$('<div>', { class: 'mouse' }).css({
top: i * 20,
left: j * 20
}).appendTo(gameBoard);
}
}
mice = $('.mouse');
}
function initGame() {
createBoard();
gameBoard.on('click', '.mouse', function() {
$(this).hide();
mice = mice.filter(function(index, mouse) {
return $(mouse).is(':visible');
});
if (mice.length === 0) {
alert('你赢了！');
initGame();
}
});
}
initGame();
});这个游戏的实现包括了创建游戏区域和打地鼠的逻辑。每次点击鼠标，鼠标图标就会消失，如果所有鼠标都被打掉，会弹出警告框提示玩家赢得游戏，并重新初始化游戏。这个例子简单展示了如何使用jQuery来操作DOM元素，并添加事件监听器，实现游戏的交互功能。
评论已关闭