游戏地址：http://zangzhihong.jusukeji.com/flybird/index.html

html部分

<!DOCTYPE html>
  <!-- This html make by zzh 2017-11-9 -->
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   
  <!-- 未解决问题1，分数显示的逻辑问题。2定时器未完全清除的问题。 -->
  <!-- 制作该小游戏的过程中更加深刻的理解了定时器的使用（定时器使用后在某些场合会产生定时器叠加，导致速度越来越快，在管道的向左移动中，定时器必须绑定在每个管道上管道才能被正确的创建）
  ，以及单体单例模式的开发，对模块化的概念有了更深的理解，对帧动画的原理有了更加清晰的认识，对高级事件的用法更加熟悉 -->
  <!-- 后续需要改进的，游戏中场景的自适应宽高并且能让检测碰撞正常检测，对一些小地方的优化 -->
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  <title>小蠢鸟</title>
  <!--<link rel="icon" href="favicon.png" type="images/bird0.png">-->
  <link rel="shortcut icon" href="images/bird0.png" type="image/png">
  <link rel="stylesheet" href="css/flybird.css" />
  </head>
   
  <body>
  <div id="container"><!--游戏场景容器 -->
  <div class="head">  <!--游戏场景界面的标题 -->
  <img src="images/head.jpg" />
  <span class="jump_bird"></span>
  </div>
  <div class="score"></div><!--游戏场分数显示 -->
  <div class="start"><!--游戏开始按钮 -->
  <img src="images/start.jpg" />
  </div>
  <div class="slider"><!--游戏持续滑动的滑块 -->
  <img src="images/slider.jpg" />
  <img src="images/slider.jpg" />
  </div>
  <div id="flybird"></div><!--小鸟 -->
  <div class="pipe"></div><!--管道容器 -->
  <div class="gameover"><!--游戏结束界面 -->
  <img src="images/game_over.jpg" />
  </div>
  <div class="message"><!--游戏结束界面显示框 -->
  <img src="images/message.jpg" />
  </div>
  <div class="best_score"></div><!--最高成绩显示 -->
  <div class="result">
  <img src="images/ok.jpg" />
  </div>
  </div>
  <audio class='bgm' src="source/game_music.mp3" autoplay="autoplay" loop="loop"></audio><!--游戏主背景音乐 -->
  <audio class='gameover_bgm' src="source/game_over.mp3" autoplay="autoplay"></audio><!--游戏结束音乐 -->
  <audio class='up_bgm' src="source/bullet.mp3" autoplay="autoplay"></audio><!--点击小鸟上升的音乐 -->
  </body>
  <script type="text/javascript" src="js/flybird.js"></script>
   
  </html>

 js部分

//make by zzh 2017-11-9 var Game = {     wrap: document.getElementById('container'),//获取游戏舞台

head: document.getElementsByClassName('head')[0],//开始场景标题

start: document.getElementsByClassName('start')[0],//开始按钮

bird: document.getElementById('flybird'),//小鸟

message: document.getElementsByClassName('message')[0],//显示信息

result: document.getElementsByClassName('result')[0],//再玩一次

game_over: document.getElementsByClassName('gameover')[0],//游戏结束显示的图标

bgm: document.getElementsByClassName('bgm')[0],//背景音乐

gameover_bgm: document.getElementsByClassName('gameover_bgm')[0],//结束背景音乐

up_bgm: document.getElementsByClassName('up_bgm')[0],//小鸟向上的背景音乐

score_tip: document.getElementsByClassName('score')[0],//分数显示模块

bestScore: document.getElementsByClassName('best_score')[0],//最高成绩显示模块

speed: 0,//初始速度

score_index: 0,//初始化分数

// max_score: 0,

maxspeed: 10,//最大速度

downtime: null,//定时器的初始状态

uptime: null,

pipetime: null,

pipecreatetime: null,

