扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >HTML+CSS+JavaScript创建一个简单的井字游戏
  • 908

0
分享到

HTML+CSS+JavaScript创建一个简单的井字游戏

2024-04-02 19:04:59 908人浏览 薄情痞子
摘要

目录实现 html添加 CSS实现 javascript 部分演示地址 实现 HTML 首先在 head 部分，我将包含我们稍后创建的 css 和 javascript 文件。我还

演示地址

实现 HTML

首先在 head 部分，我将包含我们稍后创建的 css 和 javascript 文件。我还添加了名为 Itim 的 Google 字体。


<link rel="stylesheet" href="style.css" rel="external nofollow" >
<link rel="preconnect" href="https://fonts.gstatic.com" rel="external nofollow" >
<link href="Https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="external nofollow"  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]将代表第一条水平线被玩家占据的情况。我们将使用这个数组来决定我们是否有赢家。




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

现在我们将编写一些实用函数。在isValidAction函数中，我们将决定用户是否想要执行有效的操作。如果 tile 的内部文本是XorO我们返回 false 作为操作无效，否则 tile 为空所以操作有效。


const isValidAction = (tile) => {
    if (tile.innerText === 'X' || tile.innerText === 'O'){
        return false;
    }

    return true;
};

下一个效用函数将非常简单。在这个函数中，我们将接收一个索引作为参数，并将棋盘数组中的相应元素设置为我们当前玩家的符号。


const updateBoard =  (index) => {
   board[index] = currentPlayer;
}

我们将编写一个小函数来处理玩家的变化。在这个函数中，我们将首先从playerDisplay. 字符串模板文字player${currentPlayer}将成为playerX或playerO取决于当前玩家。接下来，我们将使用三元表达式来更改当前玩家的值。如果是X，它将是O否则它将是X。现在，我们改变了我们用户的价值，我们需要更新innerText的playerDisplay，并应用新的播放器类的。


const changePlayer = () => {
    playerDisplay.classList.remove(`player${currentPlayer}`);
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    playerDisplay.innerText = currentPlayer;
    playerDisplay.classList.add(`player${currentPlayer}`);
}

现在我们将编写宣布最终游戏结果的 announer 函数。它将接收结束游戏类型并innerText根据结果更新播音员 DOM 节点的 。在最后一行中，我们必须删除隐藏类，因为播音员默认是隐藏的，直到游戏结束。


const announce = (type) => {
    switch(type){
       case PLAYERO_WON:
            announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
            break;
       case PLAYERX_WON:
            announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
            break;
       case TIE:
            announcer.innerText = 'Tie';
        }
    announcer.classList.remove('hide');
};

接下来我们将编写这个项目中最有趣的部分之一——结果评估。首先，我们将创建一个 roundWon 变量并将其初始化为 false。然后我们将遍历winConditions数组并检查棋盘上的每个获胜条件。例如，在第二次迭代中，我们将检查这些值：board3、board4、board5。

我们还将进行一些优化，如果任何字段为空，我们将调用continue并跳到下一次迭代，因为如果获胜条件中有空图块，您将无法获胜。如果所有字段都相等，那么我们就有一个赢家，因此我们将 roundWon 设置为 true 并中断 for 循环，因为任何进一步的迭代都会浪费计算。

在循环之后，我们将检查roundWon变量的值，如果为真，我们将宣布获胜者并将游戏设置为非活动状态。如果我们没有获胜者，我们将检查棋盘上是否有空牌，如果我们没有获胜者并且没有空牌，我们将宣布平局。


