HTML5兔子吃月饼手机小游戏

遐想
1,087 阅读5分钟

1.gif

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

github在线体验

《兔子吃月饼》游戏简单介绍

兔子吃月饼是一款玩家需要控制兔子吃掉美味月饼的冒险类游戏，兔子吃月饼中的吃月饼玩法非常的有趣，小心不要吃掉五仁馅的月饼咯，吃月饼的玩法给你带来的乐趣很多，吃掉的月饼越多玩家获得的分数也会越多的。游戏里的各种关卡的设计非常的棒，兔子非常的可爱，看看自己的兔子能够吃掉多少月饼。

兔子吃月饼游戏特色：

1、玩家需要控制兔子吃掉他喜欢的月饼，小心吃掉不喜欢的月饼;

2、游戏里的图画非常的精美，各种关卡设计也非常的有趣;

3、成为游戏中的高手，吃掉越来越越多的月饼，给你的体验非常棒。

兔子吃月饼游戏玩法：

1、进行愉快的吃月饼大冒险吧，操纵也非常的简单，控制兔子左右移动;

2、各种关卡也非常的独特，新的关卡给你吃月饼的体验也是不同的;

3、小心不要吃掉讨厌的月饼馅，非常考验玩家的操作能力。

在线体验

编码实现

html页面代码

<div id="container">
	<div id="guidePanel"></div>
	<div id="gamepanel">
		<div class="score-wrap">
            <div class="heart"></div>
            <span id="score">0</span>
        </div>
		<canvas id="stage" width="320" height="568"></canvas>
	</div>
	<div id="gameoverPanel"></div>
	<div id="resultPanel">
        <div class="weixin-share"></div>
        <a href="javascript:void(0)" class="replay"></a>
        <div id="fenghao"></div>
        <div id="scorecontent">
        	您在<span id="stime" class="lighttext">2378</span>秒内抢到了<span id="sscore" class="lighttext">21341</span>个月饼<br>超过了<span id="suser" class="lighttext">31%</span>的用户！
        </div>
        <div class="textc">
        	<span class="btn1 share">请小伙伴吃月饼</span>
        </div>
	</div>
</div>

css样式代码

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-tap-highlight-color: transparent
}
html, body{
	height: 100%;
	position: relative;
	margin: 0;
	overflow: hidden;
	-webkit-user-select:none;
	-webkit-tap-highlight-color: transparent;
}
body{
	background-color: #000018;
	font-family: '微软雅黑';
}
a{
	text-decoration: none;
}
#container{
	width: 100%;
	position: relative;
	overflow: hidden;
}
#startgame{
	position: absolute;
	right: 20px;
	bottom: 20px;
}
#gamepanel{
	width: 320px;
	margin: 0 auto;
	height: 568px;
	position: relative;
	overflow: hidden;
}
@media screen and (min-width: 1024px) {
	#gamepanel, body, html{
		width: 320px;
		margin: 0 auto;
	}
}
#stage{
	background-color: #CCC;
}

.score-wrap {
	background: url(../img/scorebg.png) no-repeat;
	background-size: 100%;
	color: #FFF;
	/*display: none;*/
	font-family: "Helvetica","Microsoft YaHei",sans-serif;
	font-style: italic;
	font-size: 17px;
	font-weight: 700;
	height: 32px;
	letter-spacing: 2px;
	padding: 7px 10px;
	position: absolute;
	right: 20px;
	text-align: right;
	text-shadow: 1.5px 0 0 #613209,-1.5px 0 0 #613209,0 1px 0 #613209,0 -1.5px 0 #613209,1px 1px 0 #613209,-1px 1px 0 #613209,1px -1px 0 #613209,-1px -1px 0 #613209;
	top: 10px;
	width: 105px;
	z-index: 1005
}

.score-wrap div {
	background: url(../img/heart.png) no-repeat;
	background-size: 100%;
	height: 26px;
	left: 2px;
	position: absolute;
	top: 2px;
	width: 26px;
	z-index: 1009
}

div.hearthot {
	-webkit-animation: fire .2s linear;
	-o-animation: fire .2s linear;
	animation: fire .2s linear
}

@-webkit-keyframes fire {
	0% {
		opacity: 1;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(3.0);
		-moz-transform: scale(3.0);
		-ms-transform: scale(3.0);
		-o-transform: scale(3.0);
		transform: scale(3.0)
	}
}

@keyframes fire {
	0% {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1)
	}

	100% {
		-webkit-transform: scale(1.0);
		-moz-transform: scale(1.0);
		-ms-transform: scale(1.0);
		-o-transform: scale(1.0);
		transform: scale(1.0)
	}
}
#guidePanel {
	background: rgba(0,0,0,0.6) url(../img/startbg.png) center 50% no-repeat;
	background-size: 219px 369px;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 10000
}
#gameoverPanel {
	background: rgba(0,0,0,0.8) url(../img/gameover.png) center 30% no-repeat;
	background-size: 230px 260px;
	top: 0
}

#gameoverPanel,#resultPanel {
	display: none;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 10000
}

#resultPanel{
	background:url(../img/endpage.jpg) center top no-repeat;
}

