JavaScript实现贪吃蛇小游戏

  • JavaScript实现贪吃蛇小游戏已关闭评论
  • 97 views
  • A+
所属分类:JavaScript

贪吃蛇是终多小游戏中的经典游戏了。在以前的非智能手机时代一般的手机都会有这个游戏。本篇教程是通过javascript纯div形式来实现这个小游戏而非以html5canvas实现。

JavaScript实现贪吃蛇小游戏

实现分析

需要一个网格场景来支持”蛇”的移动。比如我们的网格是一个15*10的矩阵(网格数: 150)。”蛇”在移动的时候变化的只有”蛇”整个身体的第一格和最后一格(可以将"蛇"定义为一个数组,数组的变化永远只有尾和头)。”蛇”的死亡是在移动到边界的下一次移动超出边界和移动到自己身体上整个游戏就结束了。”蛇”的移动方向需要捕获用户按下方向键的事件来控制移动方向。

JavaScript实现贪吃蛇小游戏

通过分析我们需要一个场景类,snake类,控制类,point类,事件处理函数。

场景类

场景类的主要功能就是创建一个场景,在场景内绘制自定义大小的网格。场景关链snake类,在创建场景的时候也同时创建了snake

Snake类

Snake类的主要功能是snake的移动、吃、方向、重绘操作,本类需要关联Point类。在移动的时候需要判断有没有吃的操作和游戏结束事件的触发。

Note: 
设置方向的时候,不能设置当前方向相反的方向。在随机point的时候不能是当前sanke所在的网格内。在吃到自己和移动网格之外说明游戏结束。snake第一个网格的位位置和point的position位置重合触发吃的事件。

Point类

Point类主要实现随机分布一个点到网格中,不可以分布出snake内的点。

Control类

Control类主要实现事件的绑定,snake移动定时器,游戏的暂停和开始。

Note: 
space变量是为了控制暂停和开始的,偶数开始奇数与之相反。

辅助函数

完结

以上代码就是整个游戏的源代码,其实还有几个功能没有去实现。实现起来实际是挺简单的,本篇的代码有很多地方可以优化(比如:可以从网格数组中拿到单个网格对象,而且需要通过getElementById来获取对象), 代码组织也不是很好。代码我们可以慢慢的优化,最主要的是实现思路

源码地址

https://github.com/TianLiangZhou/loocode-example/tree/master/snake

推荐阅读

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin