一个js小游戏----总结

花了大概一天左右的功夫实现了一个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，设置错了，可能视图看起来会很异常

 

下面说说要改进的地方，第一个，就是要更加模块化

第二，控制移动在例如前进突然向上，这个切换不是很流畅，这个暂时还没有什么好的思路去改进

第三，试着考虑代码的复用

第四，增加功能

转载于:https://www.cnblogs.com/admos/p/4462121.html