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