入门学习前端的时候做了这么一个简单的小游戏,为了将自己所学到的知识运用起来。
这里可以看出还是有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将它放置到后面那张背景的后面,这样反复,就可以变成一个无限背景。