js实现flappy bird小游戏

游戏构架思路

一、小鸟

1.x轴位置不变，y轴位置遵循*落体运动和点击向上运动（onmousedown，onmouseout）
2.向上飞和向下飞用不同的图片

二、柱子

1.x轴位置向左均匀移动，上面柱子因在屏幕外y轴位置要用负数表示，屏幕总宽度减去留在屏幕内下面柱子和上面柱子的总长度要等于固定的给鸟通过的宽度

三、得分

1.当鸟经过柱子时得分加一
2.鸟碰撞柱子时终止游戏，得出总分（y鸟>y下柱子 || y鸟<y上柱子）
3.3秒后点击重新开始游戏

源码

var context = canvas.getContext("2d");

/*小鸟部分*/

var img = new Image();

img.src = "依赖包/图片/鸟/下.png";

var movingTimer = null;

var birdX = 300;

var birdY = 100;

img. = function(){

if(!movingTimer){ //阻止更换图片 重新加载BUG

movingTimer = setInterval(function(){

context.clearRect(0,0,800,600);

drawBird();

columnDraw();

},30)

}

}

function drawBird(){

if(birdY <= 300){

birdY+= 5;

}

context.drawImage(img,birdX,birdY);

//阻止掉出屏幕外;

}

canvas.onmousedown = function(){

img.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3867415,1944110088&fm=26&gp=0.jpg";

birdY -= 50;

}

canvas.onmouseup = function(){

img.src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3867415,1944110088&fm=26&gp=0.jpg";

}

/*小鸟 end*/

/*障碍物*/

var columnX = 800; //起始点

var columnY = 0;

var columnImgA = new Image();

var columnImgB = new Image();

columnImgA.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583864905756&di=49e9e690579d351f47c01103e8d442c1&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1876847281%2C1117245850%26fm%3D214%26gp%3D0.jpg";

columnImgB.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583864905756&di=49e9e690579d351f47c01103e8d442c1&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1876847281%2C1117245850%26fm%3D214%26gp%3D0.jpg";

var columnArr = []; //柱子数据存储数组；

function createColumn(){

if(Math.random() >= 0.2 ){ //增加不确定性

var column = {};

column.positionY = -Math.round(Math.random()*100) - 50; //Y坐标;

column.positionX = 800; //Y坐标;

columnArr.push(column);

column.id = Math.random();

}

}

//定时创建 柱子 ；

var createColumnTimer = null;

createColumnTimer = setInterval(function(){

createColumn()

//console.log(columnArr);//定期创建柱子

},1500)

var mark = 0;

var same = null;

function columnDraw(){

for(var i in columnArr){

if(columnArr[i]){ //如果存在柱子;

columnArr[i].positionX -= 5;

context.drawImage(columnImgA,columnArr[i].positionX,columnArr[i].positionY);//绘制上面的个柱子；

context.drawImage(columnImgB,columnArr[i].positionX,columnArr[i].positionY + 350);//绘制下面的柱子；

}

//删除无用柱子;

if(columnArr[i].positionX <= -80){ //当柱子移出屏外的时候， 删除柱子;

columnArr.splice(i,1);

}

//判断死亡;

//经过柱子;

if(birdX+40 >= columnArr[i].positionX && birdX < columnArr[i].positionX + 70){

if(columnArr[i].id != same){ //分数增加;
mark ++ ;
same = columnArr[i].id;
document.getElementById("mark").innerHTML = "得分："+mark;


}
if(birdY <= columnArr[i].positionY + 230 || birdY >= columnArr[i].positionY + 350 ){ //柱子长度 除去在屏幕外的长度 是柱子一端的 坐标;

//小鸟飞过了柱子的一端;

console.log("die");

var oRes = document.("div");

oRes.className = "res";

var src = null;

if(mark < 10 ){

src = "依赖包/图片/奖牌/铜牌.png";

}else if(mark >= 10 && mark < 100 ){

src = "依赖包/图片/奖牌/银牌.png";

}else{

src = "依赖包/图片/奖牌/金牌.png";

}

oRes.innerHTML = "<h2>U Div</h2> <p>得分 :"+mark+"</p> <img src="+src+"> "

document.body.(oRes);

clearInterval(movingTimer);

setTimeout(function(){

oRes.innerHTML="点击后游戏重新开始"；

document.onclick = function(){

location.reload();

}

},3000)


}

}

}

}
	</script>

</html>