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

HTML5 herman 4177浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

前段时间写了两篇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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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