您的位置：首页 > 移动开发

[Canvas前端游戏开发]——FlappyBird详解

2016-01-02 12:55 435 查看

一直想自己做点小东西，直到最近看了本《HTML5游戏开发》，才了解游戏开发中的一点点入门知识。

本篇就针对学习的几个样例，自己动手实践，做了个FlappyBird，源码共享在度盘；也可以参考github，里面有更多的游戏样例。

游戏截图

<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
// Edit by xingoo
// Fork on my github:https://github.com/xinghalo/CodeJS/tree/master/HTML5
var ctx;
var cwidth = 400;
var cheight = 600;
var objects = [];
var birdIndex = 0;
var ver1 = 10;
var ver2;
var gravity = 2;
var pipe_height = 200;
var velocity = 10;
var tid;
var score = 0;
var isScore = false;
var birds = ["./images/0.gif","./images/1.gif","./images/2.gif"];
var back = new Background(0,0,400,600,"./images/bg.png");
var up_pipe = new UpPipe(0,0,100,200,"./images/pipe.png");
var down_pipe = new DownPipe(0,400,100,200,"./images/pipe.png");
var ground = new Background(0,550,400,200,"./images/ground.png");
var bird = new Bird(80,300,40,40,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){
this.px = x;
this.py = y;
this.pwidth = width;
this.pheight = height;
this.img_src = img_src;
this.draw = drawUpPipe;
}
function DownPipe(x,y,width,height,img_src){
this.px = x;
this.py = y;
this.pwidth = width;
this.pheight = height;
this.img_src = img_src;
this.draw = drawDownPipe;
}
function drawUpPipe(){
var image = new Image();
image.src = this.img_src;
ctx.drawImage(image,150,500,150,800,this.px,this.py,this.pwidth,this.pheight);
}
function drawDownPipe(){
var image = new Image();
image.src = this.img_src;
ctx.drawImage(image,0,500,150,500,this.px,this.py,this.pwidth,this.pheight);
}
function Background(x,y,width,height,img_src){
this.bgx = x;
this.bgy = y;
this.bgwidth = width;
this.bgheight = height;
var image = new Image();
image.src = img_src;
this.img = image;
this.draw = drawbg;
}
function drawbg(){
ctx.drawImage(this.img,this.bgx,this.bgy,this.bgwidth,this.bgheight);
}
function Bird(x,y,width,height,img_srcs){
this.bx = x;
this.by = y;
this.bwidth = width;
this.bheight = height;
this.imgs = img_srcs;
this.draw = drawbird;
}
function drawbird(){
birdIndex++;
var image = new Image();
image.src = this.imgs[birdIndex%3];
ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);
}
function calculator(){
if(bird.by+bird.bheight>ground.bgy ||
((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(    bird.by<up_pipe.py+up_pipe.pheight))||
((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(    bird.by<up_pipe.py+up_pipe.pheight))||
((bird.bx>down_pipe.px)&&(bird.by>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by<down_pipe.py+down_pipe.pheight))||
((bird.bx>down_pipe.px)&&(bird.by+bird.bheight>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight<down_pipe.py+down_pipe.pheight))){
clearInterval(tid);
ctx.fillStyle = "rgb(255,255,255)";
ctx.font = "30px Accent";
ctx.fillText("You got "+score+"!",110,100)
return;
}
ver2 = ver1+gravity;
bird.by += (ver2+ver1)*0.5;
if(up_pipe.px+up_pipe.pwidth>0){
up_pipe.px -= velocity;
down_pipe.px -= velocity;
}else{
up_pipe.px = 400;
down_pipe.px = 400;
up_pipe.pheight = 100+Math.random()*200;
down_pipe.py = up_pipe.pheight+pipe_height;
down_pipe.pheight = 600-down_pipe.py;
isScore = true;
}
if(isScore && bird.bx>up_pipe.px+up_pipe.pwidth){
score += 1;
isScore = false;
if(score>0 && score%10 === 0){
velocity++;
}
}
ctx.fillStyle = "rgb(255,255,255)";
ctx.font = "30px Accent";
if(score>0){
score%10!==0?ctx.fillText(score,180,100):ctx.fillText("Great!"+score,120,100);
}
}
function drawall(){
ctx.clearRect(0,0,cwidth,cheight);
var i;
for(i=0;i<objects.length;i++){
objects[i].draw();
}
calculator();
}
function keyup(e){
var e = e||event;
var currKey = e.keyCode||e.which||e.charCode;
switch (currKey){
case 32:
bird.by -= 80;
break;
}
}
function init(){
ctx = document.getElementById('canvas').getContext('2d');
document.onkeyup = keyup;
drawall();
tid = setInterval(drawall,80);
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="400" height="600" style="margin-left:200px;">
Your browser is not support canvas!
</canvas>
</body>
</html>

View Code

总结

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

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

参考

【1】：Canvas参考手册

【2】：《HTML5游戏开发》

【3】：EdisonChou的FlappyBird

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航