HTML5技术

[Canvas前端游戏开发]——FlappyBird详解 - xingoo(2)

字号+ 作者:H5之家 来源:博客园 2016-01-03 10:10 我要评论( )

Flappy Bird ctx; ; ; []; ; ; var ver2; ; ; ; var tid; ; ; ]; ); ); ); ); ,birds);objects.push(back);objects.push(up_pipe);objects.push(down_pipe);objects.push(ground);objects.push(bird); function UpP

Flappy Bird ctx; ; ; []; ; ; var ver2; ; ; ; var tid; ; ; ]; ); ); ); ); ,birds); objects.push(back); objects.push(up_pipe); objects.push(down_pipe); objects.push(ground); objects.push(bird); function UpPipe(x,y,width,height,img_src){ x; y; width; height; img_src; drawUpPipe; } function DownPipe(x,y,width,height,img_src){ x; y; width; height; img_src; drawDownPipe; } function drawUpPipe(){ Image(); image.src = this.img_src; ctx.drawImage(image,.pheight); } function drawDownPipe(){ Image(); image.src = this.img_src; ctx.drawImage(image,.pheight); } function Background(x,y,width,height,img_src){ x; y; width; height; Image(); image.src = img_src; image; drawbg; } function drawbg(){ ctx.drawImage(.bgheight); } function Bird(x,y,width,height,img_srcs){ x; y; width; height; img_srcs; drawbird; } function drawbird(){ birdIndex++; Image(); image.src ]; ctx.drawImage(image,.bheight); } function calculator(){ ((bird.bx ((bird.bx ((bird.bx ((bird.bxdown_pipe.pheight))){ clearInterval(tid); ctx.fillStyle ; ctx.font ; ctx.fillText() return; } ver2 gravity; bird.by ; ){ up_pipe.px -= velocity; down_pipe.px -= velocity; }else{ up_pipe.px = 400; down_pipe.px = 400; up_pipe.pheight ; down_pipe.py pipe_height; down_pipe.pheight down_pipe.py; isScore = true; } up_pipe.pwidth){ score += 1; isScore = false; ){ velocity++; } } ctx.fillStyle ; ctx.font ; ){ score); } } function drawall(){ ctx.clearRect(,cwidth,cheight); var i; ){ objects[i].draw(); } calculator(); } function keyup(e){ event; e.charCode; switch (currKey){ case 32: bird.by -= 80; break; } } function init(){ ctx ); document.onkeyup = keyup; drawall(); tid ); } Your browser is not support canvas!

View Code

总结

在学习游戏开发的时候,我突然怀念起大学的物理。当时很纳闷,学计算机学什么物理,后来再接触游戏开发才知道,没有一定的物理知识,根本无法模拟游戏中的各个场景。

而通过这个简单的小游戏,也捡起来了很多旧知识。

参考

【1】:Canvas参考手册

【2】:《HTML5游戏开发》

【3】:EdisonChou的FlappyBird

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 前端工具的安装 - 韩子卢

    前端工具的安装 - 韩子卢

    2017-05-02 08:00

  • 网页版扫雷游戏 - 季末的寂寞

    网页版扫雷游戏 - 季末的寂寞

    2017-04-21 13:00

  • 移动前端常用meta标签 - 0jiji0

    移动前端常用meta标签 - 0jiji0

    2017-04-21 12:00

  • 前端项目从0到1的感悟 - liliangel

    前端项目从0到1的感悟 - liliangel

    2017-04-20 12:00

网友点评
l