使用 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] ];