init: function () {//游戏场景初始化

this.gameover_bgm.pause();

this.up_bgm.pause();

this.bgm.pause()

var _this = this;

this.result.onclick = function () {

Game.playagain();         }         this.start.onclick = function () {//click start button begin game，开始游戏

_this.bgm.play()

Game.score();

_this.score_tip.style.display = "block";

_this.head.style.display = 'none';

_this.start.style.display = 'none';

_this.bird.style.top = '200px';

_this.bird.className = 'bird';

Game.pipecreatetime = setInterval(Game.pipe, 3000);

document.onclick = function () {

_this.jump();             }

}     },     down: function () {//bird fly to down

Game.speed += 1;

Game.bird.className = 'flybirddown';

if (Game.speed >= Game.maxspeed) {

Game.speed = Game.maxspeed;

}         if (Game.bird.offsetTop >= 500 || Game.bird.offsetTop <= 0) {

Game.gameover()         }         Game.bird.style.top = Game.bird.offsetTop + Game.speed + 'px';     },     up: function () { //bird fly to up

Game.speed -=1;

Game.bird.className = 'flybirdup';

Game.up_bgm.play()

if (Game.speed <= 0) {

Game.speed = 0;

clearInterval(Game.uptime);

Game.downtime = setInterval(Game.down, 30);

}

Game.bird.style.top = Game.bird.offsetTop - Game.speed + 'px';     },     jump: function () {//bird jump methods

Game.speed = Game.maxspeed;

clearInterval(Game.uptime);

clearInterval(Game.downtime);

Game.uptime = setInterval(Game.up, 30);

},     rand: function (min, max) { //input mini num and max mun create a  random

return Math.floor(Math.random() * (max - min) + min);     },     pipe: function () {//create pipe

var in_pipe = document.getElementsByClassName('pipe')[0];

var sm_pipe = document.createElement('div');

sm_pipe.className = 'sm_pipe';

in_pipe.appendChild(sm_pipe);

var topheight = Game.rand(80, 300);

var bottomheight = 530 - 150 - topheight;

if (Game.score_index >= 1000) {

bottomheight = 530 - 125 - topheight;

} else if (Game.score_index >= 2000) {

bottomheight = 530 - 100 - topheight;

} else if (Game.score_index >= 2000) {

bottomheight = 530 - 75 - topheight;

} else if (Game.score_index >= 3000) {

bottomheight = 530 - 50 - topheight;

}

sm_pipe.innerHTML = '<div class="top_pipe"><div style="height:' + topheight + 'px"></div></div><div class="bottom_pipe"><div style="height:' + bottomheight + 'px"></div></div>'

var maxwidth = Game.wrap.offsetWidth;

sm_pipe.style.left = maxwidth + 'px';

// sm_pipe.pipetime = null;

clearInterval(sm_pipe.pipetime);

sm_pipe.pipetime = setInterval(function () {

maxwidth -= 3;

sm_pipe.style.left = maxwidth + 'px';

Game.collision()

if (maxwidth <= -60) {

clearInterval(sm_pipe.pipetime);

in_pipe.removeChild(sm_pipe);

}             if (sm_pipe.offsetLeft <= 30) {

Game.score();             }         }, 30)

},     collision: function () {//用小鸟去和生成的管道循环判断是否碰撞

var getallsm_pipe = document.getElementsByClassName('sm_pipe')

for (var i = 0; i < getallsm_pipe.length; i++) {

var top_pipe = getallsm_pipe[i].getElementsByClassName('top_pipe')[0];

var bottom_pipe = getallsm_pipe[i].getElementsByClassName('bottom_pipe')[0];

Game.knock(top_pipe, getallsm_pipe[i]);

Game.knock(bottom_pipe, getallsm_pipe[i]);

}     },     score: function () {//分数统计         Game.score_tip.innerHTML = '分数:' + Game.score_index;         Game.score_index++;

},     knock: function (obj1, obj2) {//碰撞检测

var l1 = Game.bird.offsetLeft;//小鸟左边距离边框的距离

var r1 = l1 + Game.bird.offsetWidth;//小鸟左边距离边框的距离加上自己的宽度

var t1 = Game.bird.offsetTop;//小鸟距离上边框的高度

var b1 = t1 + Game.bird.offsetHeight//小鸟距离上边框的高度加上自身的高度

var l2 = obj2.offsetLeft;//管道距离左边的距离

var r2 = l2 + obj2.offsetWidth;//管道距离左边的距离加上自身的宽度

var t2 = obj1.offsetTop;//管道距离上边的距离

var b2 = t2 + obj1.offsetHeight;//管道距离上边的距离加上管道自身高度的距离

//判断条件         if (r1 > l2 && l1 < r2 && b1 > t2 && t1 < b2) {

Game.gameover()         }     },     gameover: function () {//游戏结束

Game.gameover_bgm.play();

document.onclick=null;

Game.bgm.pause();

clearInterval(Game.downtime)

clearInterval(Game.uptime)

clearInterval(Game.pipecreatetime)

clearInterval(Game.pipetime)

// clearInterval(sm_pipe.pipetime);

Game.message.style.display = "block";

Game.head.style.display = "none";

Game.result.style.display = "block";

Game.game_over.style.display = "block";

Game.bird.style.top = '503px';

Game.bestScore.style.display='block';

if(localStorage.max_score){         if(Game.score_index>= localStorage.max_score)         {             localStorage.max_score= Game.score_index                                 Game.bestScore.innerHTML= localStorage.max_score

}else{                     Game.bestScore.innerHTML= localStorage.max_score                 }             }else{                 localStorage.max_score=0;             }

},     playagain: function () {//再玩一次

Game.bgm.play();

Game.score_index = 0;

Game.score();

Game.bestScore.style.display='none';

Game.head.style.display = 'none';

Game.start.style.display = 'none';

Game.bird.style.top = '200px';

Game.bird.className = 'bird';

Game.message.style.display = "none";

Game.head.style.display = "none";

Game.result.style.display = "none";

Game.game_over.style.display = "none";

Game.pipecreatetime = setInterval(Game.pipe, 3000);

document.onclick = function () {

Game.jump();         }     } } Game.init();

