在线创建网站免费网站,网站备案期间怎么做,如何做网络平台,制作网页网站哪个好用The sand accumulates to form a pagoda ✨ 写在前面✨ 功能介绍✨ 页面搭建✨ 样式设置✨ 逻辑部分 ✨ 写在前面
上周我们实通过前端基础实现了飞机大战游戏#xff0c;今天还是继续按照我们原定的节奏来带领大家完成一个井字游戏游戏#xff0c;功能也比较简单简单#x… The sand accumulates to form a pagoda ✨ 写在前面✨ 功能介绍✨ 页面搭建✨ 样式设置✨ 逻辑部分 ✨ 写在前面
上周我们实通过前端基础实现了飞机大战游戏今天还是继续按照我们原定的节奏来带领大家完成一个井字游戏游戏功能也比较简单简单也是想借助这样一个简单的功能然后来帮助大家了解我们JavaScript在前端中的作用 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏纯前端语言实现都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。订阅链接https://blog.csdn.net/jhxl_/category_12261013.html ✨ 功能介绍 井字游戏是一款经典的策略性棋盘游戏也被称为井字棋或三子棋。游戏通过在3x3的棋盘上轮流落子目标是将自己的棋子以横、竖或对角线的形式连成一条线先达成连线的一方获胜。这款游戏简单易学但需要一定的思考和策略是一款适合所有年龄段的休闲游戏。
游戏开始时棋盘上显示一个3x3的网格玩家扮演的是X棋子计算机扮演的是O棋子。玩家和计算机轮流落子每个回合可以在空白的格子中放置自己的棋子。玩家通过点击空白格子来放置X棋子计算机会自动进行下棋。当任意一方的棋子以横、竖或对角线的形式连成一条线时该方获得胜利。如果棋盘填满且没有任何一方获胜则游戏为平局。挑战计算机思考最佳策略争取在井字游戏中获得胜利吧 ✨ 页面搭建 创建文件
首先呢我们创建我们的HTML文件这里我就直接命名为 井字游戏.html 了大家可以随意命名 文件创建生成后我们通过编辑器打开这里我用的是VScode 然后初始化我们的代码结构那在这里告诉大家一个快捷键就是我们敲上我们英文的一个 ! 我们敲击回车直接就会给我们生成基础版本的前端代码结构。 文档声明和编码设置 在HTML文档的头部使用!DOCTYPE声明HTML文档类型确保浏览器以正确的方式渲染网页内容。同时设置UTF-8编码以确保浏览器能够正确地解析和显示中文字符。下面我就开始搭建我们的DOM结构了 DOM结构搭建
这段HTML代码表示一个井字游戏的棋盘。让我为来看下每部分的含义吧div classboard这是游戏的棋盘容器表示整个游戏区域。 div classcell这是每个格子用于放置玩家和计算机的棋子。这里共有9个格子按照3x3的形式排列代表了井字游戏的九个位置。div idresult/div这是用于显示游戏结果的区域初始时是空的。
在这个HTML结构中通过使用CSS样式和JavaScript代码可以实现井字游戏的显示、交互和结果展示。玩家可以点击格子在空白的位置放置自己的棋子然后计算机会根据规则进行下一步的落子最终判断是否有玩家获胜或者平局。当然我们写上下面代码打开页面也是空白的因为我们虽然写了标签但是标签里面没有任何内容
div classboarddiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/div
/div
div idresult/div ✨ 样式设置
我们看到了上面的的DOM已经搭建好了但是页面什么都看不出来下面我们简单的来配置一下样式吧其实我们本专栏也是想带领大家掌握一些逻辑所以样式方面我们就一切从简
这段样式代码定义了游戏界面的外观和布局。让我为小白逐个解释每个样式的含义
.board这是一个类选择器用于选择游戏棋盘的容器元素。
display: grid;设置元素的布局方式为网格布局。grid-template-columns: repeat(3, 1fr);定义了网格的列数为 3每列的宽度平均分配。grid-template-rows: repeat(3, 1fr);定义了网格的行数为 3每行的高度平均分配。gap: 5px;设置了网格之间的间隔为 5px。width: 300px;设置了容器的宽度为 300px。height: 300px;设置了容器的高度为 300px。margin: 0 auto;使容器在水平方向上居中对齐。border: 1px solid #ccc;设置容器的边框为 1px 的实线边框颜色为 #ccc。padding: 5px;设置容器的内边距为 5px。
.cell这是一个类选择器用于选择游戏棋盘中的每个单元格元素。
display: flex;设置元素的布局方式为弹性布局。align-items: center;在交叉轴上居中对齐元素内容。justify-content: center;在主轴上居中对齐元素内容。font-size: 24px;设置字体大小为 24px。font-weight: bold;设置字体加粗。background-color: #f2f2f2;设置背景颜色为 #f2f2f2即浅灰色。cursor: pointer;将鼠标光标设置为手型指示器表示单元格可以点击。
#result这是一个 ID 选择器用于选择游戏结果信息的元素。
text-align: center;将文本内容居中对齐。font-size: 24px;设置字体大小为 24px。margin-top: 20px;设置顶部外边距为 20px用于与上方元素保持一定的间距。
这些样式定义了游戏界面的布局、单元格的样式和游戏结果信息的样式使界面看起来更加整齐、美观并提供了互动性和可点击性。
style.board {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap: 5px;width: 300px;height: 300px;margin: 0 auto;border: 1px solid #ccc;padding: 5px;}.cell {display: flex;align-items: center;justify-content: center;font-size: 24px;font-weight: bold;background-color: #f2f2f2;cursor: pointer;}#result {text-align: center;font-size: 24px;margin-top: 20px;}
/style✨ 逻辑部分
上面我们搭建了基本的样式下面呢我们就通过js代码实现我们游戏的功能吧首先我们定义了一些变量来使用
const board表示游戏棋盘的状态数组存储每个格子的标记。const cells存储所有格子的元素用于操作和监听每个格子。const resultElement用于显示游戏结果的元素。let currentPlayer表示当前玩家的标记初始为 “X”。let gameEnded表示游戏是否结束的标志初始为 false。
const board [, , , , , , , , ];
const cells document.querySelectorAll(.cell);
const resultElement document.getElementById(result);
let currentPlayer X;
let gameEnded false;同时我们编写了一些函数下面就是每个函数的大致作用
updateGameState(cellIndex)更新游戏状态处理玩家的移动。checkWin(player)检查玩家是否获胜。checkDraw()检查游戏是否平局。endGame(message)结束游戏显示最终结果。makeComputerMove()模拟电脑进行移动。renderBoard()渲染棋盘状态。resetGame()重置游戏为初始状态。
最后通过监听格子的点击事件调用 updateGameState 函数处理玩家的移动并在页面加载完成后调用 resetGame 函数初始化游戏。
scriptfunction updateGameState(cellIndex) {if (!gameEnded board[cellIndex] ) {board[cellIndex] currentPlayer;renderBoard();if (checkWin(currentPlayer)) {endGame(Player currentPlayer wins!);} else if (checkDraw()) {endGame(Its a draw!);} else {currentPlayer currentPlayer X ? O : X;if (currentPlayer O) {setTimeout(makeComputerMove, 500);}}}}function checkWin(player) {const winningCombinations [[0, 1, 2],[3, 4, 5],[6, 7, 8],[0, 3, 6],[1, 4, 7],[2, 5, 8],[0, 4, 8],[2, 4, 6]];for (let i 0; i winningCombinations.length; i) {const [a, b, c] winningCombinations[i];if (board[a] player board[b] player board[c] player) {return true;}}return false;}function checkDraw() {return board.every(cell cell ! );}function endGame(message) {gameEnded true;resultElement.textContent message;}function makeComputerMove() {const emptyCells board.reduce((acc, cell, index) {if (cell ) {acc.push(index);}return acc}, []);if (emptyCells.length 0) {const randomIndex Math.floor(Math.random() * emptyCells.length);const computerMove emptyCells[randomIndex];updateGameState(computerMove);}}function renderBoard() {for (let i 0; i cells.length; i) {cells[i].textContent board[i];}}function resetGame() {board.fill();currentPlayer X;gameEnded false;resultElement.textContent ;renderBoard();}cells.forEach((cell, index) {cell.addEventListener(click, () updateGameState(index));});resetGame();
/script完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.board {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap: 5px;width: 300px;height: 300px;margin: 0 auto;border: 1px solid #ccc;padding: 5px;}.cell {display: flex;align-items: center;justify-content: center;font-size: 24px;font-weight: bold;background-color: #f2f2f2;cursor: pointer;}#result {text-align: center;font-size: 24px;margin-top: 20px;}/style
/headbodydiv classboarddiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/divdiv classcell/div/divdiv idresult/div
/bodyscriptconst board [, , , , , , , , ];const cells document.querySelectorAll(.cell);const resultElement document.getElementById(result);let currentPlayer X;let gameEnded false;function updateGameState(cellIndex) {if (!gameEnded board[cellIndex] ) {board[cellIndex] currentPlayer;renderBoard();if (checkWin(currentPlayer)) {endGame(Player currentPlayer wins!);} else if (checkDraw()) {endGame(Its a draw!);} else {currentPlayer currentPlayer X ? O : X;if (currentPlayer O) {setTimeout(makeComputerMove, 500);}}}}function checkWin(player) {const winningCombinations [[0, 1, 2],[3, 4, 5],[6, 7, 8],[0, 3, 6],[1, 4, 7],[2, 5, 8],[0, 4, 8],[2, 4, 6]];for (let i 0; i winningCombinations.length; i) {const [a, b, c] winningCombinations[i];if (board[a] player board[b] player board[c] player) {return true;}}return false;}function checkDraw() {return board.every(cell cell ! );}function endGame(message) {gameEnded true;resultElement.textContent message;}function makeComputerMove() {const emptyCells board.reduce((acc, cell, index) {if (cell ) {acc.push(index);}return acc}, []);if (emptyCells.length 0) {const randomIndex Math.floor(Math.random() * emptyCells.length);const computerMove emptyCells[randomIndex];updateGameState(computerMove);}}function renderBoard() {for (let i 0; i cells.length; i) {cells[i].textContent board[i];}}function resetGame() {board.fill();currentPlayer X;gameEnded false;resultElement.textContent ;renderBoard();}cells.forEach((cell, index) {cell.addEventListener(click, () updateGameState(index));});resetGame();
/script/html本期推荐 点击此处购买 ✨ 原创不易还希望各位大佬支持一下 \textcolor{blue}{原创不易还希望各位大佬支持一下} 原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 \textcolor{green}{点赞你的认可是我创作的动力} 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 \textcolor{green}{收藏你的青睐是我努力的方向} 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富 \textcolor{green}{评论你的意见是我进步的财富} 评论你的意见是我进步的财富