function handleResultValidation() {
  let roundWon = false;
  for (let i = 0; i <= 7; i++) {
    const winCondition = winningConditions[i];
    const a = board[winCondition[0]];
    const b = board[winCondition[1]];
    const c = board[winCondition[2]];
    if (a === "" || b === "" || c === "") {
      continue;
    }
    if (a === b && b === c) {
      roundWon = true;
      break;
    }
  }

  if (roundWon) {
    announce(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
    isGameActive = false;
    return;
  }

  if (!board.includes("")) announce(TIE);
}

接下来我们将处理用户的操作。此函数将接收一个 tile 和一个索引作为参数。当用户单击一个图块时，将调用此函数。首先我们需要检查它是否是一个有效的动作，我们还将检查游戏当前是否处于活动状态。如果两者都为真，我们innerText用当前玩家的符号更新瓷砖的 ，添加相应的类并更新板阵列。现在一切都更新了，我们必须检查游戏是否已经结束，所以我们调用handleResultValidation(). 最后，我们必须调用该changePlayer方法将轮次传递给另一个玩家。


const userAction = (tile, index) => {
  if (isValidAction(tile) && isGameActive) {
    tile.innerText = currentPlayer;
    tile.classList.add(`player${currentPlayer}`);
    updateBoard(index);
    handleResultValidation();
    changePlayer();
  }
};

为了让游戏正常运行，我们必须向磁贴添加事件侦听器。我们可以通过循环遍历图块数组并为每个图块添加一个事件侦听器来做到这一点。（为了获得更好的性能，我们只能向容器添加一个事件侦听器并使用事件冒泡来捕获父级上的磁贴点击，但我认为对于初学者来说这更容易理解。）


tiles.forEach( (tile, index) => {
    tile.addEventListener('click', () => userAction(tile, index));
});

我们只错过了一项功能：重置游戏。为此，我们将编写一个resetBoard函数。在此函数中，我们将棋盘设置X为由九个空字符串组成，将游戏设置为活动状态，移除播音员并将玩家更改回（根据定义X始终开始）。

我们必须做的最后一件事是遍历图块并将innerText 设置回空字符串，并从图块中删除任何特定于玩家的类。


const resetBoard = () => {
    board = ['', '', '', '', '', '', '', '', ''];
    isGameActive = true;
    announcer.classList.add('hide');

    if (currentPlayer === 'O') {
        changePlayer();
    }

    tiles.forEach(tile => {
        tile.innerText = '';
        tile.classList.remove('playerX');
        tile.classList.remove('playerO');
    });
}

现在我们只需要将此函数注册为重置按钮的点击事件处理程序。


resetButton.addEventListener('click', resetBoard);

就是这样，我们有一个功能齐全的井字游戏，你可以和你的朋友一起玩，玩得开心。

以上就是HTML+CSS+JavaScript创建一个简单的井字游戏的详细内容，更多关于HTML+CSS+JavaScript的资料请关注编程网其它相关文章！

--结束END--

本文标题: HTML+CSS+JavaScript创建一个简单的井字游戏

本文链接: https://lsjlt.com/news/158011.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • HTML+CSS+JavaScript创建一个简单的井字游戏
    目录实现 HTML添加 CSS实现 Javascript 部分演示地址 实现 HTML 首先在 head 部分，我将包含我们稍后创建的 css 和 javascript 文件。我还...
    99+
    2024-04-02
  • HTML+CSS+JavaScript怎么创建井字游戏
    本篇内容介绍了“HTML+CSS+JavaScript怎么创建井字游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！实现 HTML首先在 h...
    99+
    2023-06-25
  • python实现简单的井字棋小游戏
    Python做三子棋游戏，这个是我刚开始了解做Python小游戏的时候第一个项目，因为简单好入手，实现它的过程是我开始摸索Python的GUI界面的入门之路。这个设计也都是按照自己对...
    99+
    2024-04-02
  • C语言实现简单的井字棋游戏
    本文实例为大家分享了C语言实现简单井字棋游戏的具体代码，供大家参考，具体内容如下 1.什么是井字棋 井字棋相信大部分人都玩过 规则：双方轮流放子，当某一方的三个子连成一线（行，列，对...
    99+
    2024-04-02
  • 基于Python制作简单的井字棋游戏
    目录前言基本框架定义button功能实现效果前言 五一放假了，今天还要继续内卷。我们今天来给大家写一个小游戏，无聊的时候可以玩一玩摸摸鱼。 基本框架 from tkinter imp...
    99+
    2023-05-18
    Python实现井字棋游戏 Python实现井字棋 Python井字棋
  • python怎么实现简单的井字棋小游戏
    这篇文章主要讲解了“python怎么实现简单的井字棋小游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“python怎么实现简单的井字棋小游戏”吧！窗口万能的窗口，实现窗口都可以进行简单的修...
    99+
    2023-06-30
  • JavaScript实现一个简单的圣诞游戏
    目录前言实现效果代码CSS代码JS代码html代码演示流程前言 圣诞节快来了，热榜都被一堆圣诞树攻占了，这样的流量密码我怎么会错过，大家都发圣诞树，我就不发啦，直接分享一个圣诞小游...
    99+
    2024-04-02
  • 基于Python怎么制作简单的井字棋游戏
    基本框架from tkinter import * import tkinter.messagebox as msg root = Tk() root.title('井字棋') # labels L...
    99+
    2023-05-19
    Python
  • 怎样用JavaScript编写一个简单的游戏
    这篇文章将为大家详细讲解有关怎样用JavaScript编写一个简单的游戏，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。通过使用一个简单的游戏来练习一些基本的...
    99+
    2024-04-02
  • 如何使用JavaScript创建一个简单的项目
    JavaScript 是一种非常有用的编程语言，它被广泛应用于 web 开发、构建单页应用等领域。因此，了解如何使用 JavaScript 创建项目，是每个 web 开发者都需要掌握的基础技能。在本文中，我们将介绍如何使用 JavaScri...
    99+
    2023-05-14
  • 如何借助HTML5CanvasAPI制作一个简单的猜字游戏
    本篇文章为大家展示了如何借助HTML5CanvasAPI制作一个简单的猜字游戏，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。二话不说，先上效果图以及源代码~HTML...
    99+
    2024-04-02
  • 怎么用Python开发一个简单的猜数字游戏
    本篇文章给大家分享的是有关怎么用Python开发一个简单的猜数字游戏，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。如何使用Python制作一个简单的猜数字游戏。游戏规则玩家将猜...
    99+
    2023-06-16
  • 一文教你用JavaScript制作个简单的大转盘游戏
    目录背景一、开始前的准备二、画出大转盘三、把奖励放上去四、让大转盘滚起来个人总结背景 日常生活中，我们经常会见到形形色色的抽奖活动，例如九宫格、大转盘等等…&helli...
    99+
    2023-02-01
    JavaScript实现大转盘游戏 JavaScript大转盘游戏 JavaScript转盘
  • 怎么用HTML5的Canvas API制作一个简单猜字游戏
    本文小编为大家详细介绍“怎么用HTML5的Canvas API制作一个简单猜字游戏”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用HTML5的Canvas API制作一个简单猜字游戏”文章能帮助大家解...
    99+
    2024-04-02
  • 怎么用Python编写一个简单的游戏
    本篇内容介绍了“怎么用Python编写一个简单的游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在这个系列中，我们要用不同的编程语言编写相...
    99+
    2023-06-15
  • Android简单创建一个Activity的方法
    本文实例讲述了Android简单创建一个Activity的方法。分享给大家供大家参考，具体如下： 1) 创建一个android项目 填写项目信息 2) 创建一个新Activi...
    99+
    2022-06-06
    方法 activity Android
  • 如何用Python编程构建一个简单的掷骰子游戏
    这篇文章主要介绍“如何用Python编程构建一个简单的掷骰子游戏”，在日常操作中，相信很多人在如何用Python编程构建一个简单的掷骰子游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用Python编程...
    99+
    2023-06-15
  • 用React Native制作一个简单的游戏引擎
    目录简介开始吧对React Native游戏引擎的简单介绍让我们在React Native中建立一个蛇形游戏创建游戏实体游戏逻辑移动蛇头"游戏结束！"条件食用食物控制蛇尾巴功能结语简...
    99+
    2024-04-02
  • Vue+TailWindcss实现一个简单的闯关小游戏
    目录游戏介绍实现技术本游特色技术实现初始化页面小方块设置主角移动自动索敌敌人移动胜利与失败编辑关卡移入移出变色点击设置保存关卡游戏介绍 这是一款2d益智闯关游戏，玩家须躲避敌人与陷...
    99+
    2024-04-02
  • 如何学识Rust编写一个简单的游戏
    这篇文章主要讲解了“ 如何学识Rust编写一个简单的游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“ 如何学识Rust编写一个简单的游戏”吧！安装 Rust你可以使用 Rustup 安装一...
    99+
    2023-06-15
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作