一个js小游戏----总结
2015-04-28 09:33
176 查看
花了大概一天左右的功夫实现了一个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,设置错了,可能视图看起来会很异常
下面说说要改进的地方,第一个,就是要更加模块化
第二,控制移动在例如前进突然向上,这个切换不是很流畅,这个暂时还没有什么好的思路去改进
第三,试着考虑代码的复用
第四,增加功能
原理大概就是这样。下面说说这里有一些坑,当然,首先要说的是,你操作dom时用document.getElementById("").style.cssText得到的是一个类似于“192px“的字符串,而你要修改的是192,然后还要把它改成字符串重新赋值回去,来达到修改的目的,当然,你也可以传个数字回去,浏览器会自动帮你改成字符串,不过这不是很一定,例如你使用document.getElementById("").style.top,这就会出现错误。
还有这只是个小游戏,所以我样式表直接写在style标签之间的,如果你使用link去的话那么修改样式则要注意修改外部样式表的js函数在各个浏览器并不一致,我会在随后的库里面封装。
关于上面刚刚说的将”192px“这个字符串变为数字,除了用数组的方法其实使用parseInt最好了,以前只把parseInt做进制转换,这种用法还是最近刚注意到
在js改变或者生成dom元素时,如果是块级元素要特别注意它的position,设置错了,可能视图看起来会很异常
下面说说要改进的地方,第一个,就是要更加模块化
第二,控制移动在例如前进突然向上,这个切换不是很流畅,这个暂时还没有什么好的思路去改进
第三,试着考虑代码的复用
第四,增加功能
相关文章推荐
- 做了动物的战争(一个js小游戏)之后的问题总结
- 分享一个比较简单的canvas+js 飞翔的小鸟小游戏
- js小游戏,猜一个1~99的数字(version2.in 2012.11.2)
- 每日总结:每个 GROUP BY 表达式必须至少包含一个不是外部引用的列、加载页面时调用Js方法、调用Js文件中的方法
- 我在公司做的一个小游戏的总结感想
- 用JS做了一个贪吃蛇小游戏,求顶贴..
- Eric's Picross Game 一个用JS和CSS(当然在HTML里)写的WEB小游戏.
- 用JS做了一个贪吃蛇小游戏,求顶贴..
- 技术总结:关于JS执行前台和后台顺序的.另外一个是前后和后台变量的交互的.
- 【JavaScript】(一)解读一个js小游戏
- Ajax (部分二:prototype.js代码前半部)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值
- 【分享】曾经做的一个JS小游戏——《Battle City》
- 一个简单JS小游戏
- Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值
- 曾经做的一个JS小游戏——《Battle City》
- 一个小游戏,保存下来作为一个知识总结
- 一个用原生js实现的小游戏---FlappyBird
- js实现一个贪吃蛇的小游戏(已经没有Bug了,已经完善)
- js做的一个猜数字小游戏