使用 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=)