![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5
文章平均质量分 63
2byte
面向过程编程骨灰级玩家
展开
-
HTML5小游戏研究(一):canvas初探,雏形:方块跳跃障碍
前几天玩了一个HTML5小游戏(http://www.lessmilk.com/game/box-jump/),很有意思,但不支持手机。想着学习一下前端知识和JS,决定仿制一个。先做个会动的方块由于没有经验,不知如何下手,先用CANVAS绘制基本元素,动画使用的是setInterval不停的清除画板再绘制的方法,有了下面一个会从左跑到右的方块。(会动的一瞬间感觉弱爆了,完全不是那种感觉)原创 2016-07-14 16:37:30 · 2475 阅读 · 2 评论 -
HTML5小游戏研究(二):完善上一节的问题
昨天打球打得不错,找到手感上来两个crossover,简直无情。心情好了,继续解决遗留问题。首先,看看需要搞定哪些问题加速跳跃各种bug碰撞检测(吐槽,CSDN的markdown编辑器有BUG,之前打到一半的文章,因为我编辑了一下另一篇,文章内容都没了,这是因为他的HTML5存储有问题,所有文章公用一个存储区域)加速跳跃之前的跳跃太呆了,完全匀速,我玩了好久原著找感觉,发现他的方块跳跃是有加原创 2016-07-20 17:32:26 · 1247 阅读 · 0 评论 -
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],原创 2016-07-29 17:23:24 · 1091 阅读 · 0 评论 -
使用html5 audio api音频可视化: Hello by OMFG
使用html5 audio api音频可视化在网易云上听Hello - OMFG,无意间点开了MV,看上去很动感,但是简单到就像一个前端动画。于是自己想照着做一个WEB。最终效果和源码已传至github。动画分析首先中间的OMFG四个字母是不动的。两侧跳跃的图形,应该跟音频相关,这个可以和音频文件的波形、频率对应。跳跃图形下方还有一小部分倒影,这个可以在作出上方图形后,再以其为参照来制作。忽明忽暗的原创 2017-03-14 14:58:54 · 12530 阅读 · 8 评论 -
HTML5小游戏研究(三):增加开始界面、声音、碰撞动画
开始界面设计好开始与结束、重置的变量关系,然后把字绘制出来就行。声音元素增加声音太简单了。只需引入相应的HTML,在跳跃函数和碰撞函数中加入播放就行。碰撞动画这个想了半天,没有想到好的方法,只能用最笨的使用多个CANVAS图层,在每个层上绘制一个动画,多个叠加后,效果和在一个层内是相同的。(求大神指导)但是缺点是显著的,将这个动画加入到完整的游戏内,显示速度FPS明显下降。小结难点是碰撞动画,首先要原创 2016-07-26 16:21:13 · 1472 阅读 · 0 评论 -
给Jplayer加上声音可视化效果
前一阵子有个网友通过之前写的一篇音频可视化的文章找到我,让我帮忙给他的音乐网站加个播放效果,自己正好没啥事做欣然答应。由于疏于学习,基础掌握的不好,我一直以为音频可视化是通过Web audio API实现的,脑子不会转弯,总觉得只能通过这种方法载入音频: var audio = new Audio("hello.mp4");然后打一套API的组合拳来读取音频数据: AudioContex...原创 2019-05-16 16:22:38 · 354 阅读 · 0 评论