Web实现井字棋游戏:JavaScript DOM基础与实例教程

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

在这里插入图片描述

Web实现井字棋游戏:JavaScript DOM基础与实例教程

井字棋(Tic-Tac-Toe)是一款经典的两人对战游戏,适合作为学习JavaScript DOM操作的实践项目。本文将通过一个简单的实例,介绍如何使用JavaScript和DOM API来实现一个井字棋游戏,并讲解相关的JavaScript DOM基础知识。

JavaScript DOM基础

DOM(Document Object Model)是HTML和XML文档的编程接口。在JavaScript中,DOM提供了一种结构化的方式来表示和操作网页内容。通过DOM,我们可以获取元素、修改样式、绑定事件等。

实例:井字棋游戏

实现效果

在这里插入图片描述
体验地址:
http://8.210.131.139/Tictactoe.html

创建HTML结构

首先,我们需要创建一个包含游戏板和结果显示的HTML结构。

<div class="board">
  <!-- 游戏格子 -->
  <div class="cell"></div>
  <!-- ... 其他格子 ... -->
</div>
<div id="result"></div>

编写JavaScript逻辑

初始化游戏

在JavaScript中,我们首先定义游戏板的状态、玩家当前回合以及游戏是否结束的状态。

const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;
事件绑定

为每个游戏格子绑定点击事件,以便在玩家点击时更新游戏状态。

const cells = document.querySelectorAll(".cell");
cells.forEach((cell, index) => {
  cell.addEventListener("click", () => updateGameState(index));
});
更新游戏状态

定义updateGameState函数来处理玩家的每一步操作,包括更新棋盘状态、检查胜利条件、切换玩家回合以及在适当的时候结束游戏。

// ... 更新棋盘逻辑 ...
    function updateGameState(cellIndex) {
      if (!gameEnded && board[cellIndex] === "") {
        board[cellIndex] = currentPlayer;
        renderBoard();
        if (checkWin(currentPlayer)) {
          endGame("Player " + currentPlayer + " wins!");
        } else if (checkDraw()) {
          endGame("It's a draw!");
        } else {
          currentPlayer = currentPlayer === "X" ? "O" : "X";
          if (currentPlayer === "O") {
            setTimeout(makeComputerMove, 500);
          }
        }
      }
    }
检查胜利条件和平局

在每一步操作后,使用checkWincheckDraw函数来检查是否有玩家获胜或游戏是否平局。

// ... 检查胜利逻辑 ...
    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 !== "");
    }
电脑AI移动

在玩家为"O"时,电脑AI需要进行自动移动。makeComputerMove函数负责实现这一逻辑。

// ... 电脑AI移动逻辑 ...
    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);
      }
    }
渲染棋盘

使用renderBoard函数将棋盘状态更新到页面上。

// ... 渲染棋盘逻辑 ...
    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();
    }

全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白😁井字棋游戏</title>

    <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>
  </head>

  <body>
    <div class="board">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <div id="result"></div>
  </body>

  <script>
    const 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("It's 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>

结语

通过上述步骤,我们实现了一个简单的井字棋游戏。这个实例展示了如何使用JavaScript DOM API来操作HTML元素,并响应用户事件。通过这个项目,你可以更好地理解DOM操作的基本概念和方法,以及如何在实际项目中应用它们。井字棋游戏是一个入门级的编程项目,适合初学者练习和提升编程技能。

如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀

🎉 往期精彩回顾

Web实现表格单选全选与反选操作:JavaScript DOM基础与实例教程

  • 688阅读 · 14点赞 · 7收藏

H5实现Web ECharts教程:轻松创建动态数据图表

  • 855阅读 · 16点赞 · 4收藏

浏览器DOM操作基础:禁用右键菜单与阻止文字选中

  • 878阅读 · 30点赞 · 18收藏

缤纷浏览器 —— 一键换肤,个性随心换(H5实现浏览器换肤效果)

  • 560阅读 · 9点赞 · 5收藏

广州5k前端面试题惊呆我!!!(内容太肝,谨慎入内)

  • 821阅读 · 27点赞 · 23收藏

计算机专业学生的成长之路:超越课堂的自我提升策略

  • 732阅读 · 30点赞 · 25收藏

Node.js快速入门:搭建基础Web服务器与实现CRUD及登录功能

  • 906阅读 · 31点赞 · 16收藏

Node.js核心命令与工具:提升开发效率的实用指南

  • 745阅读 · 11点赞 · 18收藏

爆肝五千字!ECMAScript核心概念与现代JavaScript特性全解析

  • 1299阅读 · 25点赞 · 30收藏

打造精美响应式CSS日历:从基础到高级样式

  • 1082阅读 · 14点赞 · 19收藏

Ubuntu系统下C语言开发环境搭建与使用教程

  • 1337阅读 · 35点赞 · 9收藏

Vue 3响应式系统详解:ref、toRefs、reactive及更多

  • 1193阅读 · 23点赞 · 14收藏

爆肝两千字!掌握CSS选择器与响应式设计:从基础到高级应用

  • 1061阅读 · 27点赞 · 28收藏
  • 29
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

洛可可白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值