使用 javascript 建立遊戲是最有趣的學習方式。它會讓你保持動力，這對于學習 Web 開發等複雜技能至關重要。此外，你可以和你的朋友一起玩，或者隻是向他們展示你做的小東西，他們也會感到很有趣的。在今天的博文中，我們将使用 HTML、CSS 和 Javascript 建立一個井字遊戲。
示範位址：
http://haiyong.site/xxoo2
實作 HTML
首先在 head 部分，我将包含我們稍後建立的 css 和 javascript 檔案。我還添加了名為 Itim 的 Google 字型。
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
<script src="index.js"></script> HTML 的主體将相當簡單。為了包裝所有東西，我将使用一個主标簽，并對其應用一個類background。在main包裝器内部，我們将有五個部分。
第一部分将隻包含我們的标題h1。
第二部分将顯示目前輪到誰。在顯示中，我們有一個包含X或O取決于目前使用者的跨度。我們将類應用于此跨度以對文本進行着色。
第三部分是拿着遊戲闆的部分。它有一個container類，是以我們可以正确放置瓷磚。在本節中，我們有 9 個 div，它們将充當闆内的瓷磚。
第四部分将負責公布最終比賽結果。預設情況下它是空的，我們将從 javascript 修改它的内容。
最後一部分将儲存我們的控件，其中包含一個重新開始按鈕。
<main class="background">
<section class="title">
<h1>井字遊戲</h1>
</section>
<section class="display">
玩家 <span class="display-player playerX">X</span> 的回合
</section>
<section class="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</section>
<section class="display announcer hide"></section>
<section class="controls">
<button id="reset">重新開始</button>
</section>
</main>
添加 CSS
我不會詳細介紹 CSS 的每一行，但你可以檢視源碼中的完整代碼。
首先，我将建立style.css檔案并删除任何浏覽器定義的邊距和填充，并為整個文檔設定我在 HTML 中包含的 Google 字型。
* {
padding: 0;
margin: 0;
font-family: 'Itim', cursive;
} 我們必須添加的下一件重要事情是我們的闆的樣式。我們将使用 CSS 網格來建立闆。我們可以通過為列和行提供 3 倍 33% 的空間将容器一分為二。我們将通過設定最大寬度和将容器居中margin: 0 auto;。
.container {
margin: 0 auto;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
max-width: 300px;
} 接下來，我們将添加闆内瓷磚的樣式。我們将應用一個小的白色邊框，并将最小寬度和高度設定為 100 像素。我們将利用Flexbox的和設定的中心内容justify-content 和 align-items到center。我們會給它一個大字型大小并應用，cursor: pointer這樣使用者就會知道這個字段是可點選的。
.tile {
border: 1px solid white;
min-width: 100px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
cursor: pointer;
} 我使用了兩種不同的顔色來更好地區分這兩個玩家。為此，我建立兩個實用程式類。玩家 X 的顔色為綠色，而玩家 O 的顔色為藍色。
.playerX {
color: #09C372;
}
.playerO {
color: #498AFB;
} 實作 Javascript 部分
由于我們将 javascript 檔案包含在<head>. 這是必需的，因為我們的腳本将在浏覽器解析 HTML 正文之前加載。如果你不想将所有内容都包含在此函數中，請随意添加defer到腳本标記中或将腳本标記移動到body.
window.addEventListener('DOMContentLoaded', () => {
}); 首先，我們将儲存對 DOM 節點的引用。我們将使用document.querySelectorAll(). 我們想要一個數組，但此函數傳回一個 NodeList，是以我們必須使用Array.from(). 我們還将擷取對播放器顯示、重置按鈕和播音員的引用。
const tiles = Array.from(document.querySelectorAll('.tile'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
const announcer = document.querySelector('.announcer'); 接下來，我們将添加控制遊戲所需的全局變量。我們将用一個包含九個空字元串的數組來初始化一個闆。這将儲存闆上每個圖塊的 X abd O 值。我們将有一個currentPlayer持有目前回合活躍的玩家的标志。該isGameActive變量将一直為真，直到有人獲勝或遊戲以平局結束。在這些情況下，我們會将其設定為 false，以便剩餘的圖塊在重置之前處于非活動狀态。我們有三個常數代表遊戲結束狀态。我們使用這些常量來避免拼寫錯誤。
let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
let isGameActive = true;
const PLAYERX_WON = 'PLAYERX_WON';
const PLAYERO_WON = 'PLAYERO_WON';
const TIE = 'TIE'; 在下一步中，我們将在棋盤上存儲所有獲勝的位置。在每個子數組中，我們将存儲可以赢得比賽的三個位置的索引。是以這[0, 1, 2]将代表第一條水準線被玩家占據的情況。我們将使用這個數組來決定我們是否有赢家。
/*
Indexes within the board
[0] [1] [2]
[3] [4] [5]
[6] [7] [8]
*/
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)