zoukankan      html  css  js  c++  java
  • 一个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,设置错了,可能视图看起来会很异常

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

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

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

    第四,增加功能

  • 相关阅读:
    NBUT 1120 Reimu's Teleport (线段树)
    NBUT 1119 Patchouli's Books (STL应用)
    NBUT 1118 Marisa's Affair (排序统计,水)
    NBUT 1117 Kotiya's Incantation(字符输入处理)
    NBUT 1115 Cirno's Trick (水)
    NBUT 1114 Alice's Puppets(排序统计,水)
    188 Best Time to Buy and Sell Stock IV 买卖股票的最佳时机 IV
    187 Repeated DNA Sequences 重复的DNA序列
    179 Largest Number 把数组排成最大的数
    174 Dungeon Game 地下城游戏
  • 原文地址:https://www.cnblogs.com/admos/p/4462121.html
Copyright © 2011-2022 走看看