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

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

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

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

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

效果预览: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/

上一篇:vue中添加Echarts图表的使用,Echarts的学习笔记


下一篇:Padding和父子继承宽高之间的关系