js实现flappy bird小游戏

最新推荐文章于 2022-04-18 18:17:43 发布

隅寒

最新推荐文章于 2022-04-18 18:17:43 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/qq_41881409/article/details/104802397

版权

本文介绍了如何使用JavaScript构建Flappy Bird小游戏的构架思路。主要包括小鸟的自由落体和点击上升运动，柱子的均匀移动以及得分计算规则。当小鸟通过柱子时得分，碰到柱子则游戏结束，3秒后可以重新开始。

摘要由CSDN通过智能技术生成

在这里插入图片描述

游戏构架思路

一、小鸟

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){