php赛车游戏开发文档,React 开发一款简单的赛车游戏

写在开始之前

最近研究egret引擎时，在论坛看到了用egret引擎写的一款赛车游戏

玩法很简单，左右控制赛车躲避来车，碰撞即游戏失败

下面将为大家一步步讲解，如何用React写出一款纯 javascript+css 的小游戏

准备工作

本教程使用 React 0.14 版本

一、React基本结构

// ** code **

可以看到 html 代码非常简单，我们只留了一个

作为React渲染后插入的节点，所有的代码均写在JS中。

大家注意到 script 标签的 type 为 text/babel ，由 于React 使用 JSX 语法，browser.min.js 用于将 JSX 语法转化为 javascript 语法。

二、创建第一个React组件

var GameBoard = React.createClass({

getInitialState : function(){

return {

gameState : 0

}

},

render : function(){

return

}

});

ReactDOM.render(,document.getElementById("reactGame"));

我们通过样式创建了一个基础的游戏界面：游戏容器 [board]，路面 [roadbed]，路面范围 [road]，主角车 [hero]，敌车 [enemy]，还有公里板 [kilo]，失败提示 [failbub]

我们创建了一个 GameBoard 的组件，用于建立整个游戏场景，你也可以建立多个子组件，比如主角赛车，敌方赛车，公里板，再在 Gameboard 中引入子组件。

本教程案例相对简单，我们只创建一个组件，也能更容易理解代码逻辑。

React 自带了一些事件处理函数，如

getInitialState() //组件初始化数据

componentWillMount() //组件渲染前调用

componentDidMount() //组件渲染后调用

render() //组件渲染

而 render 函数中，将返回我们页面所有的 html 结构

下面我们用一个简单的例子帮助大家理解 React 的工作流程

var GameBoard = React.createClass({

getInitialState : function(){

return {

gameState : 0

}

},

gameStart : function(){

this.setState({

gameState : 1

})

},

render : function(){

return

}

});

ReactDOM.render(,document.getElementById("reactGame"));

在上面的例子中，我们在 getInitialState 函数中初始化了 state.gameState:0，在 render 函数中，我们对 div 的 className 做了一个三元表达式的判断，如果 gameState 为0，表示游戏未开始，渲染出的 html 结构为