《兔子吃月饼》游戏简单介绍
兔子吃月饼是一款玩家需要控制兔子吃掉美味月饼的冒险类游戏，兔子吃月饼中的吃月饼玩法非常的有趣，小心不要吃掉五仁馅的月饼咯，吃月饼的玩法给你带来的乐趣很多，吃掉的月饼越多玩家获得的分数也会越多的。游戏里的各种关卡的设计非常的棒，兔子非常的可爱，看看自己的兔子能够吃掉多少月饼。
兔子吃月饼游戏特色：
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(); }
创建月饼
js
复制代码
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); }
游戏结束 数据渲染
设备识别
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); }
最后祝大家节日快乐
