Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > React项目开发实战之业余草赛车游戏

    React项目开发实战之业余草赛车游戏

    HTML5 herman 6794浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    前段时间写了两篇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

    版权声明：本文为博主原创文章，未经博主允许不得转载。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » React项目开发实战之业余草赛车游戏

    相关文章推荐