CSS部分

html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
#container {
position: relative;
top:0;
left:0;
overflow:hidden;
width: 343px;
height: 600px;
background:url('../images/bg.jpg');
background-size:100% 100%;
background-repeat:repeat;
margin:0 auto;
}
.head {
position: absolute;
top: 100px;
left: 50px;
animation: title 1s infinite alternate;
}
.jump_bird {
position: absolute;
top: 8px;
left: 190px;
width:40px;
height:26px;

animation: bird .4s infinite alternate;
}
.start{
position:absolute;
top:290px;
left:120px;
}
.slider{
position:absolute;
width:690px;
top:530px;
animation:slider 3s linear infinite;
}
.slider img{
float: left;
}
#flybird{
position:absolute;
top:200px;
left:50px;
}
.bird {
width: 40px;
height: 30px;
animation: bird .4s infinite alternate;
}
.flybirddown {
width: 40px;
height: 30px;
animation: birddown .4s infinite alternate;
}
.flybirdup {
width: 40px;
height: 30px;
animation: birdup .4s infinite alternate;
}
@keyframes slider{
0%{
left:0;
}

100%{
left:-343px;
}
}
@keyframes title{
0% {
top: 100px;

}

100% {
top: 120px;

}
}
@keyframes bird {
0% {

background: url('../images/bird0.png');
}

100% {

background: url('../images/bird1.png')
}
}
@keyframes birddown{
0% {
background: url('../images/down_bird0.png');
}

100% {
background: url('../images/down_bird1.png')
}
}
@keyframes birdup {
0% {
background: url('../images/up_bird0.png');
}

100% {
background: url('../images/up_bird1.png')
}
}

