React Js Game
by
ReactJs Tac-Tic-Toe小游戏
介绍
使用ReactJs构建一个Tac-Tic-Toe小游戏。
开始之前
本次内容包含以下4个部分：
- 游戏的配置
- 介绍
- 完成游戏
- 增加时光机
我们要建造什么？
开发tic-tac-toe游戏，效果图如下：
前提条件
熟悉HTML、JavaScript
熟悉一些概念像：函数、对象、数组、类
JavaScript教程链接： https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
教程配置
两种方式可以完成该教程
教程1配置：在浏览器中写代码
https://codepen.io/gaearon/pen/oWWQNa?editors=0010
教程2配置：搭建本地开发环境
配置步骤
- 安装最新的nodejs 参考链接： https://www.runoob.com/nodejs/nodejs-install-setup.html
- 创建项目
npx create-react-app my-app
- 删除src文件夹中的内容
- 新建文件index.css，复制内容
- 新建文件index.js，复制内容
- 在index.js文件头部新增如下内容
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
- 执行启动命令
npm start
概览
什么是React？
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />
关键字：
- 组件 Component
- 组件参数 props
- 渲染视图方法 render
- JSX
审查开始代码
三个React组件：
- Square
- Board
- Game
三个组件在游戏的图中分别代表什么部位？
通过Props传递数据
在Board组件中修改renderSquare方法
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />; }
}
在Square组件中修改render方法
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value} </button>
);
}
}
| 修改前效果 | 修改后效果 |
|---|---|
 |
 |
组件交互
大目标：点击Square组件时显示X
小目标：点击Square组件时弹出提示
修改Square组件如下：
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => alert('别点我')}> {this.props.value}
</button>
);
}
}
大目标步骤：
- 点击
Square时填充为X - 并记住点击了哪一个
- 使用
state组件存储（记忆）数据
- 使用
在Square类中增加构造方法（constructor）初始化状态，调整代码如下：
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}
在JavaScript的子类中，必须使用
super(props)调用父类的构造方法
开发者工具
完成游戏
目标：
- 交替放置X和O
- 需要一种方法决定胜利者
利用状态
- 在Board维护9个方块的值
为什么要在Board中维护9个方块的值？
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: Array(9).fill(null),
};
}
renderSquare(i) {
return <Square value={i} />;
}
其中的 this.state.squares数据会呈现如下状态：
[
'O', null, 'X',
'X', 'X', 'O',
'O', null, null,
]
需要考虑两个问题：
- 方块的状态如何传递到Board中？
传值方式如下：
- 在Square的render方法中使用
this.props.value替换this.state.value - 在Square的render方法中使用
this.props.onClick()替换this.setState() - 删除Square中的构造器
最终的Square组件代码如下：
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}