flppy bird 运用html5实现

知道很多朋友都做过flappy bird !  一般都是使用java写出来的,其实我们做前端的同学,我们也可以制作游戏,现在的网页游戏很火爆,我们其实都可以写一些简单的小游戏....

在网上也能找到很多制作小鸟的教程,其实都是大同小异,我自己也做来玩玩,基本的功能也有,而且我今天会写得让大家都能看明白,就是简单明了!!!

首先,我们使用的是canvas来画出一个画布,我们就是在这个画布上面把整个游戏都画出来!!  很多的游戏,基本都是使用canvas来画出来的,canvas是很强大的,所以朋友们要好好学习!!

我喜欢先把盒子之类的东西写在前面,这样方便查看,但是去公司,最好把文档都分开,因为现在代码都比较少,我就全部写在一起,这样方便大家查看

//画布

<canvas width="288" height="512" id="canvas">
您的浏览器不支持canvas
</canvas>

//音效 分数
<audio src="img/sfx_point.ogg" id="point" > 
</audio>

//音效 死亡
<audio src="img/sfx_die.ogg" id="die" > 
</audio>

//音效 撞击
<audio src="img/sfx_hit.ogg" id="hit" > 
</audio>

//音效 飞
<audio src="img/sfx_wing.ogg" id="wing" > 
</audio>

<script type="text/javascript">
//全局变量区
var interval = 150;  //两根柱子之间的空隙
var canvas = document.getElementById("canvas");

//获取id
var point = document.getElementById("point");
var die = document.getElementById("die");
var hit = document.getElementById("hit");
var wing = document.getElementById("wing");
var context = canvas.getContext("2d");
var count = 0;
var value = true;  //设置一个变量,先让柱子为新柱子


//背景
var background = {  //字面量创建方式,因为只有一个对象使用,可以不用构造函数
positionX : 0,
positionY : 0,
width     : 288,
height    : 512,  //背景图片位置与大小
bgImage   : (function(){
var a = new Image();  //创建图片,有Image()这个方法
a.src = "img/bg_day.png";
return a;
}()), //在创建对象时,会自动执行自调用函数,自调用函数调用之后为我们返回一张背景图片
draw      : function(){
context.drawImage(this.bgImage,this.positionX,this.positionY,this.width,this.height); 
}
}


//管子
var obstruction = {
positionX : 288,
positionY : Math.floor(Math.random()*229-228),  //100的空隙算的
createImg : (function(){  //createImg是一个数组
var imgs = [];  //设置空数组 
var images = ["img/pipe2_up.png","img/pipe2_down.png"]; //获取图片数组
for(var i=0;i<images.length;i++){
var a = new Image();
a.src =images[i];
imgs.push(a);


} 
return imgs;  //把imgs的图片返回给createImg
}()),
draw      : function(){
this.positionX -= 5;  //向左移动的距离
context.drawImage(this.createImg[0],this.positionX,this.positionY,52,320);
context.drawImage(this.createImg[1],this.positionX,this.positionY+320+interval,52,320);  //下面的柱子
if (this.positionX <= -52) {  //柱子过去刚刚消失的时候
this.positionX = 288;   //创建新柱子
this.positionY=Math.floor(Math.random()*229-228);


value = true; //当柱子为旧柱子时,这时让柱子返回新柱子

  //最上边的柱子不能为0,0不然下面的柱子不能碰到地面, 柱子长度为320,不能直接全部减完,不然下面的柱子不能刚好碰上地面
}
}
}


//创建鸟
var bird = {
positionX : 80,
positionY : 200,
width     : 35,
height    : 35,
images    : ["img/bird1_0.png","img/bird1_1.png","img/bird1_2.png"],
index     : 0, //当前是第几张图片
wing      : setInterval(function(){
bird.index++; //找到对象
},200),
currentImg  : function(){
var a = new Image();
a.src = this.images [bird.index%3];  //this指代小鸟对象
return a;//返回给curentImg
},
draw      : function(){
var _this = this;
this.bgImage = this.currentImg();  //每生成一张图片赋给image
this.positionY += 7;  //往下掉
context.drawImage(this.bgImage,5,10,36,30,_this.positionX,_this.positionY,_this.width,_this.height);

},
clearTime : function(){
clearInterval(this.wing);
}
}


//分数
function score (){
if ((bird.positionX>=obstruction.positionX+52) && value==true) {
//判断小鸟的位移大于柱子的位移加上柱子的宽度 并且 有一个变量让柱子先为true,当执行这个函数时,柱子的变量为falue
value = false;
count +=1;
point.play();
}
}

//方法区
function drawAll (){
context.clearRect(0,0,288,512); //全删,重画
background.draw();
bird.draw();
obstruction.draw();
}

document.onkeydown = function(e){ //键盘事件
e = e ||window.event;
var keycode = e.keyCode || e.which;
if (keycode == 32) {
//当点击空格时的操作
bird.positionY -= 60;  //小鸟往上飞
wing.play();
}
}


function judge(){  //判断
//1.判断小鸟撞到天花板 <=0
if (bird.positionY <=0) {
clearInterval(timer);
bird.clearTime();
}
//判断小鸟掉到地板
if (bird.positionY >= 512-35) {
clearInterval(timer);
bird.clearTime();
hit.play();
}
//判断是否碰撞到了上水管
if (bird.positionX + bird.width-4>=obstruction.positionX && bird.positionX<=obstruction.positionX+52 && bird.positionY<=obstruction.positionY+320) {
clearInterval(timer);
bird.clearTime();
hit.play();
}
//判断下水管
if (bird.positionX + bird.width>=obstruction.positionX && bird.positionX<=obstruction.positionX+52 && bird.positionY+bird.height>=obstruction.positionY+320+interval) {
clearInterval(timer);
bird.clearTime();
hit.play();
}
}


//方法调用区
var timer = setInterval(function(){
drawAll();
judge();
score();  //因为判断条件是执行那个操作之后才调用
context.fillStyle = "red";
context.font = "30px Accent";
context.fillText(count,100,100);  //应该一直加载在定时器当中的文字

},60) //定时器给了一个延时的时间,所以不用在加载

</script>

做到这里全部都可以了,有音效,我没有给小鸟做向上飞的角度,大家可以试一下