格子游戲是一種經典的小游戲，它通過展現一個網格狀的棋盤和若干個小方格，要求玩家在規定時間內將所有的小方格框起來。在JavaScript中，我們可以使用一些簡單的代碼來實現這個游戲。

在開始編寫JavaScript代碼之前，我們需要先構建一個網格狀的棋盤。以下是一個簡單的棋盤樣式：

1 2 3 4 5 6
a ? ? ? ? ? ?
b ? ? ? ? ? ?
c ? ? ? ? ? ?
d ? ? ? ? ? ?
e ? ? ? ? ? ?
f ? ? ? ? ? ?

我們可以通過如下代碼來生成以上效果：

const board = document.createElement("table");
const letters = ["a", "b", "c", "d", "e", "f"];
const numbers = ["1", "2", "3", "4", "5", "6"];
for (let i = 0; i < letters.length; i++) {
const row = document.createElement("tr");
for (let j = 0; j < numbers.length; j++) {
const cell = document.createElement("td");
cell.setAttribute("id", letters[i] + numbers[j]);
row.appendChild(cell);
}
board.appendChild(row);
}
document.body.appendChild(board);

以上代碼在JavaScript中創建一個table元素，根據letters數組和numbers數組創建所有的行和列，并且將它們添加到table元素中。在每個單元格的id屬性中使用a1,a2等等的組合是為了方便以后處理格子的位置。

接下來，讓我們創建一些小方格，并在頁面上顯示它們。以下是如何創建小方格的代碼：

const squares = ["a3", "a4", "b4", "c4", "c3", "c2", "d2", "e2", "e3", "e4", "f4", "f5"];
for (let i = 0; i < squares.length; i++) {
const square = document.getElementById(squares[i]);
square.classList.add("square");
}

以上代碼首先創建一個字符串數組，包含所有小方格的位置信息，然后根據這些信息獲取對應的單元格。在每個單元格中添加square類會自動應用某個CSS樣式，并設置其背景顏色等等。

最后，讓我們添加事件監聽器來處理玩家在哪里框起小方格。以下是實現代碼：

let squaresRemaining = squares.length;
function handleSquareClick() {
if (this.classList.contains("square")) {
this.classList.remove("square");
this.classList.add("checked");
squaresRemaining--;
} else if (this.classList.contains("checked")) {
this.classList.remove("checked");
this.classList.add("square");
squaresRemaining++;
}
if (squaresRemaining === 0) {
alert("Congratulations! You have won the game!");
}
}
const allCells = document.querySelectorAll("td");
for (let i = 0; i < allCells.length; i++) {
allCells[i].addEventListener("click", handleSquareClick);
}

以上代碼在每個單元格上添加一個點擊事件監聽器。當玩家點擊一個未選中的小方格時，將其類名更改為checked，并且squaresRemaining計數器減一。當玩家點擊一個已選中的小方格時，將其類名更改為square，并且squaresRemaining計數器加一。如果squaresRemaining計數器減為0，則游戲勝利！

以上就是一份簡單的JavaScript格子游戲代碼。學習和掌握以上代碼，可以幫助你更好的理解JavaScript編程思想和DOM操作。