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

简介: 使用 HTML、CSS、JavaScript 创建一个简单的井字游戏

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


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

3f1b9275684c4bd1bffe5461c69c6d68.png

实现 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]
];
目录
打赏
0
0
0
0
168
分享
相关文章
|
21天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
136 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
57 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
67 34
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
37 2
《HTML5 2D游戏编程核心技术》——第1章,第1.1节Snail Bait游戏
本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第1章,第1.1节,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。 第1章 概  述 令人激动的是,开发人员可以使用软件开发技术使屏幕上出现任何想象的场景。
2192 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等