realwds
2017-11-22 10:51
//action.js var can1, can2; var ctx1, ctx2; var lastTime, deltaTime; var canWidth, canHeight; var bgPic=new Image(); var ane, fruit; var mom; var mx, my; document.body.onload=game; function game(){ init(); lastTime=Date.now(); deltaTime=0; gameloop(); } function init(){ can1=document.getElementById("canvas1"); ctx1=can1.getContext('2d'); can2=document.getElementById("canvas2"); ctx2=can2.getContext('2d'); can1.addEventListener('mousemove',onMouseMove,false); bgPic.src="./img/background.jpg"; canWidth=can1.width; canHeight=can1.height; ane=new aneObj(); ane.init(); fruit=new fruitObj(); fruit.init(); mom=new momObj(); mom.init(); mx=canWidth*0.5; my=canHeight*0.5; } function gameloop(){ window.requestAnimFrame(gameloop); var now=Date.now(); deltaTime=deltaTime<50?now-lastTime:50;//解决暂停网页,球无限变大bug lastTime=now; drawBackground(); ane.draw(); fruitMonitor(); fruit.draw(); ctx1.clearRect(0,0,canWidth,canHeight); mom.draw(); momFruitCollision(); } function onMouseMove(e){ //获取鼠标移动位置 if(e.offsetX||e.layerX){ mx=e.offsetX==undefined? e.layerX:e.offsetX; my=e.offsetY==undefined? e.layerY:e.offsetY; } }
//fruit.js var fruitObj=function(){ this.isalive=[]; this.x=[]; this.y=[]; this.l=[]; this.spd=[]; this.fruitType=[]; this.orange=new Image(); this.blue=new Image(); } fruitObj.prototype.num=30; fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.isalive[i]=false; this.x[i]=0; this.y[i]=0; this.spd[i]=Math.random()*0.017+0.003; this.born(i); this.fruitType[i]=""; } this.orange.src="./img/fruit.png"; this.blue.src="./img/blue.png"; } fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ var pic; if(this.isalive[i]){ if(this.fruitType[i]=="blue"){ pic=this.blue; }else{ pic=this.orange; } if(this.l[i]<=14){ this.l[i]+=this.spd[i]*deltaTime; } else{ this.y[i]-=this.spd[i]*6*deltaTime; } ctx2.drawImage(pic,this.x[i]-this.l[i]*0.5,this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); if(this.y[i]<10){ this.isalive[i]=false; } } } } fruitObj.prototype.born=function(i){ var aneID=Math.floor(Math.random()*ane.num); this.x[i]=ane.x[aneID]; this.y[i]=canHeight-ane.len[aneID]; this.l[i]=0; this.isalive=true; var ran=Math.random(); if(ran<0.3){ this.fruitType[i]="blue"; }else{ this.fruitType[i]="orange"; } } fruitObj.prototype.dead=function(i){ this.isalive[i]=false; } function fruitMonitor(){ var num=0; for(var i=0;i<fruit.num;i++){ if(fruit.isalive[i]) num++; } if(num<15){ sendFruit(); return; } } function sendFruit(){ for(var i=0;i<fruit.num;i++){ if(!fruit.isalive[i]){ fruit.born(i); return; } } }
自己一步一步的调试,看问题出在哪儿
HTML5小游戏---爱心鱼(上)
92348 学习 · 551 问题
相似问题