标签:android style blog http color io os 使用 ar
<div id="gamepanel"> <canvas id="stage" width="320" height="568"></canvas> </div>
#gamepanel{ width: 320px; margin: 0 auto; height: 568px; position: relative; overflow: hidden; }
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); },
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 } } } }
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){ this.left = event.changedTouches[0].clientX - this.width/2 - 16; this.top = event.changedTouches[0].clientY - 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(‘touchstart‘, function(event){ _this.setPosition(event); move = true; }).on(‘touchend‘, function(){ move = false; }).on(‘touchmove‘, function(event){ event.preventDefault(); _this.setPosition(event); }); } }
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); } }
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); } }
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); } } } } }
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++; }
标签:android style blog http color io os 使用 ar
原文地址:http://www.cnblogs.com/lvdabao/p/3981217.html