永远输不了的五子棋

最新推荐文章于 2024-07-19 23:42:48 发布

程序猪666

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量30

点赞数

文章标签： html5 css javascript

本文链接：https://blog.csdn.net/weixin_47238423/article/details/134867487

版权

你永远输不了的五子棋

https://www.bilibili.com/video/BV1mw411e7qM/?spm_id_from=333.999.0.0&vd_source=efbd9f2a10893931c2f338f96867a1e9

https://v.douyin.com/i8d6yMFV

五子棋游戏的网页应用，使用 HTML、CSS 和 JavaScript 实现。以下是程序的主要部分的解释：

HTML 结构：
- <!DOCTYPE html>: 定义文档类型和版本。
- <html>: HTML 根元素。
- <head>: 包含文档的元信息和引用的外部资源。
  - <title>五子棋游戏</title>: 设置网页标题。
  - <style>: 包含内部样式表，定义页面的样式。
- <body>: 包含页面的实际内容。
CSS 样式：
- 定义了样式规则，其中包括 #board 和 .cell 等类。
- 使用 CSS Grid 布局创建了一个 15x15 的网格，表示游戏的棋盘。
- 棋盘格子的样式包括宽度、高度、背景颜色、边框等。
JavaScript 代码：
- 在 <script> 标签中包含了 JavaScript 代码。
- 创建了一个包含所有棋盘格子的数组 cells。
- 使用 handleCellClick 函数处理格子点击事件，根据当前玩家的选择在格子上显示对应的棋子，并检查是否胜利。
- computerMove 函数实现了简单的随机下棋逻辑，模拟了电脑的移动。
- checkWin 函数用于检查当前局面是否有玩家获胜。
- 提供了重新开始游戏和悔棋功能的按钮，分别由 resetButton 和 undoButton 表示。
游戏逻辑：
- 页面上有一个15x15的棋盘格子，玩家和电脑轮流进行下棋。
- 玩家通过点击格子进行下棋，电脑通过随机选择空白格子进行下棋。
- 游戏通过检查是否有五颗相同棋子连成一线来判断获胜。
- 提供了重新开始游戏和悔棋的功能。

这个程序实现了一个简单的五子棋游戏，玩家可以与电脑对战，通过点击棋盘格子来下棋。游戏判断胜负的标准是是否有五颗相同棋子连成一线。

https://v.douyin.com/i8d6yMFV

<!DOCTYPE html>
<html>
<head>
  <title>五子棋游戏</title>
  <style>
    #board {
      display: grid;
      grid-template-columns: repeat(15, 40px);
      grid-template-rows: repeat(15, 40px);
      gap: 2px;
    }

    .cell {
      width: 40px;
      height: 40px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="board"></div>
  <button id="reset">重新开始</button>
  <button id="undo">悔棋</button>

  <script>
    const board = document.getElementById("board");
    const resetButton = document.getElementById("reset");
    const undoButton = document.getElementById("undo");
    let currentPlayer = "X";
    const cells = [];
    let gameover = false;

    // 创建棋盘格子
    for (let row = 0; row < 15; row++) {
      for (let col = 0; col < 15; col++) {
        const cell = document.createElement("div");
        cell.className = "cell";
        cell.dataset.row = row;
        cell.dataset.col = col;
        cell.addEventListener("click", handleCellClick);
        board.appendChild(cell);
        cells.push(cell);
      }
    }

    // 处理格子点击事件
    function handleCellClick(event) {
      if (gameover) return;
      const cell = event.target;
      if (!cell.textContent) {
        cell.textContent = currentPlayer;
        cell.style.color = currentPlayer === "X" ? "blue" : "red";
        if (checkWin(cell)) {
          alert(currentPlayer + " 赢了！");
          gameover = true;
        } else {
          currentPlayer = currentPlayer === "X" ? "O" : "X";
          computerMove();
        }
      }
    }

    // 电脑随机下棋
    function computerMove() {
      if (gameover) return;
      const emptyCells = cells.filter(cell => !cell.textContent);
      if (emptyCells.length === 0) {
        alert("平局！");
        gameover = true;
        return;
      }
      const randomIndex = Math.floor(Math.random() * emptyCells.length);
      const computerCell = emptyCells[randomIndex];
      computerCell.textContent = currentPlayer;
      computerCell.style.color = currentPlayer === "X" ? "blue" : "red";
      if (checkWin(computerCell)) {
        alert(currentPlayer + " 赢了！");
        gameover = true;
      } else {
        currentPlayer = currentPlayer === "X" ? "O" : "X";
      }
    }

    // 检查是否胜利
    function checkWin(cell) {
      const row = parseInt(cell.dataset.row);
      const col = parseInt(cell.dataset.col);
      const directions = [
        [-1, 0],
        [1, 0],
        [0, -1],
        [0, 1],
        [-1, -1],
        [1, 1],
        [-1, 1],
        [1, -1],
      ];
      for (const [dr, dc] of directions) {
        let count = 1;
        for (let i = 1; i < 5; i++) {
          const newRow = row + i * dr;
          const newCol = col + i * dc;
          const neighborCell = cells.find(
            cell => parseInt(cell.dataset.row) === newRow && parseInt(cell.dataset.col) === newCol
          );
          if (neighborCell && neighborCell.textContent === currentPlayer) {
            count++;
          } else {
            break;
          }
        }
        for (let i = 1; i < 5; i++) {
          const newRow = row - i * dr;
          const newCol = col - i * dc;
          const neighborCell = cells.find(
            cell => parseInt(cell.dataset.row) === newRow && parseInt(cell.dataset.col) === newCol
          );
          if (neighborCell && neighborCell.textContent === currentPlayer) {
            count++;
          } else {
            break;
          }
        }
        if (count >= 5) {
          return true;
        }
      }
      return false;
    }

    // 重新开始游戏
    resetButton.addEventListener("click", () => {
      gameover = false;
      currentPlayer = "X";
      cells.forEach(cell => {
        cell.textContent = "";
        cell.style.color = "";
      });
    });

    // 悔棋
    undoButton.addEventListener("click", () => {
      if (gameover) return;
      const lastMove = cells.filter(cell => cell.textContent === currentPlayer).pop();
      if (lastMove) {
        lastMove.textContent = "";
        lastMove.style.color = "";
        currentPlayer = currentPlayer === "X" ? "O" : "X";
      }
    });
  </script>
</body>
</html>

程序猪666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
永远输不了的五子棋

这个程序实现了一个简单的五子棋游戏，玩家可以与电脑对战，通过点击棋盘格子来下棋。游戏判断胜负的标准是是否有五颗相同棋子连成一线。五子棋游戏的网页应用，使用 HTML、CSS 和 JavaScript 实现。你永远输不了的五子棋。
复制链接

扫一扫