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 结构为

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

微信小程序游戏开发文档以及开发工具地址
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 微信官方于 2017 - 12 - 28 日开发微信小程序开发小游戏 , 微信小程序小游戏开发官方 ...
python飞机大战概要设计_飞机大战游戏开发文档(Android版)
飞机大战游戏开发文档 (Android版) 课程名称:飞机大战游戏课程类型:Android游戏编程精彩内容,尽在百度攻略:https://gl.baidu.com 姓名:苏均灿学号:131342 ...
Unity游戏开发文档（3.1.1）：弹窗效果
前言该文档为<Unity游戏开发文档(3):Dancing Line>的附属文档,亦可看作是单独的技术总结文档. 目录综述对话框的非匀速滑动对话框动画的异步运行最终效果 ...
Unity游戏开发文档（3.1.3）：滚动式关卡选择菜单
前言该文档为<Unity游戏开发文档(3):Dancing Line>的附属文档,亦可看作是单独的技术总结文档. 目录综述构建滚动菜单读取关卡信息填充菜单选项选项自动 ...
Unity游戏开发文档（3.1.2）：下拉式音乐选择菜单
前言该文档为<Unity游戏开发文档(3):Dancing Line>的附属文档,亦可看作是单独的技术总结文档. 目录综述构建下拉菜单填充下拉菜单切换背景音乐最终效果 ...
前端开发文档（开发之前个人的准备）
前言: 前端开发文档,目前自己正在开发的项目之前的个人准备,按照自己的开发习惯来编写,有问题或者不足的地方还望指出,谢谢~ 如有侵权,实属无意,请立即联系,立删. 环境搭建需要准备的软件 a. No ...
微信小程序开发文档和开发工具放出破解版-亲测可用
废话不多说,直接上衔接 1,微信小程序开发文档现阶段最全的开发文档了 http://wxopen.notedown.cn/api/notice.html 2,开发工具 https://github. ...
java小组坦克大战游戏开发文档开发日志_java实现坦克大战游戏
本文实例为大家分享了java实现坦克大战游戏的具体代码,供大家参考,具体内容如下一.实现的功能 1.游戏玩法介绍 2.自定义游戏(选择游戏难度.关卡等) 3.自定义玩家姓名 4.数据的动态显示二. ...
火力篮球游戏源码完整版-带游戏开发文档
火力篮球,通过模拟现实中的投篮游戏机,而投篮游戏机又是源于街头篮球,街头篮球起源于美国,现在已经流行于世界的体育竞技项目,将投篮部分独立出来做成投篮游戏机.成为了专门的投篮类游戏设备.而本游戏就是将该 ...

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

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

最新文章

热门文章