首页 > 代码库 > js实现魂斗罗版的棍子英雄小游戏ContraHero

js实现魂斗罗版的棍子英雄小游戏ContraHero

一直想用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

js实现魂斗罗版的棍子英雄小游戏ContraHero