搜索
首页web前端js教程js实现Fly Bird游戏的全过程详解

js实现Fly Bird游戏的全过程详解

零下一度
零下一度
Jun 26, 2017 am 11:21 AM
javascriptjs实现小游戏

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

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

1.1 开始界面


start.gif

  • 游戏的大背景

  • 上下移动的游戏标题和翅膀摆动的小鸟

  • start 按钮，点击进入游戏界面

  • 一直移动的地面

    1.2 游戏界面


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?1.1.11"/></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> <!--草地1--><div id="grassLand2"></div> <!--草地2--></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 注释掉的页面效果


开始界面.jpg

2.3 JS

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

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


bird1.png

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 移动的草地
        var jsGrassLand1 = document.getElementById("grassLand1"); //获取草地1
        var jsGrassLand2 = document.getElementById("grassLand2"); //获取草地2

        var landTimer = setInterval(landRun,30); //让草地动起来的定时器
        function landRun() {
            if (jsGrassLand1.offsetLeft <= -343) {jsGrassLand1.style.left = "343px";
            }
            if (jsGrassLand2.offsetLeft <= -343) {jsGrassLand2.style.left = "343px";
            }jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + "px";jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + "px";
        }

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 ）


start01.gif


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

3. “游戏界面”的开发

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

3.1 小鸟

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

var bird = {flyTimer:null,//小鸟飞翔定时器
    wingTimer:null,//小鸟翅膀摆动定时器

    div:document.createElement("div"),showBird:function(parentObj) {this.div.style.width = "40px";this.div.style.height = "28px";this.div.style.backgroundImage = "url(img/bird0.png)";this.div.style.backgroundRepeat = "no-repeat";this.div.style.position = "absolute";this.div.style.left = "50px";this.div.style.top = "200px";this.div.style.zIndex = "1";

        parentObj.appendChild(this.div);  //将小鸟DIV插入游戏界面中
    },fallSpeed: 0, //小鸟下落速度
    flyBird: function(){ //控制小鸟飞翔下落的函数
        bird.flyTimer = setInterval(fly,40);function fly() {
            bird.div.style.top = bird.div.offsetTop + bird.fallSpeed++ + "px";if (bird.div.offsetTop < 0) {  
                bird.fallSpeed = 2; //这里用于控制小鸟不要飞出界面
            }if (bird.div.offsetTop >= 395) {
                bird.fallSpeed = 0;
                clearInterval(bird.flyTimer); //一旦飞到地面，清除定时器
                clearInterval(bird.wingTimer); //清除翅膀摆动定时器
            }if (bird.fallSpeed > 12) {
                bird.fallSpeed = 12;  //鸟的最大下落速度控制在12
            }
        }
    },wingWave: function() { //控制小鸟煽动翅膀的函数var up = ["url(img/up_bird0.png)", "url(img/up_bird1.png)"];var down = ["url(img/down_bird0.png)", "url(img/down_bird1.png)"];var i = 0, j = 0;
        bird.wingTimer = setInterval(wing,120);//逐帧动画，小鸟煽动翅膀function wing() {if (bird.fallSpeed > 0) {
                bird.div.style.backgroundImage = down[i++];if (i==2) {i = 0}
            }if (bird.fallSpeed < 0) {
                bird.div.style.backgroundImage = up[j++];if (j==2) {j = 0}
            }
        }
    },    
};

下面，实现点击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;
    };//待添加功能//点击开始按键进入游戏界面
}

添加小鸟后的效果


play01.gif

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


block示意图.png


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

function Block() {this.upDivWrap = null;this.downDivWrap = null;this.downHeight = baseObj.randomNum(0,150);//随机生成0-150之间的数，用于控制下管道的高度this.gapHeight = baseObj.randomNum(150,160);// 管道中间间隙宽度，通过调节大小，可以的控制游戏难度this.upHeight = 312 - this.downHeight - this.gapHeight;// 用来生成Div的方法this.createDiv = function(url, height, positionType, left, top) {var newDiv = document.createElement("div");
        newDiv.style.width = "62px";
        newDiv.style.height = height;
        newDiv.style.position = positionType;
        newDiv.style.left = left;
        newDiv.style.top = top;
        newDiv.style.backgroundImage = url;  //"url(/img/0.jpg)"return newDiv;
    };this.createBlock = function() {var upDiv1 = this.createDiv("url(img/up_mod.png)", this.upHeight + "px");var upDiv2 = this.createDiv("url(img/up_pipe.png)", "60px");this.upDivWrap = this.createDiv(null, null, "absolute", "450px");this.upDivWrap.appendChild(upDiv1);this.upDivWrap.appendChild(upDiv2);//生成上方管道var downDiv1 = this.createDiv("url(img/down_pipe.png)", "60px");var downDiv2 = this.createDiv("url(img/down_mod.png)", this.downHeight +"px");this.downDivWrap = this.createDiv(null, null, "absolute", "450px", 363 - this.downHeight + "px");this.downDivWrap.appendChild(downDiv1);this.downDivWrap.appendChild(downDiv2); //生成下方的管道

        jsWrapBg.appendChild(this.upDivWrap);
        jsWrapBg.appendChild(this.downDivWrap);
    };this.moveBlock = function() { //控制管道移动的方法this.upDivWrap.style.left = this.upDivWrap.offsetLeft - 3 + "px";this.downDivWrap.style.left = this.downDivWrap.offsetLeft - 3 + "px";
    };    
}

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

