100+行HMTL5代码实现flappy bird

来源：互联网发布：手机壁纸软件编辑：程序博客网时间：2024/05/12 09:02

http://blog.csdn.net/ljhcsd455/article/details/19352665

最近开始学习HTML5，刚好用最近正火的游戏flappy bird来练手。

效果如下：

JS代码实现如下：

[javascript] view plaincopy

function Bird(x, y, image){
this.x = x,
this.y = y,
this.width = 0,
this.height = 0,
this.image = image;
this.draw = function(context, state){
if(state == "up")
context.drawImage(this.image, this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height);
else
context.drawImage(this.image, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);
}
};
function Obstacle(x, y, width, height){
this.x = x,
this.y = y,
this.width = width,
this.height = height,
this.draw = function(context){
context.fillRect(this.x, this.y, this.width, this.height);
}
};
window.onload = function() {
var canvas = document.getElementById("canvas");
var c=canvas.getContext("2d");
c.font = "24pt 宋体";
var touch = false;
var gameOver = false;
var startX = 100; //起始位置
var startY = 100;
var obsDistance = 150; //上下连个障碍物距离
var obsSpeed = 2; //障碍物移动速度
var obsInterval = 2000; //制造障碍物间隔ms
var upSpeed = 5; //上升速度
var downSpeed = 5; //下降速度
var score = 0; //得分
//主角
var image = new Image()
var bird = new Bird(startX, startY, image);
image.src = "img/test01.png";
image.onload = function(){
bird.width = image.width/2;
bird.height = image.height;
};
//障碍物
var obsList = new Array();
var h = 100;
var h2 = canvas.height- h - obsDistance;
var obs1 = new Obstacle(canvas.width, 0, 50, h);
var obs2 = new Obstacle(canvas.width, canvas.height-h2, 50, h2);
obsList.push(obs1);
obsList.push(obs2);
canvas.onmousedown = function() {
touch = true;
}
canvas.onmouseup = function(){
touch = false;
};
//游戏更新
var updateTimer = setInterval(function(){
//计分
if(score == 0 && obs1.x+obs1.width < startX) {
score = 1;
var scoreTimer = setInterval(function(){
if(gameOver) {
clearInterval(scoreTimer);
return;
}
score++;
}, obsInterval);
}
//碰撞检测
if(bird.y<0 || bird.y > canvas.height-bird.height)
gameOver = true;
else {
var p = [{x:bird.x, y:bird.y}, {x:bird.x+bird.width, y:bird.y},
{x:bird.x, y:bird.y+bird.height}, {x:bird.x+bird.width, y:bird.y+bird.height}];
for(var i = 0; i < obsList.length; i++) {
for(var j = 0; j < 4; j++)
if(p[j].x >= obsList[i].x && p[j].x <= obsList[i].x+obsList[i].width && p[j].y >= obsList[i].y && p[j].y <= obsList[i].y+obsList[i].height) {
gameOver = true;
break;
}
if(gameOver)
break;
}
}
if(gameOver) {
clearInterval(updateTimer);
c.fillStyle = "#ff0000";
c.fillText("Game Over !", canvas.width/4, canvas.height/2);
return;
}
//清屏
c.fillStyle = "#000000";
c.fillRect(0, 0, 500, 500);
//绘制障碍物
c.fillStyle = "#00ff00";
for(var i = 0; i < obsList.length; i++) {
obsList[i].x -= obsSpeed;
obsList[i].draw(c);
}
//检测触摸
if(touch) {
bird.y -= upSpeed;
bird.draw(c, "up");
}
else {
bird.y += downSpeed;
bird.draw(c, "down");
}
//显示分数
c.fillStyle = "#ffffff";
c.fillText("score : " + score, 10, 30);
}, 20);
//制造障碍物
var obsTimer = setInterval(function(){
if(gameOver) {
clearInterval(obsTimer);
return;
}
var h = Math.floor(Math.random()*(canvas.height-obsDistance-20)+20);
var h2 = canvas.height - h - obsDistance;
var obs1 = new Obstacle(canvas.width, 0, 50, h);
var obs2 = new Obstacle(canvas.width, canvas.height-h2, 50, h2);
obsList.push(obs1);
obsList.push(obs2);
//移除越界障碍物
if(obsList[0].x < -obsList[0].width)
obsList.splice(0, 2);
}, obsInterval);
};

0 0