一直想用canvas写一个魂斗罗游戏，但是发现自己水平和学习能力差太多，收集好素材之后发现一个棍子英雄的小游戏挺火，就产生了写本文这个游戏的想法。直接上demo，建议在chrome下：点我。
简单说下写这个小游戏遇到的2个坑爹问题：
1.之前下的素材music.mp3这个文件，其实是3段音频。最后几秒是魂斗罗结束时的音乐，我想在结束的时候直接从调用最后几秒的音频。查了一下audio，很容易找到了audio的currentTime这个属性可以设置音频的播放位置。但是我本地测试的过程中，这个属性是一直不起作用的。后来百度（百度根本不好用），谷歌了半天才在stackoverflow上找到了一段描述，大概的意思就是需要一个sever环境，然后把测试环境放到了服务器环境就可以正常使用currentTime这个属性设置音频的播放起始位置了，一个大坑。
2.第二个大坑平时写transition的时候习惯的将transition-property写为all。比如transition:all 0s ease 0s;。在这个游戏中，当鼠标松开的时候棍子应该是以100% 100%的位置为远点进行旋转的。由于我写的是all，所以transfor-origin也产生了一个从默认的50% 50%到100% 100%的一个过渡过程，反应在页面上就是棍子开始明显转动的远点不是100% 100%的位置，但是动画完成到100%的时候原点是正确的。
剩下的就是逻辑实现，本来是想做到自适应和重置游戏的，最后多少都有点不足，重置游戏直接用刷新页面的暴力方式来解决了。页面有很多bug，不行就刷一次，哈哈。
最后附上下载包，渣代码，见笑。ContraHero
时间： 2024-08-01 20:05:23