五子棋html

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>五子棋游戏</title>
<style>
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f0d9b5;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
  }
  h1 {
    margin-bottom: 10px;
  }
  #board {
    display: grid;
    grid-template-columns: repeat(15, 30px);
    grid-template-rows: repeat(15, 30px);
    gap: 1px;
    background-color: #333;
    border: 2px solid #333;
  }
  .cell {
    width: 30px;
    height: 30px;
    background-color: #f0d9b5;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
  }
  .cell:hover {
    background-color: #e0cfa3;
  }
  .stone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .black {
    background-color: black;
  }
  .white {
    background-color: white;
    border: 1px solid black;
  }
  #scoreboard {
    margin-top: 20px;
    font-size: 18px;
  }
  #resetBtn {
    margin-top: 15px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
</head>
<body>
  <h1>五子棋游戏</h1>
  <div id="board"></div>
  <div id="scoreboard">
    黑方胜利次数: <span id="blackWins">0</span> &nbsp;&nbsp; 白方胜利次数: <span id="whiteWins">0</span>
  </div>
  <button id="resetBtn">重新开始</button>

  <script>
    const boardSize = 15;
    const board = document.getElementById('board');
    const blackWinsSpan = document.getElementById('blackWins');
    const whiteWinsSpan = document.getElementById('whiteWins');
    const resetBtn = document.getElementById('resetBtn');

    let currentPlayer = 'black';
    let boardState = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));
    let blackWins = 0;
    let whiteWins = 0;
    let gameOver = false;

    function createBoard() {
      board.innerHTML = '';
      for (let row = 0; row < boardSize; row++) {
        for (let col = 0; col < boardSize; col++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.dataset.row = row;
          cell.dataset.col = col;
          cell.addEventListener('click', onCellClick);
          board.appendChild(cell);
        }
      }
    }

    function onCellClick(e) {
      if (gameOver) return;
      const row = parseInt(e.target.dataset.row);
      const col = parseInt(e.target.dataset.col);
      if (boardState[row][col] !== null) return;

      boardState[row][col] = currentPlayer;
      const stone = document.createElement('div');
      stone.classList.add('stone', currentPlayer);
      e.target.appendChild(stone);

      if (checkWin(row, col, currentPlayer)) {
        gameOver = true;
        if (currentPlayer === 'black') {
          blackWins++;
          blackWinsSpan.textContent = blackWins;
          setTimeout(() => alert('黑方获胜!'), 0);
        } else {
          whiteWins++;
          whiteWinsSpan.textContent = whiteWins;
          setTimeout(() => alert('白方获胜!'), 0);
        }
        return;
      }

      currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
    }

    function checkWin(row, col, player) {
      return (
        checkDirection(row, col, player, 1, 0) || // 横向
        checkDirection(row, col, player, 0, 1) || // 纵向
        checkDirection(row, col, player, 1, 1) || // 斜向 \
        checkDirection(row, col, player, 1, -1)   // 斜向 /
      );
    }

    function checkDirection(row, col, player, deltaRow, deltaCol) {
      let count = 1;
      // 向一个方向计数
      let r = row + deltaRow;
      let c = col + deltaCol;
      while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && boardState[r][c] === player) {
        count++;
        r += deltaRow;
        c += deltaCol;
      }
      // 向相反方向计数
      r = row - deltaRow;
      c = col - deltaCol;
      while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && boardState[r][c] === player) {
        count++;
        r -= deltaRow;
        c -= deltaCol;
      }
      return count >= 5;
    }

    resetBtn.addEventListener('click', () => {
      gameOver = false;
      boardState = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));
      currentPlayer = 'black';
      createBoard();
    });

    createBoard();
  </script>
</body>
</html>
相关推荐
( ̄(工) ̄)霸天下13 分钟前
Typescript速通教程
前端·javascript·typescript
求知若渴,虚心若愚。4 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj5 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~5 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟6 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
若梦plus8 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉8 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A8 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6668 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus8 小时前
React之react-dom中的dom-server与dom-client
前端·react.js