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

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

a727e24d9128

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

做这个小游戏用到了:

html

css

jQuery

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

a727e24d9128

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

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

a727e24d9128

其中鸟和管道应该用面向对象来做,但是我原生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将它放置到后面那张背景的后面,这样反复,就可以变成一个无限背景。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值