使用 HTML、CSS、JavaScript 创建一个简单的井字游戏(1)

使用 javascript 创建游戏是最有趣的学习方式。它会让你保持动力,这对于学习 Web 开发等复杂技能至关重要。此外,你可以和你的朋友一起玩,或者只是向他们展示你做的小东西,他们也会感到很有趣的。在今天的博文中,我们将使用 HTML、CSS 和 Javascript 创建一个井字游戏。


演示地址:http://haiyong.site/xxoo2

使用 HTML、CSS、JavaScript 创建一个简单的井字游戏(1)

实现 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]
];

上一篇:项目前期准备--MyBaitsPlus、MyBatisPlusGenerator和Spring Security(2)


下一篇:MQ-RabbitMq部署安装配置