html游戏小鸟,html 小鸟游戏 - hanchang的个人空间 - OSCHINA - 中文开源技术交流社区...

js

var canvas=document.getElementById('canvas');

var c =canvas.getContext('2d');

//Bird类，Obstacle类，FlappyBird类 (主要类)

function Bird(x,y,image){

this.x=x,

this.y=y,

this.width=image.width/2,

this.height=image.height,

this.image=image;

this.draw=function(context,state){

if(state==='up'){

context.drawImage(image,0,0,this.width,this.height,this.x,this.y,this.width,this.height);

}

else{

context.drawImage(image,this.width,0,this,width,this.height,this.x,this.y,this.width,this.height);

}

}

};

function Obstacle(x,y,h,image){

this.x=x,

this.y=y,

this.width=image.width/2,

this.height=h,

this.flypast=false;

this.draw=function(context,state){

if(state==='up'){

context.drawImage(image,0,0,this.width,this.height,this.x,this.y,this.width,this.height);

}

else{

context.drawImage(image,this.width,image.height-this.height,this,width,this.height,this.x,this.y,this.width,this.height);

}

}

};

//FlappyBird类包括游戏主要参数及运行函数

function FlappyBird(){}

FlappyBird.prototype={

bird:null,

bg:null,

obs:null,

obsList:[],

mapWidth:340,

mapHeight:453,

startX:90,

startY:255,

obsDistance:150,

obsSpeed:2,

obsInterval:2000,

usSpeed:8,

downSpeed:3,

line:56,

score:0,

touch:false,

gameOver:false,

//产生游戏主要的画面

CreateMap:function(){

this.bg=new Image();

//背景

this.bg.src='img/bg.png';

var starBg=new Image();

starBg.src='img/start.jpg';

starBg.οnlοad=function(){

c.drawImage(starBg,0,0);

};

//鸟

var image=new Image();

image.src='img/bird.png';

image.οnlοad=function(){

this.bird=new Bird(this.startX,this.startY,image);

}.bind(this);

//障碍物

this.obs=new Image();

this.obs.src='img/obs.png';

this.obs.οnlοad=function(){

var h=100;

var h2=this.mapHeight-h-this.obsDistance;

var obs1=new Obstacle(this.mapWidth,0,h,this.obs);

var obs2=new Obstacle(this.mapWidth,this.mapHeight-h2,h2-this.line,this.obs);

this.obsList.push(obs1);

this.obsList.push(obs2);

}.bind(this);

},

//随机产生障碍的高度

CreateObs:function(){

var h=Math.floor(Math.random()*(this.mapHeight-this.obsDistance-this.line));

var h2=this.mapHeight-h-this.obsDistance;

var obs1=new Obstacle(this.mapWidth,0,h,this.obs);

var obs2=new Obstacle(this.mapWidth,this.mapHeight-h2,h2-this.line,this.obs);

this.obsList.push(obs1);

this.obsList.push(obs2);

if(this.obsList[0].x

this.obsList.splice(0,2);

}

},

//画障碍物

DrawObs:function(){

c.fillStyle='#00ff00';

for (var i=0;i

this.obsList[i].x-=this.obsSpeed;

if(i%2)

this.obsList[i].draw(c,'up');

else

this.obsList[i].draw(c,'down');

}

},

//计算分数

CountScore:function(){

if(this.obsList[0].x+this.obsList[0].width

this.score+=1;

this.obsList[0].flypast=true;

}

},

//显示分数

ShowScore:function(){

c.strokeStyle='#000';

c.lineWidth=1;

c.fillStyle='#fff';

c.fillText(this.score,10,50);

c.strokeText(this.score,10,50);

},

//检测碰撞

CanMove: function(){

if(this.bird.y<0|| this.bird.y>this.mapHeight-this.bird.height-this.line){

this.gameOver=true;

}else{

var boundary=[{

x:this.bird.x,

y:this.bird.y

},{

x:this.bird.x+this.bird.width,

y:this.bird.y

},{

x:this.bird.x,

y:this.bird.y+this.bird.height

},{

x:this.bird.x+this.bird.width,

y:this.bird.y+this.bird.height

}];

for (var i=0;i

for(var j=0;j<4;j++){

if(boundary[j].x>=this.obsList[i].x&& boundary[j].x<=this.obsList[i].x+this.obsList[i].width

&& boundary[j].y>=this.obsList[i].y && boundary[j].y<=this.obsList[i].y+this.obsList[i].height){

this.gameOver=true;

break;

}

}

if (this.gameOver){

break;

}

}

}

},

CheckTouch:function(){

if(this.touch){

this.bird.y-=this.usSpeed;

this.bird.draw(c,'up');

}else{

this.bird.y+=this.downSpeed;

this.bird.draw(c,'down');

}

},

//清理屏幕

ClearScreen:function(){

c.drawImage(this.bg,0,0);

},

ShowOver:function(){

var overImg=new Image();

overImg.src='img/over.png';

overImg.οnlοad=function(){

c.drawImage(overImg,(this.mapWidth-overImg.width)/2,(this.mapHeight-overImg.height)/2-50);

}.bind(this);

return;

}

};

var game=new FlappyBird();

var Speed=20;

var IsPlay=false;

var GameTime=null;

var btn_start;

window.οnlοad=InitGame;

function InitGame(){

c.font='3em 微软雅黑';

game.CreateMap();

canvas.οnmοusedοwn=function(){

game.touch=true;

}

canvas.οnmοuseup=function(){

game.touch=false;

}

canvas.οnclick=function(){

if(!IsPlay){

IsPlay=true;

GameTime=RunGame(Speed);

}

}

}

//运行游戏

function RunGame(Speed){

var updateTime=setInterval(function(){

game.CanMove();

if(game.gameOver){

game.ShowScore();

clearInterval(updateTime);

return;

}

game.ClearScreen();

game.DrawObs();

game.CheckTouch();

game.CountScore();

game.ShowScore();

},speed);

var obsTimer=setInterval(function(){

if(game.gameOver){

clearInterval(obsTimer);

return;

}

game.CreateObs();

},game.obsInterval);

}

html

flappy bird