JavaScript实现Fly Bird小游戏
作者：Runner_Yang 发布时间：2024-04-25 13:11:46
标签：js,Fly,Bird,小游戏
本教程为大家分享了Fly Bird小游戏的制作流程，供大家参考，具体内容如下
1.分析页面结构，理清需求和功能
游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。
1.1 开始界面
start.gif
游戏的大背景
上下移动的游戏标题和翅膀摆动的小鸟
start 按钮，点击进入游戏界面
一直移动的地面
1.2 游戏界面
play.gif
显示越过障碍数量的计分器
移动的障碍物，分别是上管道和下管道
点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，
当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面
1.3 结束界面
GAMEOVER 提示面板
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> <!--草地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），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。
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);
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，同时在数组中删除。
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 计分器
游戏中的计分器相对较好实现
<div id="score">
<div id="num1"></div>
<div id="num2"></div>
<div id="num3"></div>
</div>
var jsScore = document.getElementById("score");
var jsNum1 = document.getElementById("num1");
var jsNum2 = document.getElementById("num2");
var jsNum3 = document.getElementById("num3");
var score = 0;
今天先这样了，改天再写。哈哈
来源：http://www.jianshu.com/p/45d994d04a25
0
投稿猜你喜欢
python 实现单例的方法第一种方法：使用基类New 是真正创建实例对象的方法，所以重写基类的new 方法，以此保证创建对象的时候只生成一- 这是为了实现一个效果，而提前作的测试代码！看起来很简单的一个东西，到这会，大约四个小时过去了。不知道是IE6的BUG；还是我自已的BUG！有
- 创建一个名为templatetags的python module。新建一个名为verbose_name.py的文件。from django
- Python语言的崛起让大家对web、爬虫、数据分析、数据挖掘等十分感兴趣。数据挖掘就业前景怎么样？关于这个问题的回答，大家首先要知道什么是
- globalStorage 这个也是html5中提出来，在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，并且存储容
- 一个站点成功与否，不是在于所用的程序语言是PHP还是ASP，也不在于用BLOG建站或是CMS建站，内容和专业很重要。博客很好起步，CMS体系
- 具体代码如下所示：#!/usr/bin/python# coding=utf-8from ftplib import FTPimport t
- 很多时候，我们需要对List进行排序，Python提供了两个方法，对给定的List L进行排序：方法1.用List的成员函数sort进行排序
- 只要把下面代码放到index.asp或者default.asp中，只要在首页代码顶部引用call Check_Wap()，这个也是我的工程中
- 获取计算机名# 获取计算机名，常用的方法有三种，但最常用的是第一种import osimport socket# method onenam
- 概述最近在一家公司实习，入职第一个大一点的需求是将公司开发的两个winstore app的排名信息进行可视化。大概挑选了下，排除了Flask
- 同级目录(兄弟目录)调用看书看得好好的，一写代码就出错！！！这个问题是大家初学Python的时候会遇到的一个很常见的问题，然后我们去搜网上的
- 在ASP与ASP.NET之间共享对话状态(1)ASP实现原来的ASP对话只能将对话数据保存在内存中。为了将对话数据保存到SQL Server
- 在程序调试中，有时候需要知道有多少Session变量在使用，她们的值如何？由于Session对象提供一个称为Contents的集合(Coll
- 本文实例讲述了python实现连接mongodb的方法。分享给大家供大家参考。具体分析如下：通过pymongo可以很容易的链接到mongod
- 题目一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？程序分析因为168对于指数 * 来说实在太小了，
- 这篇文章主要介绍了Python for循环通过序列索引迭代过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- 首先确定你要爬取的目标网站的表单提交方式，可以通过开发者工具看到。这里推荐使用chrome。这里我用163邮箱为例打开工具后再Network
- python中获取字典的key列表和value列表 # -*- coding: utf-8 -*-# 定义一个字典dic = {'剧
- 前言Python爬虫要经历爬虫、爬虫被限制、爬虫反限制的过程。当然后续还要网页爬虫限制优化，爬虫再反限制的一系列道高一尺魔高一丈的过程。爬虫