.sm_pipe{
position:absolute;
top:0;
width:62px;
height:530px;
}
.top_pipe {
width: 100%;
position: absolute;
top: 0;
background: url(../images/up_mod.png);
}
.top_pipe div {
background: url(../images/up_pipe.png) 0 bottom no-repeat;
}
.bottom_pipe {
width: 100%;
position: absolute;
bottom: 0;
background: url(../images/down_mod.png);
}
.bottom_pipe div {
background: url(../images/down_pipe.png) 0 top no-repeat;
}
.gameover {
display: none;
position: absolute;
top: 103px;
left: 46px;
animation:over 1s linear;
}
.message{
display:none;
position:absolute;
top:165px;
left:25px;
}
.result {
display: none;
position: absolute;
top: 338px;
left: 105px;
animation: ok 1s linear;
}
.score {
display: none;
position: absolute;
top: 80px;
left: 120px;
width:100px;
height:50px;
z-index:10;
color:#0094ff;
font-size:20px;
font-weight:bold;
text-align:center;
}
.best_score{
display: none;
position: absolute;
top: 257px;
left: 202px;
width: 100px;
text-align: center;
font-size: 20px;
color: red;
font-weight: bold;
}
@keyframes over{
0%{
top:-10px;
}
100%{
top:103px;
}
}

@keyframes ok{
0% {
left: 0px;
}

100% {
left: 105px;
}
}

原生js写的flybird小游戏的更多相关文章

  1. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  2. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  3. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

  4. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  5. 用HTML5+原生js实现的推箱子游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  7. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  8. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  9. C语言写的2048小游戏

    基于"基于C_语言的2048算法设计_颜冠鹏.pdf" 这一篇文献提供的思路 在中国知网上能找到 就不贴具体内容了 [摘 要] 针对2048的游戏规则,分析了该游戏的算法特点,对其 ...

随机推荐

  1. 【前端】诸葛io收集前端js报错信息

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/zhuge_error.html 一.什么是诸葛io 诸葛io就是通过分析用户的操作事件对用户数据,行为路径等进行分 ...

  2. 学习笔记︱Nvidia DIGITS网页版深度学习框架——深度学习版SPSS

    DIGITS: Deep Learning GPU Training System1,是由英伟达(NVIDIA)公司开发的第一个交互式深度学习GPU训练系统.目的在于整合现有的Deep Learnin ...

  3. SAS 9.4 的sid问题解决方案汇总（头疼...）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 因为经常出现sid出现问题,所以问题很多.最常 ...

  4. SystemVerilog语言简介(一)

    1. 接口(Interface) Verilog模块之间的连接是通过模块端口进行的.为了给组成设计的各个模块定义端口,我们必须对期望的硬件设计有一个详细的认识.不幸的是,在设计的早期,我们很难把握设计 ...

  5. PHP_保留两位小数并且四舍五入_保留两位小数并且不四舍五入

    php保留两位小数并且四舍五入 $num = 123213.666666; echo sprintf("%.2f", $num); php保留两位小数并且不四舍五入 php进一法取 ...

  6. HighCharts之气泡图

    HighCharts之气泡图 1.HighCharts之气泡图源码 bubble.html: <!DOCTYPE html> <html> <head> <m ...

  7. （六）java结构控制语句

    选择语句,也叫条件分支语句:if--else和switch--case:其中if--else中的else是可选的,但是switch--case中的case是必须的.     switch后的条件必须是 ...

  8. input【type="checkbox"】标签与字体对齐

    今天分享一个比较实用的技巧,在实际项目中我们会经常遇到表单的input标签多选和单选的问题,但是往往由于标签自身的样式和我们项目的风格很不搭调,就不能实现了,今天就来告诉大家怎么去实现吧. 第一种:利 ...

  9. template.process(root, out)的用法（shiro项目中来的九）

    Writer out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file), "utf-8" ...

  10. 【BZOJ2428】均分数据（模拟退火）

    [BZOJ2428]均分数据(模拟退火) 题面 BZOJ 题解 先说说黄学长的做法: 当温度比较高的时候,贪心 每次随机一个数,把他放进当前和最少的那一组里面 温度足够低的时候就完全随机然后转移 这样 ...