JavaScript实现Fly Bird小游戏

向右看齐 2022-07-10 05:28 149阅读 0赞

转载自：http://www.jianshu.com/p/45d994d04a25

### 1.分析页面结构，理清需求和功能 ###

游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。

#### 1.1 开始界面 ####

![strip][]

start.gif

*  游戏的大背景
 *  上下移动的游戏标题和翅膀摆动的小鸟
 *  start 按钮，点击进入游戏界面
 *  一直移动的地面
    
    #### 1.2 游戏界面 ####

![strip 1][]

play.gif

*  显示越过障碍数量的计分器
 *  移动的障碍物，分别是上管道和下管道
 *  点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，
 *  当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面
    
    #### 1.3 结束界面 ####
 *  Game over 提示面板
 *  OK 按钮

### 2. 开发“开始界面” ###

考虑到草地的移动效果，我们在页面中加入两个草地

#### 2.1 HTML ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Fly Bird</title>
            <link rel="stylesheet" type="text/css" href="css/index.css"/>
        </head>
        <body>
            <div id="wrapBg">  
                <div id="headTitle"> 
                    <img id="headBird" src="img/bird0.png" alt="小鸟" /> 
                </div>
                <button id="startBtn" ></button> 
                <div id="grassLand1"></div> 
                <div id="grassLand2"></div> 
            </div>
        </body>
    </html>

#### 2.2 CSS ####

#wrapBg{ /*游戏背景*/ width: 343px;height: 480px; margin: 0 auto; background-image:url(../img/bg.jpg); position: relative; top: 100px; overflow: hidden; } #headTitle{ /*开始标题*/ width: 236px;height: 77px; background-image: url(../img/head.jpg); position: absolute; left: 53px; top: 100px; } #headBird{ /*开始标题中的小鸟*/ float:right; margin-top: 25px; } #startBtn{ /*开始按钮*/ width: 85px;height: 29px; padding: 0;margin: 0; background-image: url(../img/start.jpg); position: absolute;left: 129px;top: 250px; } #grassLand1{ /*草地1*/ height: 14px;width: 343px; background-image: url(../img/banner.jpg); position: absolute;top: 423px; } #grassLand2{ /*草地2*/ height: 14px;width: 343px; background-image: url(../img/banner.jpg); position: absolute;top: 423px;left: 343px; }

将wrapBg中的overflow:hidden 注释掉的页面效果

![1240][]

开始界面.jpg

#### 2.3 JS ####

小鸟煽动翅膀的效果需要用到逐帧动画的原理

> 逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。

![1240 1][]

bird1.png

![1240 2][]

bird0.png

##### 2.3.1 开始标题的摆动 #####

var jsHeadTitle = document.getElementById("headTitle");// 获取标题 var jsHeadBird = document.getElementById("headBird"); // 获取标题中小鸟 var Y = 3;//标题的摆动幅度 var index = 0; var imgArr = ["img/bird0.png","img/bird1.png"] //将小鸟图片路径放入一个数组，利用逐帧动画的原理做出小鸟翅膀摆动的样子 var headWaveTimer = setInterval(headWave,200); //设置标题上下摆动的定时器 function headWave() { Y *= -1; jsHeadTitle.style.top = jsHeadTitle.offsetTop + Y + "px"; jsHeadBird.src = imgArr[index++]; if (index == 2) { index = 0; } }

##### 2.3.2 移动的草地 #####

### 2.3.3 Start按键 ###

