2byte

前几天玩了一个HTML5小游戏(http://www.lessmilk.com/game/box-jump/)，很有意思，但不支持手机。想着学习一下前端知识和JS，决定仿制一个。先做个会动的方块由于没有经验，不知如何下手，先用CANVAS绘制基本元素，动画使用的是setInterval不停的清除画板再绘制的方法，有了下面一个会从左跑到右的方块。（会动的一瞬间感觉弱爆了，完全不是那种感觉）

昨天打球打得不错，找到手感上来两个crossover，简直无情。心情好了，继续解决遗留问题。首先，看看需要搞定哪些问题加速跳跃各种bug碰撞检测(吐槽,优快云的markdown编辑器有BUG，之前打到一半的文章，因为我编辑了一下另一篇，文章内容都没了，这是因为他的HTML5存储有问题，所有文章公用一个存储区域）加速跳跃之前的跳跃太呆了，完全匀速，我玩了好久原著找感觉，发现他的方块跳跃是有加

关卡本来按照只有一关的思路设计，整个逻辑都是循环，突然我说要加上多个关卡，猛的不适应，考虑了一下，无耻的去看原著的代码，发现原著是使用了一个数组，来定义地图上障碍物的位置与高度，于是完全拷贝过来为己用。var levelMap=[ [0, 0, 0, 0, 0, 50, 60, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

使用html5 audio api音频可视化在网易云上听Hello - OMFG，无意间点开了MV，看上去很动感，但是简单到就像一个前端动画。于是自己想照着做一个WEB。最终效果和源码已传至github。动画分析首先中间的OMFG四个字母是不动的。两侧跳跃的图形，应该跟音频相关，这个可以和音频文件的波形、频率对应。跳跃图形下方还有一小部分倒影，这个可以在作出上方图形后，再以其为参照来制作。忽明忽暗的

开始界面设计好开始与结束、重置的变量关系，然后把字绘制出来就行。声音元素增加声音太简单了。只需引入相应的HTML，在跳跃函数和碰撞函数中加入播放就行。碰撞动画这个想了半天，没有想到好的方法，只能用最笨的使用多个CANVAS图层，在每个层上绘制一个动画，多个叠加后，效果和在一个层内是相同的。（求大神指导）但是缺点是显著的，将这个动画加入到完整的游戏内，显示速度FPS明显下降。小结难点是碰撞动画，首先要

前一阵子有个网友通过之前写的一篇音频可视化的文章找到我，让我帮忙给他的音乐网站加个播放效果，自己正好没啥事做欣然答应。由于疏于学习，基础掌握的不好，我一直以为音频可视化是通过Web audio API实现的，脑子不会转弯，总觉得只能通过这种方法载入音频： var audio = new Audio("hello.mp4");然后打一套API的组合拳来读取音频数据： AudioContex...