用js开发flappy bird

相信很多手机玩家都玩过flappy bird,这是一款一夜爆红的游戏,也是2014年最热门的手游。近段时间我也玩了起来,于是决定用js模拟一个。虽然在移动端做出的页面性能不及原生app,但这款js版flappy bird在最新的chrome和firefox浏览器运行起来还是蛮流畅,用手机页面测试也能跑的起来,我也一直在尝试着优化。

接下来的内容主要介绍如何用js开发flappy bird,其实主要是碰撞检测,我归纳了一番,这款游戏主要分为以下几部分:

小鸟

当你仔细观察这款游戏时,会发现游戏中的小鸟是在原地(X轴方向)不动的,只是在上下(Y轴方向)飞翔。开始游戏后,小鸟默认是做类似自由落体的运动,只有当你点击屏幕时,小鸟才向上运动,当达到最高点时然后再做自由落体运动。此处小鸟所涉及的运动,我采用了著名tween.js动画库,点击屏幕向上时采用easeOut减速 继续阅读

发表在 前端技术 | 标签为 , | 留下评论

做一个调色板

或者你和我一样,一开始对于如何去做一个调色板毫无思路。尤其在看到网上以及工具中各种形形色色的调色板后,更加不知所措。其实说到调色板,在html5中已经新增了获取颜色类型的文本框,即只需要一个<input type=”color”/>,然后再获取input的值即可,你可以点此来更多的了解这个新增元素,由于是html5元素,因此只有chrome和firefox能支持。自然,这个颜色文本框不是本篇所讨论的内容。

生成调色板

调色板主要的内容分为颜色格式和颜色种类。在web中常用的几种颜色格式主要有六位的十六进制、RGB以及HSL,在这里我们采用最普遍的十六进制。那么颜色种类呢,在调色板中显示多少种颜色才合适呢?还有这些颜色之间有什么内在的关系?这些都是接下来需要解决的问题 继续阅读

发表在 前端技术 | 标签为 | 留下评论

chrome开发工具中emulation的详解

对于web开发者来说,或许chrome开发工具并不陌生。编辑或copy html代码、修改或新增样式、又或者调试js代码,这些修改都能实时的在页面看到,这无疑是非常方便。但这些都不是本篇的重点,今天的主角是emulation,它也是开发工具中最重要的一项,主要是用于模拟手机浏览器页面的显示以及各种行为,随着chrome版本的不断升级,emulation也变得越来越健全,chrome39以后更是新增了标尺和快捷 继续阅读

发表在 前端技术 | 标签为 , , , | 留下评论

电池API之H5 battery

H5有很多不错的api,比如有关电池的api就是其中一个,它能实时反映设备当前电量。记得今年锤子手机发布会上,当时老罗说电池的工业技术完全没有跟上智能手机的发展,越来越大的屏幕,越来越丰富的手机应用,这些都是极其费电的。尽管现在的智能手机在电池电量显示或提示功能方面都做得不错了,但如果单从我们web技术来说,或许也能做点什么,其实可以把H5 battery当做在网页中显示设备电量的标志,我们可以根据H5 battery返回的不同状态 继续阅读

发表在 前端技术 | 标签为 | 留下评论

模态弹出框

最近比较忙,私事公事都比较多,好久没上来。

网厅改版时,遇到弹出框模块复用的问题,于是在此记录一番。为了良好的用户体验,所以我们经常用好的UI来模拟默认的alert,一般而言,一个网页有一两个弹出框很正常的,但也存在一个网页有多个弹出框的情况。那么问题来了,是用多个不同的弹出框以及多个半透明遮罩层,每一个独立起来呢,还是只用一个透明层,切换多种情况弹出框的隐藏。我们都知道,为了网站弹框的统一,因此很自然的采用同一样式。同一页面里,不同的弹出框的弹出,只是改变了 弹出框的标题 和 弹出框中间的内容 继续阅读

发表在 前端技术 | 标签为 | 留下评论