| 演示地址 
实现 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]将代表第一条水平线被玩家占据的情况。我们将使用这个数组来决定我们是否有赢家。 /* 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]]; 现在我们将编写一些实用函数。在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');};接下来我们将编写这个项目中最有趣的部分之一
下载地址:
jQuery解决添加元素后不执行原有事件的方法
微信小程序通过uni-app进行全局分享 |
