贪吃蛇--js版 分享

在学习和总结N多前人的分享后,终于完成了js版-贪吃蛇的小游戏,逻辑还算清楚、简单。

开源分享地址:

http://codepen.io/Bantina/pen/xOprOo

此版主要是js编写,稍用了Canvas。

功能说明:键盘方向键控制,鼠标控制,计分制,加速/减速,重置游戏

简要分析:1.)贪吃蛇本身是一个 对象数组(snake_array),

       数组中的每一个对象代表了构成贪吃蛇的每一个小格的左上角顶点坐标(x,y),

       蛇身就是利用Canvas绘制了这些顶点坐标所在的每一个小格为白色。

     2.)食物(food) 对象的x,y属性分别代表了食物所在小格的左上角顶点坐标,

      并且是一个随机数,要注意的是 必须让它随机定位到画布方格坐标内。

     3.)还有一个关键点是蛇的运动。

      本质上是在每次改变了蛇头坐标后用setInterval()调用绘制蛇身的方法,使重绘。

      需要注意的是 每移动一格 相当于蛇头snake_array[0]向前一格(注意移动方向),你还需将原蛇尾pop()掉,

      同时记得在画布中重绘为画布色,不然,前台的界面是不能显示移动效果的,只是增长。

 就先说这么多吧,其他的感兴趣的 请祥看源码 ~_~

 也欢迎大家吐槽、改进~

posted @ 2016-07-18 09:31  Bantina  阅读(393)  评论(2)    收藏  举报