不小心用js重做了一遍贪吃蛇

贪吃蛇游戏想必没人会感到陌生,这个游戏的js版本在网上也是一搜一大把,今天我要介绍的仍然是如何用js做一个贪吃蛇游戏,但在关键一步,蛇的运动的实现上略有不同。

贪吃蛇的js版本通常用连续的方块元素来实现蛇身,蛇的运动处理一般是这样的,让蛇头向运动方向偏移一格,其后的元素依次移向前一个元素的位置,从而实现蛇的移动,这里有一个更简单的方法,就是直接将蛇尾移到蛇头的移动位置,这样也可以实现移动效果,但只需要对一个元素进行一次DOM操作即可,无论从实现难度还是游戏性能方面,都有很大的优势。

基于这个核心重新实现了一次贪吃蛇游戏,并且完善了游戏的关卡设计,效果如下:

snake.png

效果预览:http://refined-x.com/projects/codes/snake.html
详细思路分析:http://refined-x.com/2017/06/19/%E5%86%8D%E5%81%9A%E4%B8%80%E6%9D%A1%E8%B4%AA%E5%90%83%E8%9B%87/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 贪吃蛇是众多90后小时候玩过的一款经典手游,但是在程序员眼中则是几页代码的编辑,代码里所涉及的内容也比较简...
    3c58eba4eb74阅读 471评论 0 0
  • 您好,本文主要描述如何用原生JS以面向过程的思想来编写一个贪吃蛇小游戏。 1. 准备工作 首先,我们需要新建一个文...
    梁煜辉阅读 1,139评论 1 5
  • 本文系移动笔记(http://www.yidongbiji.com)原创,未经许可不许转载。贪吃蛇大作战的上榜有人...
    电游女王阅读 2,327评论 1 3
  • 1. 游戏设计与数据设计 感谢您选择pyera,如果有任何问题想反馈和讨论可以加群:py/era 技术吹水群 54...
    氰酸钾铝阅读 2,584评论 3 3
  • 是不是不管有多么想你 都要适可而止 保持距离 因为我发现 过多的触碰 酝酿了不开心的情绪 只想让你开心
    柳小蛮阅读 230评论 0 0