#resultPanel,#resultPanel .weixin-share {
	left: 0;
	top: 0
}
#resultPanel .weixin-share {
	background: rgba(0,0,0,.8) url(../img/weixin.png) right top no-repeat;
	background-size: 212px 196px;
	display: none;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 100
}

#resultPanel .replay {
	background: url(../img/replay.png) 0 0 no-repeat;
	height: 36px;
	line-height: 36px;
	left: 16px;
	overflow: hidden;
	position: absolute;
	top: 11px;
	width: 86px;
	z-index: 10;
	color: #E44324;
	text-align: right;
	padding-right: 6px;
	font-weight: 700;
	font-size: 12px;
}
#resultPanel .panel,#scoreBoard .score-result {
	display: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%
}
#fenghao{
	height: 68px;
	margin-top: 90px;
}
#scorecontent{
	font-size: 16px;
	font-weight: 700;
	color: #FFF;
	text-align: center;
	line-height: 1.8em;
	margin-top: 5px;
}
.lighttext{
	color: #F6DE0A;
}
.geili{
	background: url(../img/geili.png) center no-repeat;
}
.yinhen{
	background: url(../img/yinhen.png) center no-repeat;
}
.textc{
	text-align: center;
}
.btn1, .btn2{
	display: inline-block;
	width: 196px;
	height: 54px;
	line-height: 54px;
	color: #FFF;
	font-size: 20px;
	border-radius: 5px;
	text-align: center;
}
.btn1{
	margin-top: 22px;
	background-color: #E8722C;
}
.btn2{
	margin-top: 12px;
	border: 1px solid #6A6B6D;

}

JavaScript 主要分成个部分

设置兔兔的位置，一个手指滑动屏幕，移动兔兔的位置，if限制兔兔的位置，这就兔兔就不会跑到外面去，

 	this.setPosition = function(event){
		if(gameMonitor.isMobile()){
			var tarL = event.changedTouches[0].clientX;
			var tarT = event.changedTouches[0].clientY;
		}
		else{
			var tarL = event.offsetX;
			var tarT = event.offsetY;
		}
		this.left = tarL - this.width/2 - 16;
		this.top = tarT - this.height/2;
		if(this.left<0){
			this.left = 0;
		}
		if(this.left>320-this.width){
			this.left = 320-this.width;
		}
		if(this.top<0){
			this.top = 0;
		}
		if(this.top>gameMonitor.h - this.height){
			this.top = gameMonitor.h - this.height;
		}
		this.paint();
	}

创建月饼

	genorateFood : function(){
		var genRate = 50; //产生月饼的频率
		var random = Math.random();
		if(random*genRate>genRate-1){
			var left = Math.random()*(this.w - 50);
			var type = Math.floor(left)%2 == 0 ? 0 : 1;
			var id = this.foodList.length;
			var f = new Food(type, left, id);
			this.foodList.push(f);
		}
	}

背景移动

rollBg : function(ctx){
		if(this.bgDistance>=this.bgHeight){
			this.bgloop = 0;
		}
		this.bgDistance = ++this.bgloop * this.bgSpeed;
		ctx.drawImage(this.bg, 0, this.bgDistance-this.bgHeight, this.bgWidth, this.bgHeight);
		ctx.drawImage(this.bg, 0, this.bgDistance, this.bgWidth, this.bgHeight);
	}

游戏结束 数据渲染

	getScore : function(){
		var time = Math.floor(this.time/60);
		var score = this.score;
		var user = 1;
		if(score==0){
			$('#scorecontent').html('真遗憾，您竟然<span class="lighttext">一个</span>月饼都没有抢到！');
			$('.btn1').text('大侠请重新来过').removeClass('share').addClass('playagain');
			$('#fenghao').removeClass('geili yinhen').addClass('yinhen');
			return;
		}
		else if(score<10){
			user = 2;
		}
		else if(score>10 && score<=20){
			user = 10;
		}
		else if(score>20 && score<=40){
			user = 40;
		}
		else if(score>40 && score<=60){
			user = 80;
		}
		else if(score>60 && score<=80){
			user = 92;
		}
		else if(score>80){
			user = 99;
		}
		$('#fenghao').removeClass('geili yinhen').addClass('geili');
		$('#scorecontent').html('您在<span id="stime" class="lighttext">2378</span>秒内抢到了<span id="sscore" class="lighttext">21341</span>个月饼<br>超过了<span id="suser" class="lighttext">31%</span>的用户！');
		$('#stime').text(time);
		$('#sscore').text(score);
		$('#suser').text(user+'%');
		$('.btn1').text('请小伙伴吃月饼').removeClass('playagain').addClass('share');
	}

设备识别

	isMobile : function(){
		var sUserAgent= navigator.userAgent.toLowerCase(),
		bIsIpad= sUserAgent.match(/ipad/i) == "ipad",
		bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os",
		bIsMidp= sUserAgent.match(/midp/i) == "midp",
		bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
		bIsUc= sUserAgent.match(/ucweb/i) == "ucweb",
		bIsAndroid= sUserAgent.match(/android/i) == "android",
		bIsCE= sUserAgent.match(/windows ce/i) == "windows ce",
		bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile",
		bIsWebview = sUserAgent.match(/webview/i) == "webview";
		return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
     }

最后祝大家节日快乐

toonmecom_4b3f0c.jpg

avatar
文章
阅读
粉丝