html做的小游戏,用Html做一个“快乐鸟”小游戏

入门学习前端的时候做了这么一个简单的小游戏，为了将自己所学到的知识运用起来。

这里可以看出还是有BUG的，死亡动画不是在死亡的瞬间触发

做这个小游戏用到了：

html

css

jQuery

然后这个小游戏的图片素材用到了：

其实用原生的js也是可以完成的，但是为什么要用jQuery？因为我直接跳过了原生JS的学习...只有等空余的时候，好好的找本书研究一下原生的js。

下面是这个小游戏的大致流程：

其中鸟和管道应该用面向对象来做，但是我原生JS只学习了最基础的部分，而且JS在ES5的时候还没有类的概念，只能使用构造函数来模拟一个类，在ES6的时候才加入了class这个关键字，但是我知道ES6的时候，已经是在完成这个小游戏之后了。

从上面的素材图片只有4张可以看得出来，html和CSS的搭建是没有太大难度的。所以本文着重讲解JS的部分。

这里值得一说的是，我CSS上面是用的子绝父相的定律，来摆放鸟和管道，其中管道的代码如下所示：

/* 上边的管道 */

.tubeTop {

width: 90px;

height: 420px;

background: url(../image/bird/ColumnSprite.png) no-repeat 0 0;

background-size: cover;

transform: rotate(180deg);

}

/* 下边的管道 */

.tubebotton {

width: 90px;

height: 420px;

background: url(../image/bird/ColumnSprite.png) no-repeat 0 0;

background-size: cover;

margin-top: 100px;

}

.tube {

position: absolute;

top: 0;

}

可以看得出来，其实上下管道用的是一张图片，只是将它旋转了180度，然后包含在一个div中，这样只要设置父盒子的位置，上下的两根管道的位置就不需要再去设置。

模型控制：

其实整个游戏，鸟是没有动的，我是让背景向前移动，这里有一点需要注意背景我并不是拼接了很多张图，而是仅仅用了两张图，一张在可视范围内，一张在可视范围外，当前面的那张移出可视范围的时候，再用JS将它放置到后面那张背景的后面，这样反复，就可以变成一个无限背景。