做一个略调皮的个人主页--游戏篇

最近严重加班,非常严重··· 

万恶的discuz啊,还有万恶的环境问题,死了算了。

这个应该是这个系列最后一篇啦,之后我会做另一个想法。主要是用来查看文章的一个主页,期间发些自己觉得好玩的东西出来。

这一篇主要介绍一下我做的一个flappy bird。由于是自己js手写的,效率肯定不高,就当拿来玩的罢。浏览器不好回很卡哦。

效果演示在这里:

flappy bird

首先闭一个包,在里面写个向外接口:

.....

然后分步骤去实现这个东西。

第一步,是解决自由落体,这个我们借用一下google在某年牛顿诞辰在主页上放的一个苹果自由落体的源码。去掉水平移动,

.....

把这个过程附在键盘事件上就ok了。像这样:

.....

然后是柱子的移动和增加,移动整个是ul标签的移动,这个移动的时候会随着距离增加柱子,整个过程差不多就是这样。

首先是移动柱子:

.....

 当条件满足的时候,就增加柱子,增加柱子就是写进去一些html代码即可:

.....

 之后是最后一步,验证碰撞,这个就是获取小鸟的top坐标,加上他本身的体积与柱子比较的过程。

.....

 这样其实大体的功能就实现了,之后就是增加个endgame呀,resetgame呀方法,让它可以重复玩,就ok啦。

主要的思路就是拆分拆分再拆分,写出n个方法来在组装成一个,这样既可以复用,思路也会很明确。

可能效率不是很好,毕竟自己只是想实现效果,好吧,本来对小效率这东西,研究的就不多,希望以后能够不断充实。哈哈。

原文来自:做一个略调皮的个人主页--游戏篇

posted @   igeekbar  阅读(187)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2012-10-22 分享两个超棒的帮助你生成占位图片(placeholder image)的在线工具
2012-10-22 一个超棒的帮助你了解科技公司如何盈利的网站 - rcs.seerinteractive.com
2012-10-22 19套最新的免费图标字体集
2012-10-22 47款超酷超实用的CSS3技巧教程
2011-10-22 随机字符变换效果的jQuery插件开发教程

中文互联: GBin1.com | RSS订阅 | 邮件订阅 | 手机订阅

点击右上角即可分享
微信分享提示