var baseObj = {//随机数
    randomNum: function(min, max) {return parseInt(Math.random() * (max - min + 1) + min);
    },//两个矩形元素之间的碰撞检测
    rectangleCrashExamine: function (obj1, obj2) {var obj1Left = obj1.offsetLeft;var obj1Width = obj1.offsetLeft + obj1.offsetWidth;var obj1Top = obj1.offsetTop;var obj1Height = obj1.offsetTop + obj1.offsetHeight;var obj2Left = obj2.offsetLeft;var obj2Width = obj2.offsetLeft + obj2.offsetWidth;var obj2Top = obj2.offsetTop;var obj2Height = obj2.offsetTop + obj2.offsetHeight;if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {return true;
            }return false;
    },
};

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

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

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

        var blocksArr = [];
        var blockDistance = baseObj.randomNum(130,250);
        var landTimer = setInterval(landRun,30); //让草地动起来的定时器
        function landRun() {
            if (jsGrassLand1.offsetLeft <= -343) {jsGrassLand1.style.left = "343px";
            }
            if (jsGrassLand2.offsetLeft <= -343) {jsGrassLand2.style.left = "343px";
            }jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + "px";jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + "px";

            if (blocksArr.length) {
                for (var i = 0; i < blocksArr.length; i++) {blocksArr[i].moveBlock();
                    var x =baseObj.rectangleCrashExamine(blocksArr[i].downDivWrap, bird.div);
                    var y = baseObj.rectangleCrashExamine(blocksArr[i].upDivWrap, bird.div);
                    var z = bird.div.offsetTop >= 390;
                    if (x || y || z) {
                        window.clearInterval(landTimer);//清除landTimer定时器bird.fallSpeed = 0; //小鸟下落jsWrapBg.onclick = null; //消除点击事件

                    }
                }
                if (blocksArr[blocksArr.length - 1].downDivWrap.offsetLeft < (450 - blockDistance)) {blockDistance = baseObj.randomNum(130,250);
                        var newBlock = new Block();
                        newBlock.createBlock();blocksArr.push(newBlock);
                }

                if (blocksArr[0].downDivWrap.offsetLeft < -50) {jsWrapBg.removeChild(blocksArr[0].downDivWrap);jsWrapBg.removeChild(blocksArr[0].upDivWrap);blocksArr.shift(blocksArr[0]);
                }
            }
        }

当前的游戏效果


play02.gif

3.3 计分器

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

        <div id="score">
            <div id="num1"></div>
            <div id="num2"></div>
            <div id="num3"></div>
        </div>

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;
}

js

        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);
        }

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


play03.gif

4.“结束界面”的开发

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

            <div id="gameOver">
                <img src="img/game_over.jpg" alt="game over" />
                <img src="img/message.jpg" alt="message" />
                <img id="ok" src="img/ok.jpg" alt="ok" />
            </div>
#gameOver{position: absolute;top: 100px;text-align: center;display: none;z-index: 1;
}

为“OK”按钮添加事件

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

最终效果


play04.gif

有兴趣的朋友，可以加群下载代码，然后加上音效

以上是js实现Fly Bird游戏的全过程详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
JavaScript是用C编写的吗？检查证据JavaScript是用C编写的吗？检查证据Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C语言编写的。1）C语言提供了高效性能和底层控制，适合JavaScript引擎的开发。2）以V8引擎为例，其核心用C 编写，结合了C的效率和面向对象特性。3）JavaScript引擎的工作原理包括解析、编译和执行，C语言在这些过程中发挥关键作用。

JavaScript的角色：使网络交互和动态JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。

JavaScript在行动中：现实世界中的示例和项目JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
4 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前ByDDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前ByDDD
显示更多

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7698
15
Java教程
1640
14
CakePHP 教程
1393
52
Laravel 教程
1287
25
PHP教程
1229
29
显示更多