canvas 制作flappy bird（像素小鸟）全流程 - 熊猫呵呵哒(4)_H5之家

pipe1 = new Pipe(imgEls["pipe2"],imgEls["pipe1"],400, -0.1,ctx); var pipe2 = new Pipe(imgEls["pipe2"],imgEls["pipe1"],600, -0.1,ctx); var pipe3 = new Pipe(imgEls["pipe2"],imgEls["pipe1"],800, -0.1,ctx); var pipe4 = new Pipe(imgEls["pipe2"],imgEls["pipe1"],1000,-0.1,ctx); var pipe5 = new Pipe(imgEls["pipe2"],imgEls["pipe1"],1200,-0.1,ctx); //绘制区域 pipe1.update(dt); pipe1.draw(); pipe2.update(dt); pipe2.draw(); pipe3.update(dt); pipe3.draw(); pipe4.update(dt); pipe4.draw(); pipe5.update(dt); pipe5.draw(); pipe1.setCount(5,200); //设置管道数量和间隔

管道的绘制主要代码

到这一步我们的主要画面就制作出来了，是不是很简单呢O(∩_∩)O~

2.5 判断游戏是否犯规

接触到地面和天空顶部，结束游戏

//我们改造一下主循环，设置一个gameover为false来控制函数的执行 //任何违规都会触发gameover=true； var gameover = false; if(bird.y < 0 || bird.y > 488 -45/2 ){ //碰到天和地 gameover = true ; } if(!gameover){ //如果没有结束游戏则继续游戏 requestAnimationFrame(run); }

简单判读gameover

　　2. 碰到管道结束游戏

//x和y到时候我们传入小鸟的运动轨迹，每次重绘管道都有判断 Pipe.prototype.hitTest = function(x,y){ return (x > this.x && x < this.x + 52) //在管子横向中间 &&(! (y >this.r && y < this.r +150)); //在管子竖向中间 }

判断是否碰到管子

var gameover = false; gameover = gameover || pipe1.hitTest(bird.x ,bird.y); gameover = gameover || pipe2.hitTest(bird.x ,bird.y); gameover = gameover || pipe3.hitTest(bird.x ,bird.y); gameover = gameover || pipe4.hitTest(bird.x ,bird.y); gameover = gameover || pipe5.hitTest(bird.x ,bird.y); (bird.y < 0 || bird.y > 488 -45/2 ){ gameover = true ; } if(!gameover){ requestAnimationFrame(run); }

主循环的判断条件整合

到这一步我们的游戏完成的差不多了，剩下的就是部分数据的修正

主要需要修正的一个点是碰撞的计算，因为我们所有的碰撞都是按照小鸟图片的左上角计算的，这样就会有不准确的问题，通过测试很容易将这个距离加减修正了

3.游戏的优化

小鸟游戏的鸟儿在上下的过程中会随着点击，抬头飞翔，或低头冲刺，如何做到这个效果呢？

答案就是移动canvas 坐标系和选择坐标系的角度 ctx.translate()和ctx.rotate();

为了防止整个坐标系的整体旋转移动

需要在小鸟绘制函数Bird.prototype.draw里面前后端加入ctx.save() 和ctx.restore()来单独控制小鸟画布

Bird.prototype.draw = function (){ this.ctx.save(); .ctx.rotate((Math.PI /6) * this.speed / 0.3 ); .ctx.drawImage( this.img,52*this.index,0,52,45, -52/2,-45/2,52,45 //这里很重要的一点是，整个小鸟坐标系开始移动 ) this.ctx.restore(); }