jQuery制作一个简单的打地鼠游戏(超详细讲解)

作者：System 时间：2024年08月15日分类：所有,jquery 字数：1754

以下是一个使用jQuery简单实现打地鼠游戏的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠游戏</title>
<style>
    .board {
        width: 500px;
        height: 500px;
        position: relative;
        background: #eaeaea;
    }
    .tile {
        width: 100px;
        height: 100px;
        position: absolute;
        border: 1px solid #000;
        list-style: none;
    }
    .tile:hover {
        cursor: pointer;
        background: #f9f9f9;
    }
</style>
</head>
<body>
 
<div class="board" id="board"></div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="game.js"></script>
</body>
</html>

JavaScript部分 (game.js)：




$(document).ready(function() {
    const boardSize = 5; // 定义棋盘大小
    const tileCount = boardSize * boardSize; // 计算棋盘格子数量
    const mouseTile = null; // 记录鼠标点击的格子
 
    // 初始化棋盘
    function initBoard() {
        for (let i = 0; i < tileCount; i++) {
            const $tile = $('<li>').addClass('tile').attr('id', `tile-${i}`);
            $tile.css({
                top: `${i % boardSize * 100}px`,
                left: `${Math.floor(i / boardSize) * 100}px`
            });
            $tile.on('click', function() {
                if (mouseTile) {
                    $(`#${mouseTile}`).off('click');
                    mouseTile = null;
                } else {
                    mouseTile = $(this).attr('id');
                }
            });
            $('#board').append($tile);
        }
    }
 
    // 初始化游戏
    function initGame() {
        initBoard();
    }
 
    initGame();
});

这段代码实现了一个简单的打地鼠游戏的前端部分。它创建了一个5x5的棋盘，当玩家点击一个格子时，如果之前已经点击过另一个格子，那么这两个格子会被锁定不可再点击。这个示例仅展示了游戏的交互逻辑，没有包含游戏结束逻辑和计分功能。

jQuery制作一个简单的打地鼠游戏(超详细讲解)

评论已关闭

推荐阅读