花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用webGl之类的,单纯的逻辑+对DOM的操作,算是一次试手吧,之所以没有继续去完善,是因为想要整合一下,各个模块要更清晰,大体的设计是按MVC来的,但是对控制器那一块还不满意,设计过程中比较得意的是碰撞检测吧,因为我用了一个数组来维护怪物的生灭,怪物产生则数组push,怪物消失则用splice来从数组中删除,要注意要用splice而不要用delete,有些人可能图省事用delete,那就错了,会造成稀疏数组,浪费很多性能,而且数组的长度也是有限的,数组太长很吃性能。每一个怪物都是一个对象,带有id(total),表示它是从游戏开始至今的第几只怪,这个id也就是dom中怪物元素的Id,方便我们使用document.getElementById来选择它然后控制,操作dom应该只在更新视图的时候操作,可是碰撞检测也需要怪物的位置,所以这个对象中还维护有怪物的横纵坐标,这样可以使得逻辑更清晰。接着就是运动,dom中的运动就是不停的改变像素点,这里我用setInterval来进行的,一共有两个set,分别对应怪物的移动和怪物的产生。
原理大概就是这样。下面说说这里有一些坑,当然,首先要说的是,你操作dom时用document.getElementById("").style.cssText得到的是一个类似于“192px“的字符串,而你要修改的是192,然后还要把它改成字符串重新赋值回去,来达到修改的目的,当然,你也可以传个数字回去,浏览器会自动帮你改成字符串,不过这不是很一定,例如你使用document.getElementById("").style.top,这就会出现错误。
还有这只是个小游戏,所以我样式表直接写在style标签之间的,如果你使用link去的话那么修改样式则要注意修改外部样式表的js函数在各个浏览器并不一致,我会在随后的库里面封装。
关于上面刚刚说的将”192px“这个字符串变为数字,除了用数组的方法其实使用parseInt最好了,以前只把parseInt做进制转换,这种用法还是最近刚注意到
在js改变或者生成dom元素时,如果是块级元素要特别注意它的position,设置错了,可能视图看起来会很异常
下面说说要改进的地方,第一个,就是要更加模块化
第二,控制移动在例如前进突然向上,这个切换不是很流畅,这个暂时还没有什么好的思路去改进
第三,试着考虑代码的复用
第四,增加功能