HTML5兔子奔月吃月饼游戏源码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5兔子奔月吃月饼游戏源码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="screen-orientation" content="portrait">
    <title>HTML5兔子奔月吃月饼游戏源码</title>
    <link rel="stylesheet" type="text/css" href="static/css/index.css">
    <script src="static/js/zepto.min.js"></script>

</head>
<body>
<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>
<script src="static/js/index.js"></script>
</body>
</html>

JS代码(index.js):

function Ship(ctx){
	gameMonitor.im.loadImage(['static/img/player.png']);
	this.width = 80;
	this.height = 80;
	this.left = gameMonitor.w/2 - this.width/2;
	this.top = gameMonitor.h - 2*this.height;
	this.player = gameMonitor.im.createImage('static/img/player.png');
	this.paint = function(){
	ctx.drawImage(this.player,this.left,this.top,this.width,this.height);
}
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();
}
this.controll = function(){
	var _this = this;
	var stage = $('#gamepanel');
	var currentX = this.left,currentY = this.top,move = false;
	stage.on(gameMonitor.eventType.start,function(event){
	_this.setPosition(event);
	move = true;
}
).on(gameMonitor.eventType.end,function(){
	move = false;
}
).on(gameMonitor.eventType.move,function(event){
	event.preventDefault();
	if(move){
	_this.setPosition(event);
}
}
);
}
this.eat = function(foodlist){
	for(var i=foodlist.length-1;
	i>=0;
	i--){
	var f = foodlist[i];
	if(f){
	var l1 = this.top+this.height/2 - (f.top+f.height/2);
	var l2 = this.left+this.width/2 - (f.left+f.width/2);
	var l3 = Math.sqrt(l1*l1 + l2*l2);
	if(l3<=this.height/2 + f.height/2){
	foodlist[f.id] = null;
	if(f.type==0){
	gameMonitor.stop();
	$('#gameoverPanel').show();
	setTimeout(function(){
	$('#gameoverPanel').hide();
	$('#resultPanel').show();
	gameMonitor.getScore();
}
,2000);
}
else{
	$('#score').text(++gameMonitor.score);
	$('.heart').removeClass('hearthot').addClass('hearthot');
	setTimeout(function(){
	$('.heart').removeClass('hearthot')}
,200);
}
}
}
}
}
}
function Food(type,left,id){
	this.speedUpTime = 300;
	this.id = id;
	this.type = type;
	this.width = 50;
	this.height = 50;
	this.left = left;
	this.top = -50;
	this.speed = 0.04 * Math.pow(1.2,Math.floor(gameMonitor.time/this.speedUpTime));
	this.loop = 0;
	var p = this.type == 0 ? 'static/img/food1.png':'static/img/food2.png';
	this.pic = gameMonitor.im.createImage(p);
}
Food.prototype.paint = function(ctx){
	ctx.drawImage(this.pic,this.left,this.top,this.width,this.height);
}
Food.prototype.move = function(ctx){
	if(gameMonitor.time % this.speedUpTime == 0){
	this.speed *= 1.2;
}
this.top += ++this.loop * this.speed;
	if(this.top>gameMonitor.h){
	gameMonitor.foodList[this.id] = null;
}
else{
	this.paint(ctx);
}
}
function ImageMonitor(){
	var imgArray = [];
	return{
	createImage:function(src){
	return typeof imgArray[src] != 'undefined' ? imgArray[src]:(imgArray[src] = new Image(),imgArray[src].src = src,imgArray[src])}
,loadImage:function(arr,callback){
	for(var i=0,l=arr.length;
	i<l;
	i++){
	var img = arr[i];
	imgArray[img] = new Image();
	imgArray[img].onload = function(){
	if(i==l-1 && typeof callback=='function'){
	callback();
}
}
imgArray[img].src = img}
}
}
}
var gameMonitor ={
	w:320,h:568,bgWidth:320,bgHeight:1126,time:0,timmer:null,bgSpeed:2,bgloop:0,score:0,im:new ImageMonitor(),foodList:[],bgDistance:0,//背景位置eventType:{
	start:'touchstart',move:'touchmove',end:'touchend'}
