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

た入场券 2022-08-10 12:44 128阅读 0赞

[![51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png][]][51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png 1]

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

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

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

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

效果演示在这里：

> [flappy bird][flappy_bird]

首先闭一个包，在里面写个向外接口：

.....

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

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

.....

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

.....

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

首先是移动柱子：

.....

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

.....

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

.....

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

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

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

原文来自：[做一个略调皮的个人主页--游戏篇 ][--_]

[51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png
[51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png 1]: http://www.gbtags.com/gb/networks/uploadimg/51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png
[flappy_bird]: http://yansm.github.io/fromzero/lib/flappyBird/index.html
[--_]: http://www.gbtags.com/gb/share/4002.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关让我们来做一个属于自己的浏览器主页吧！

> 对于我们程序员来说每天最常用的就是浏览器。因为像google、百度、火狐、必应这些浏览器的主页不太美观壁纸也很少，所以我做了一个浏览器主页，目前做的功能比较少后续会慢慢完善

灰太狼/ 2023年10月08日 12:56/ 0 赞/ 38 阅读

相关个人主页信息提取器

本文共731个字，预计阅读时间需要3分钟。简介从研究人员的主页(HTML)中提取信息，并将信息自动分为三类(您可以添加更多的类)。支持中英文页面。可以分成的类别

亦凉/ 2023年02月19日 11:25/ 0 赞/ 73 阅读

相关用pygame做一个简单的python小游戏---生命游戏

用pygame做一个简单的python小游戏—生命游戏生命游戏（Game of Life）生命游戏(Game of Life)是剑桥大学约翰·何顿·康威(John

╰+攻爆jí腚メ/ 2022年09月15日 12:27/ 0 赞/ 283 阅读

相关做一个略调皮的个人主页--相册与随笔篇

> 目录 > > [做一个略调皮的个人主页--菜单篇][--] > > [做一个略调皮的个人主页--结构篇 ][--_] > > [做一个略调皮的个人主页--相册与随笔篇

痛定思痛。/ 2022年08月13日 07:29/ 0 赞/ 117 阅读

相关做一个略调皮的个人主页--菜单篇

[![ae5a76e5-b365-41c4-a6a5-939fbdd63ff2.png][]][ae5a76e5-b365-41c4-a6a5-939fbdd63ff2.png

╰半橙微兮°/ 2022年08月10日 12:55/ 0 赞/ 115 阅读

相关做一个略调皮的个人主页--结构篇

[![973364a8-279d-49ad-aa27-e6cbe7f42aa7.png][]][973364a8-279d-49ad-aa27-e6cbe7f42aa7.png

- 日理万妓/ 2022年08月10日 12:55/ 0 赞/ 108 阅读

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

[![51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png][]][51f53b59-4a4c-4cd6-94e1-76f2d4a1a1a2.png

た入场券/ 2022年08月10日 12:44/ 0 赞/ 129 阅读

相关做一个略调皮的个人博客--菜单篇

![9d58068f-ddb5-42ba-82b9-004da116d320.png][] 4 天前上传 [下载附件 (295.26 KB)][295.26 KB]

以你之姓@/ 2022年08月05日 13:10/ 0 赞/ 162 阅读

相关个人主页搭建历程

现在个人主页或者个人博客有很多快捷搭建的方法，快捷搭建参见我的另一篇博客： [个人博客的搭建-github pages + hexo vs wordpress][-githu

谁借莪１个温暖的怀抱￠/ 2022年05月31日 09:17/ 0 赞/ 212 阅读

相关做一个略调皮的个人主页--结构篇

[![973364a8-279d-49ad-aa27-e6cbe7f42aa7.png][]][973364a8-279d-49ad-aa27-e6cbe7f42aa7.png

落日映苍穹つ/ 2021年11月15日 13:44/ 0 赞/ 185 阅读