前段时间写了两篇React开发入门教程，有网友留言是否有实战项目？我今天告诉大家不仅有，而且还不止一个，请大家陆续关注我网站上的新文章。本篇文章的标题我想了好久，如果觉得不够醒目，请留言，再做更改！
ReactJS项目实战效果图
赛车游戏开发步骤
React开发，我们首先需要引入js库文件。我使用的全是cdn的地址：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>React开发的游戏——</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="http://cdn.bootcss.com/react/15.2.0/react.min.js"></script> <script src="http://cdn.bootcss.com/react/15.2.0/react-dom.min.js"></script> </head> <body> <div id="reactGame"></div> <script type="text/babel"> </script> </body> </html>
然后我们需要创建React组件，html代码非常简单，只有一个<div id="reactGame"></div>。创建组件我们使用React.createClass函数，然用使用render方法进行渲染到元素上ReactDOM.render(<GameBoard/>,document.getElementById("reactGame"));
<script type="text/babel">
var GameBoard = React.createClass({
getInitialState : function(){
return {
gameState : 0
}
},
render : function(){
return <div className="board">
<div className="roadbed"></div>
<div className="road"}>
<div className="hero"></div>
<div className="enemy"></div>
</div>
<span className="start"></span>
<span className="kilo"></span>
<div className="failbub">
<span className="failtext"></span>
<span className="retry"></span>
</div>
</div>
}
});
ReactDOM.render(<GameBoard/>,document.getElementById("reactGame"));
</script>
到这里，界面大致就完成了，接下来，我们需要让马路进行移动。具体的做法就是，让小车静止在底部，马路进行循环的往下滚动的动画，看起来就像是小车在前进。
.roadbed{
background:url(../resource/road.png) repeat-y;
width:480px;
height:1600px;
position:absolute;
left:0;
top:-800px;
}
.roadRun{
-webkit-transform:translateZ(0);
-webkit-animation:roadRun 1.2s linear infinite;
}
@-webkit-keyframes roadRun{
100%{ -webkit-transform:translateY(800px);}
}
接下来我们需要监听键盘的左右键和空格键，左右键进行小车移动，空格键进行加速。使用componentDidMount方法为游戏注册一个键盘事件。
getInitialState : function(){
return {
gameState : 0,
heroLoc : 0,
}
},
gameStart : function(){
this.setState({
gameState : 1
})
},
gameHandle : function(e){
if(this.state.gameState ==1){
switch(e.keyCode){
case 37:
this.setState({heroLoc : 0});
break;
case 39:
this.setState({heroLoc : 1});
break;
}
}
},componentDidMount:function(){
window.addEventListener("keydown", this.gameHandle, false);
}
现在需要地方创建敌方车辆了，敌方车辆与主角运动方向一致，都是向上运动，由于主角相对固定，速度又比敌方车辆快，所以enemy的运动方向实际是向下运动，直至消失在屏幕之外。
为了降低复杂度，我们规定屏幕上每次只会出现一辆敌方车辆，方向随机，所以我们只需一个div作为敌方小车，在小车运动离开屏幕后，马上随机给小车换上不同的车型和方向的class。(具体代码就看下面的完整代码，我就不在贴了)
最后，我们还缺乏碰撞检测机制。游戏已经成功跑起来了，但仅仅是一些控制操作和效果动画的运行，并没有核心的游戏逻辑，下面我们加入游戏的核心逻辑，碰撞检测。
如何判断主角与敌方小车碰撞到一起了？其实思路很简单，我方小车与敌方小车位于同一车道，且敌方小车的运动距离大于舞台高度-我方小车高度，即两车相撞。(见完整代码)
好了，现在可以开始游戏了，点击此处立即试玩赛车游戏。
如果想要源码，就试玩游戏页面，另存在自己研究。或者留言，或者加站长的qq群：454796847、135430763
版权声明：本文为博主原创文章，未经博主允许不得转载。
： » React项目开发实战之赛车游戏
原创文章，作者：jamestackk，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251158.html