,init:function(){
	var _this = this;
	var canvas = document.getElementById('stage');
	var ctx = canvas.getContext('2d');
	//绘制背景var bg = new Image();
	_this.bg = bg;
	bg.onload = function(){
	ctx.drawImage(bg,0,0,_this.bgWidth,_this.bgHeight);
}
bg.src = 'static/img/bg.jpg';
	_this.initListener(ctx);
}
,initListener:function(ctx){
	var _this = this;
	var body = $(document.body);
	$(document).on(gameMonitor.eventType.move,function(event){
	event.preventDefault();
}
);
	body.on(gameMonitor.eventType.start,'.replay,.playagain',function(){
	$('#resultPanel').hide();
	var canvas = document.getElementById('stage');
	var ctx = canvas.getContext('2d');
	_this.ship = new Ship(ctx);
	_this.ship.controll();
	_this.reset();
	_this.run(ctx);
}
);
	body.on(gameMonitor.eventType.start,'#frontpage',function(){
	$('#frontpage').css('left','-100%');
}
);
	body.on(gameMonitor.eventType.start,'#guidePanel',function(){
	$(this).hide();
	_this.ship = new Ship(ctx);
	_this.ship.paint();
	_this.ship.controll();
	gameMonitor.run(ctx);
}
);
	body.on(gameMonitor.eventType.start,'.share',function(){
	$('.weixin-share').show().on(gameMonitor.eventType.start,function(){
	$(this).hide();
}
);
}
);
	WeixinApi.ready(function(Api){
	// 微信分享的数据 //分享给好友的数据 var wxData ={
	"appId":"","imgUrl":"static/img/icon.png","link":"http://dev.360.cn/html/zhuanti/yutu.html","desc":"进击的玉兔","title":"“玩玉兔 抢月饼”"}
;
	//朋友圈数据 var wxDataPyq ={
	"appId":"","imgUrl":"static/img/icon.png","link":"http://dev.360.cn/html/zhuanti/yutu.html","desc":"“玩玉兔 抢月饼”","title":"进击的玉兔"}
// 分享的回调 var wxCallbacks ={
	// 分享操作开始之前 ready:function(){
}
,cancel:function(resp){
}
,fail:function(resp){
}
,confirm:function(resp){
}
,all:function(resp){
	//location.href=location.href}
}
;
	// 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码 Api.shareToFriend(wxData,wxCallbacks);
	// 点击分享到朋友圈，会执行下面这个代码 Api.shareToTimeline(wxDataPyq,wxCallbacks);
	// 点击分享到腾讯微博，会执行下面这个代码 Api.shareToWeibo(wxData,wxCallbacks);
}
);
}
,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);
}
,run:function(ctx){
	var _this = gameMonitor;
	ctx.clearRect(0,0,_this.bgWidth,_this.bgHeight);
	_this.rollBg(ctx);
	//绘制飞船_this.ship.paint();
	_this.ship.eat(_this.foodList);
	//产生月饼_this.genorateFood();
	//绘制月饼for(i=_this.foodList.length-1;
	i>=0;
	i--){
	var f = _this.foodList[i];
	if(f){
	f.paint(ctx);
	f.move(ctx);
}
}
_this.timmer = setTimeout(function(){
	gameMonitor.run(ctx);
}
,Math.round(1000/60));
	_this.time++;
}
,stop:function(){
	var _this = this$('#stage').off(gameMonitor.eventType.start + ' ' +gameMonitor.eventType.move);
	setTimeout(function(){
	clearTimeout(_this.timmer);
}
,0);
}
,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);
}
}
,reset:function(){
	this.foodList = [];
	this.bgloop = 0;
	this.score = 0;
	this.timmer = null;
	this.time = 0;
	$('#score').text(this.score);
}
,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);
}
}
if(!gameMonitor.isMobile()){
	gameMonitor.eventType.start = 'mousedown';
	gameMonitor.eventType.move = 'mousemove';
	gameMonitor.eventType.end = 'mouseup';
}
gameMonitor.init();

CSS代码(index.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;}

附件:下载该文件资源,减少时间成本(增值服务)