var jsStartBtn = document.getElementById("startBtn"); jsStartBtn.onclick = function() { //为start按键添加点击事件处理程序 jsHeadTitle.style.display = "none"; //隐藏标题 clearInterval(headWaveTimer); //关闭让标题摆动的定时器 jsStartBtn.style.display = "none"; //隐藏按键 //待添加功能 //点击开始按键进入游戏界面 }

完成后的效果（注释掉了wrapBg中的overflow:hidden ）

![strip 2][]

start01.gif

接下来我们开发“游戏界面”

### 3. “游戏界面”的开发 ###

游戏界面中有三样元素，分别是“小鸟”，“障碍”，和“计分器”，我们依次来创建相应的对象。

#### 3.1 小鸟 ####

首先，创建小鸟的对象， bird.js 文件。

下面，实现点击start按钮时，加载小鸟。(在之前的代码基础上添加)

jsStartBtn.onclick = function() { //为start按键添加点击事件处理程序
        jsHeadTitle.style.display = "none"; //隐藏标题
        clearInterval(headWaveTimer); //关闭让标题摆动的定时器
        jsStartBtn.style.display = "none"; //隐藏按键
        bird.showBird(jsWrapBg); //插入小鸟到界面中
        bird.flyBird(); //控制小鸟飞翔下落
        bird.wingWave(); //逐帧动画，小鸟煽动翅膀
        jsWrapBg.onclick = function(){
            bird.fallSpeed = -8;
        };
        //待添加功能
        //点击开始按键进入游戏界面
    }

添加小鸟后的效果

![strip 3][]

play01.gif

#### 3.2 障碍（上管道和下管道） ####

![1240 3][]

block示意图.png

障碍分为上管道和下管道，如示意图所示结构嵌套，这样就可以通过随机设置DownDiv2的高度和gapHeight的高度，来改变生成障碍的形态  
block.js

公共对象文件 baseObj.js ，用来提供随机数，和两个矩形div的碰撞检测

下面我的想法是在start按钮点击的时候创建一个block，把这个block存储到数组 blocksArr 中，在 landTimer 定时器的方法 landRun 中检查此数组的长度，如果数组不为空数组，那么就让数组中所有的block移动。

检查数组中最后一个block离开的距离，达到一定距离，就重新new 一个block，添加到数组。

检查数组中第一个block，一旦达到一定位置，就在结构中移除downDivWrap 和 upDivWrap，同时在数组中删除block。

当前的游戏效果

![strip 4][]

play02.gif

#### 3.3 计分器 ####

游戏中的计分器相对较好实现，我们就实现最大为三位数的计分器吧。  
html

css样式

#score{ position:absolute; left: 130px; top:50px; z-index: 1; } #score div{ height: 39px; width: 28px; float: left; background-image: url(../img/0.jpg); display: none; }

var jsScore = document.getElementById("score");
            var jsNum1 = document.getElementById("num1");
            var jsNum2 = document.getElementById("num2");
            var jsNum3 = document.getElementById("num3");
            var score = 0;

实现计数器功能，最重要的是如何判断走过水管的数量，我们以水管的位置来判断。bird的定位left为50px，水管的宽度是62px，当水管越过小鸟的时候，水管距离它父级的定位 offsetLeft 是 -12px。每当有一个水管到达此位置，score++；  
在start按钮的事件处理程序中加入

jsNum1.style.display = "block";// 在点击开始之后，让计数器显示出来。

if (blocksArr[0].downDivWrap.offsetLeft == -12) {
                    score++;//积分面板                 if (score < 10) {
                    jsNum1.style.backgroundImage = "url(img/" + score + ".jpg)";
                } else if (score < 100) {
                    jsNum2.style.display = "block";
                    jsNum1.style.backgroundImage = "url(img/" + parseInt(score/10) + ".jpg)";
                    jsNum2.style.backgroundImage = "url(img/" + score%10 + ".jpg)";
                } else if (score < 1000) {
                    jsNum3.style.display = "block";
                    jsNum1.style.backgroundImage = "url(img/" + parseInt(score/100) + ".jpg)";
                    jsNum2.style.backgroundImage = "url(img/" + parseInt(score/10)%10 + ".jpg)";
                    jsNum3.style.backgroundImage = "url(img/" + score%10 + ".jpg)";
                }
                    console.log(score);         }

目前效果 ，计数器功能完成。

![strip 5][]

play03.gif

### 4.“结束界面”的开发 ###

当小鸟和管道碰撞或者和地面碰撞时候，隐藏计分器，弹出结束面板。  
结束界面主要有“结束面板”和“ok”按钮，这里需要为“ok”按钮添加点击事件。

#gameOver{ position: absolute; top: 100px; text-align: center; display: none; z-index: 1; }

为“OK”按钮添加事件

jsOkBtn.onclick = function() { window.location.href = "index.html"; //刷新页面 }

最终效果

![strip 6][]

play04.gif

有兴趣的朋友，可以下载代码，然后加上音效。OK，结束。

> [GitHub代码下载传送门][GitHub]

好了，下面是广告时间。前端学习群，前200人免费入群。现在还不满，从速哦！入群加 **笑笑微信：iamaixiaoxiao**。

![Center][]

[strip]: /images/20220709/0ac496f9b5754ccfbb68f76996633aa7.png
[strip 1]: /images/20220709/3a5e0892615444caa514edfe63361458.png
[1240]: /images/20220709/db6d36365f914e34836d18f4cdd437ff.png
[1240 1]: /images/20220709/a1b8a94f5b154665878681402bf4f1f7.png
[1240 2]: /images/20220709/f8af3ab6f4a243699572af5d5122c042.png
[strip 2]: /images/20220709/c86e28fb6dce4626b92bbb0d188774d6.png
[strip 3]: /images/20220709/26eef4b90a904420a5b4b7b02a101c16.png
[1240 3]: /images/20220709/3df63a37341a455db5b0cae6e9d81f80.png
[strip 4]: /images/20220709/5e56eca03a16486894bf16cbc44ada79.png
[strip 5]: /images/20220709/40646c452e004493a19f38cc04c4e965.png
[strip 6]: /images/20220709/6d701c0a871f4b2ab73f3100679219b9.png
[GitHub]: https://github.com/YangQiGitHub/FlyBird
[Center]: /images/20220709/ffcf924d72cd4368bfd15cea73b5c17d.png