纯JavaScript 实现flappy bird小游戏实例代码

纯纯JavaScript 实现实现flappy bird小游戏实例代码小游戏实例代码

主要介绍了纯JavaScript 实现flappy bird小游戏实例代码,b本文分七大步骤给大家介绍,非常不错，具有参考借鉴价值，需要的朋友可以

参考下

前言：前言：

《flappy bird》是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品，游戏于2013年5月24日上线，并在2014年2月突然暴红。2014年2月，

《Flappy Bird》被开发者本人从苹果及谷歌应用商店撤下。2014年8月份正式回归APP STORE，正式加入Flappy迷们期待已久的多人对战模式。游戏中

玩家必须控制一只小鸟，跨越由各种不同长度水管所组成的障碍。

正文：

var bird = document.getElementById("flybird");

//鸟下降

function down() {

speed += 1;

bird.id = 'flybird_down';

up_bgm.pause();//关闭小鸟上升音乐；

//当鸟下落速度达到最大值speedMax时，保持不变

if(speed >= speedMax) {

speed = speedMax;

}

//小鸟上升

function up() {

speed -= 0.8;

bird.id = 'flybird_up'//该id下的样式为小鸟下降的背景图片，并增加动画不断替换小鸟的背景图像，让小鸟翅膀动起来~

up_bgm.play()

if(speed <= 0) {

speed = 0;

clearInterval(upTimer);

DownTimer = setInterval(down, 30);

}

//每次向上跳时，先将向上、向下计时器清楚，防止叠加

clearInterval(upTimer);

clearInterval(DownTimer); //清除向下的定时器；

upTimer = setInterval(up, 30);

}

}

//判断小鸟落地或者小鸟跳出上边界，此时游戏结束

function floorText() {

var t1 = bird.offsetTop;

if(t1 > 396) {

}

步骤步骤3：通过以上步骤，小鸟可以起跳啦。接下来就是管道的创建。玩过：通过以上步骤，小鸟可以起跳啦。接下来就是管道的创建。玩过flappybird游戏的都知道，里面的管道的高度是随机的，但上下两个管道之间的游戏的都知道，里面的管道的高度是随机的，但上下两个管道之间的

距离是固定的。用距离是固定的。用Math.random()来产生随机数。来产生随机数。

//随机函数，用来随机产生钢管的高度

function rand(min, max) {

return parseInt(Math.random() * (max - min) + min);

}

//创建管道。在点击开始按钮后，通过计时器来创建

function create_pipe() {

var conduit_group = document.querySelector(".conduit_group");