react井字棋的逻辑

最新推荐文章于 2024-10-28 15:18:39 发布
最新推荐文章于 2024-10-28 15:18:39 发布
阅读量638 收藏
点赞数
分类专栏： 前端(HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liulang68/article/details/121556118
版权

前端 react.js javascript

井字棋的逻辑

页面会渲染一次

成功以后不在页面输出内容，那么就要加一个方法，每次点击按钮的时候调用该方法
然后判断页面是否成功(这个方法要把所有成功的数组列举出来，然后进行判断我点击操作的索引值是否和成功案例的数组是否对应)，如果成功返回一个成功的一方的标识。
然后成功以后我点击返回的总是成功一方的标识，我让它的状态是不变的。

但是每次点击都还是会触发代码进行判断。只是返回的状态没有修改所以没有添加内容。

每次页面的重新渲染都是通过点击事件改变states来进行操作的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <style>
      body {
        font: 14px "Century Gothic", Futura, sans-serif;
        margin: 20px;
      }

      ol,
      ul {
        padding-left: 30px;
      }

      .board-row:after {
        clear: both;
        content: "";
        display: table;
      }

      .status {
        margin-bottom: 10px;
      }

      .square {
        background: red;
        border: 1px solid #999;
        float: left;
        font-size: 24px;
        font-weight: bold;
        line-height: 34px;
        height: 34px;
        margin-right: -1px;
        margin-top: -1px;
        padding: 0;
        text-align: center;
        width: 34px;
      }

      .square:focus {
        outline: none;
      }

      .kbd-navigation .square:focus {
        background: #ddd;
      }

      .game {
        display: flex;
        flex-direction: row;
      }

      .game-info {
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      function Square(props) {
        // console.log("haha");
        return (
          <button className="square" onClick={props.onClick}>
            {props.value}
          </button>
        );
      }

      class Board extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,
          };
        }

        handleClick(i) {
          //   console.log("heihei");
          console.log(i);
          const squares = this.state.squares.slice();
          squares[i] = this.state.xIsNext ? "X" : "O";
          this.setState({
            squares: squares,
            xIsNext: !this.state.xIsNext,
          });
        }

        renderSquare(i) {
          return (
            <Square
              value={this.state.squares[i]}
              onClick={() => this.handleClick(i)}
            />
          );
        }

        render() {
          const status = "Next player: " + (this.state.xIsNext ? "X" : "O");

          return (
            <div>
              <div className="status">{status}</div>
              <div className="board-row">
                <Square
                  onClick={() => this.handleClick(0)}
                  value={this.state.squares[0]}
                />
                <Square
                  onClick={() => this.handleClick(1)}
                  value={this.state.squares[1]}
                />
                <Square onClick={() => this.handleClick(2)} />
              </div>
              <div className="board-row">
                {this.renderSquare(3)}
                {this.renderSquare(4)}
                {this.renderSquare(5)}
              </div>
              <div className="board-row">
                {this.renderSquare(6)}
                {this.renderSquare(7)}
                {this.renderSquare(8)}
              </div>
            </div>
          );
        }
      }

      class Game extends React.Component {
        render() {
          return (
            <div className="game">
              <div className="game-board">
                <Board />
              </div>
              <div className="game-info">
                <div>{/* status */}</div>
                <ol>{/* TODO */}</ol>
              </div>
            </div>
          );
        }
      }

      // ========================================

      ReactDOM.render(<Game />, document.getElementById("root"));
    </script>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <style>
      body {
        font: 14px "Century Gothic", Futura, sans-serif;
        margin: 20px;
      }

      ol,
      ul {
        padding-left: 30px;
      }

      .board-row:after {
        clear: both;
        content: "";
        display: table;
      }

      .status {
        margin-bottom: 10px;
      }

      .square {
        background: red;
        border: 1px solid #999;
        float: left;
        font-size: 24px;
        font-weight: bold;
        line-height: 34px;
        height: 34px;
        margin-right: -1px;
        margin-top: -1px;
        padding: 0;
        text-align: center;
        width: 34px;
      }

      .square:focus {
        outline: none;
      }

      .kbd-navigation .square:focus {
        background: #ddd;
      }

      .game {
        display: flex;
        flex-direction: row;
      }

      .game-info {
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      function Square(props) {
        return (
          <button className="square" onClick={props.onClick}>
            {props.value}
          </button>
        );
      }

      class Board extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,
          };
        }

        handleClick(i) {
          const squares = this.state.squares.slice();
          if (calculateWinner(squares) || squares[i]) {
            return;
          }
          squares[i] = this.state.xIsNext ? "X" : "O";
          this.setState({
            squares: squares,
            xIsNext: !this.state.xIsNext,
          });
        }

        renderSquare(i) {
          return (
            <Square
              value={this.state.squares[i]}
              onClick={() => this.handleClick(i)}
            />
          );
        }

        render() {
          const winner = calculateWinner(this.state.squares);
          //   console.log(winner);
          let status;
          if (winner) {
            status = "Winner: " + winner;
          } else {
            status = "Next player: " + (this.state.xIsNext ? "X" : "O");
          }

          return (
            <div>
              <div className="status">{status}</div>
              <div className="board-row">
                {this.renderSquare(0)}
                {this.renderSquare(1)}
                {this.renderSquare(2)}
              </div>
              <div className="board-row">
                {this.renderSquare(3)}
                {this.renderSquare(4)}
                {this.renderSquare(5)}
              </div>
              <div className="board-row">
                {this.renderSquare(6)}
                {this.renderSquare(7)}
                {this.renderSquare(8)}
              </div>
            </div>
          );
        }
      }

      class Game extends React.Component {
        render() {
          return (
            <div className="game">
              <div className="game-board">
                <Board />
              </div>
              <div className="game-info">
                <div>{/* status */}</div>
                <ol>{/* TODO */}</ol>
              </div>
            </div>
          );
        }
      }

      // ========================================

      ReactDOM.render(<Game />, document.getElementById("root"));

      function calculateWinner(squares) {
        // console.log(squares);
        const lines = [
          [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 < lines.length; i++) {
          const [a, b, c] = lines[i];
          console.log("haha");
          if (
            squares[a] &&
            squares[a] === squares[b] &&
            squares[a] === squares[c]
          ) {
            // 赢了的时候才会进入这个方法
            console.log("haha");
            return squares[a];
          }
        }
        return null;
      }
    </script>
  </body>
</html>

在这里插入图片描述
在这里插入图片描述

前端交互仔
关注
专栏目录
React井字棋教程进阶完整版（附完整源代码）
weixin_45143527的博客
01-17 674
React教程中的井字棋，包含教程中提及的进阶功能实现，以及部分功能详解。
tic-tac-toe:React 教程中的 井字棋
04-09
tic-tac-toe 井字棋 练习 安装 npm i 运行 npm start
React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>
Beijiyang
11-04 1385
介绍什么是 React， 如何开始编写， 怎么通过 Props 传数据， 什么是交互式组件， 有什么好用的开发者工具。 React 用于构建用户界面，它是一种声明式的，高效灵活的 JavaScript 库。
React 实现井字棋游戏 (tic-tac-toe) 教程 (3) <译自官方文档>
Beijiyang
11-05 1142
状态提升至此，我们已经拥有了编写井字棋游戏的基本构件。但现在，状态（state）是被包裹在各个 Square 组件内的。为了完成这个游戏，我们还需要做这两件事：检查是否已经有玩家胜出；以及在小方格中轮流填入“X”和“O”
React入门教程之井字棋(三)——游戏完善
hhhcbw的博客，欢迎各位来访
02-23 503
我们现在已经编写好了井字棋游戏中，最基础的可以落子的棋盘。为了开发一个完整的游戏，我们还需要交替在棋盘上放置 “X” 和 “O”，并且判断出胜者。 状态提升 当前，每个 Square 组件都维护了游戏的状态。我们可以把所有 9 个 Square 的值放在一个地方，这样我们就可以判断出胜者了。 你可能会想，我们也可以在棋盘 Board 组件中收集每个格子 Square 组件中的 state。虽然技术上来讲是可以实现的，但是代码如此编写会让人很难理解，并且我们以后想要维护重构时也会非常困难。所以，最好的解.
初次学习react
mengweizhao的博客
09-12 171
初次学习react 我们有两种方法来写一个简单的react代码 我们可以不需要配置任何环境以及安装任何包，我们通过在html代码中添加react包，react-dom以及babel包的网址来实现一个简单的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <...
前端框架 使用React 开发一个井字棋（2）React.Component组件介绍
01-08
这样，我们就实现了井字棋游戏的方格组件交互，通过`React.Component`的使用和`Props`、`State`的管理，构建了一个可以响应用户操作的界面。这个例子展示了React在前端开发中的强大功能，以及如何通过组件化和状态...
React井字棋游戏实战：快速入门教程
文件名称"react-tic-tac-toe"表明这是一个与React井字棋相关的项目，通常包含了如下几个主要文件： - App.js：根组件文件，负责初始化整个游戏应用。 - Board.js：棋盘组件文件，负责渲染棋盘格子和处理玩家的落子...
react开发的井字棋游戏.zip
04-19
在本项目中，"react开发的井字棋游戏.zip"是一个使用React JavaScript库构建的井字棋(Tic-Tac-Toe)游戏。React是Facebook推出的一款用于构建用户界面的前端库，尤其适合开发单页应用(SPA)。下面将详细探讨这个项目中...
ReactTacToe:一个使用 react 构建的井字棋棋盘游戏版本
07-06
ReactTacToe是一个基于React.js开发的井字棋游戏。React是Facebook推出的JavaScript库，用于构建用户界面，尤其适合构建单页应用（SPA）。这个项目展示了如何利用React的组件化思想来设计和实现一个互动的游戏应用。...
react 加粗_react井字棋小游戏实现及优化
weixin_29046611的博客
01-07 160
react井字棋小游戏实现及优化主要参考：官方文档本文章主要是在官方示例的基础上，做了一些优化，并且完成了官方文档最后的改进要求。下面是我的代码。index.js:import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function Square(props) { //想写的组件...
React 开发一个井字棋（tic-tac-toe）后续改进功能
一只爱吃糖的小羊
03-11 5319
好久没看React了，最近又想重新看下。 除了视频课，前几天跟着官网的教程做了井字棋（tic-tac-toe），后面有一些可以改进游戏的想法，下面我就把这些自己练手的代码记录一下，这些功能是： 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)。 在历史记录列表中加粗显示当前选择的项目 使用两个循环来渲染出棋盘的格子，而不是在代码里写死（hardcode） 添加一个可以升序或降序显示历史记录的按钮 每当有人获胜时，高亮显示连成一线的 3 颗棋子 当无人获胜时，显示一个平局的消息。 P.S.
win10环境下使用npm安装react步骤总结：
Mia_pinpin的博客
08-30 699
1、检查环境： 首先，确保node.js和npm已经安装在你的电脑上，并确保node版本>=6，npm版本>=5.2。 查看方式，打开命令行工具，执行如下命令，可以查询出node和npm是否已安装，版本是多少： 2、create-react-app： 管理员身份运行命令行工具（右键选择run as administrator），如果有代理，请设置一下，这里不做详述。 执行npm in...
React 入门九宫格游戏
weixin_43163359的博客
09-27 690
React 入门九宫格游戏地址实践 地址 实践 安装最新版node.js 在项目文件夹中运行 cmd 命令 npx create-react-app my-app 创建项目 cd my-app 进入创建的项目 cd src 进入项目中带文件 cd del * 删除全部 在src下创建index.css body { font: 14px "Century Gothic",...
500. Keyboard Row（判断单词能否由键盘上的某一行字符表示）
Alan_Xiang的博客
03-12 874
Given a List of words, return the words that can be typed using letters of alphabet on only one row's of American keyboard like the image below. Example 1: Input: ["Hello", "Alaska", "Da
500. Keyboard Row - 是否为键盘行序列
大自然的代码
02-08 809
hhttps://leetcode.com/problems/keyboard-row/分析判断所给的各个序列是否是有键盘中的一行字母能够组成的，写的比较简单，也没用什么算法，简单的字符串匹配加判断，没有拆分封装函数，写的比较啰嗦，还用了goto，有下面几点需要关注： goto语句后面不能直接结束，至少还需要有一条语句，否则会报错 动态二维数组内存申请，先申请行指针，再申请列内存 实现/** *
WEBRTC教程:局域网怎么调试，http://172.19.18.101:8080 ,无法访问摄像头和麦克风，请检查权限
keyboard专栏
10-25 1152
在局域网中使用 WebRTC 时，无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了API 的使用。如果你在非localhost或非 HTTPS 环境下访问网页，浏览器会阻止访问摄像头和麦克风。localhost大多数浏览器允许在localhost上使用，即使没有 HTTPS。所以你可以在服务器和客户端同一台机器上使用localhost进行测试。如果你需要在局域网的 IP 地址上（如）进行访问，那么使用 HTTPS 是解决方案之一。通过配置 HTTPS，你可以避免浏览器的安全限制。使用openssl。
vue如何让下拉框可以输入---查询下拉框内容
最新发布
qq_42666729的博客
10-28 458
使用filterable。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值