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();
});