JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】

$(document).ready(function() {
    var game = {
        boardSize: 16,
        numbers: [],
        intervalTime: 300,
        // 初始化游戏
        initGame: function() {
            this.buildBoard();
            this.bindEvents();
        },
        // 构建游戏区域
        buildBoard: function() {
            var board = $("<div></div>").addClass("board").appendTo("body");
            for (var i = 0; i < this.boardSize; i++) {
                var row = $("<div></div>").addClass("row").appendTo(board);
                for (var j = 0; j < this.boardSize; j++) {
                    $("<div></div>").addClass("cell").appendTo(row);
                }
            }
        },
        // 绑定事件
        bindEvents: function() {
            var self = this;
            $(".cell").on("click", function() {
                var index = self.numbers.length;
                if (index === self.boardSize * self.boardSize && 
                    confirm("You win! Start new game?")) {
                    self.initGame();
                    return;
                }
                var $this = $(this);
                if ($this.data("visited") !== true) {
                    $this.text(index + 1).data("visited", true);
                    self.numbers[index] = { i: $this.index(), j: $this.parent().index() };
                    if (index === self.boardSize * self.boardSize - 1) {
                        setTimeout(function() {
                            alert("You lose!");
                            self.initGame();
                        }, self.intervalTime);
                    }
                }
            });
        }
    };
    game.initGame();
});

这段代码实现了打地鼠游戏的初始化，构建游戏区域，并绑定了点击事件。它使用jQuery来简化DOM操作，并且使用闭包来保持game对象的状态。游戏逻辑包括记录点击的单元格，如果点击的单元格已经被访问过，则不做任何反应。当所有单元格都被点击过，且用户确认重新开始，游戏会重置。如果在规定时间内未能点击所有单元格，则用户会失败，并可以选择重新开始游戏。