前端教程：HTML+CSS+JS，20行代码的贪吃蛇

HTML+CSS+JS，20行代码的贪吃蛇教程如下：

   
   
   


   对不起，您的浏览器不支持canvas
   

首先，我们要知道做一个贪吃蛇最主要的是什么，是做出蛇活动的场所和如何使蛇动起来。  我们先看蛇活动的场所：

   
       对不起，您的浏览器不支持canvas
   
   
   box = document.getElementById('can').getContext('2d');

这是一个 400px400px的 canvas，思路是以 20px20px为一个方格，组成 20行 20列的方阵，总共 400格，然后绿色填充的格子表示蛇身，用黄色表示食物。这 400个格子和数字 0~399一一对应，对应的方式就是以 20作为基数， n/20再取整表示第几行， n%20表示第几列。行数和列数都用 0~19表示。  蛇用一个一维数组表示，每个值都是这 400个数中的一个，用 varsnake=[41,40];初始化这条蛇，索引 0为蛇头。food表示食物的位置， direction表示蛇头下一次运动的转向。蛇的运动就用添加和删除数组元素来实现，每次执行绘制蛇头，去掉蛇尾，循环执行使蛇运动。  下边从函数运行的起始处（ 39行）开始看:

!function() {}();

什么鬼？这其实是立即执行函数 IIFE的另一种写法。关于 IIFE，这篇文章讲的挺不错的。继续往下看，给蛇头添加一个节点 n，其值为当前蛇头的值加 direction的值，如此一来就能理解为什么要用 20表示向下， -20表示向上了。再下一行是一个 if语句，其中值得提醒的是 &&的优先级高于 ||，这个语句就是判断即将出现的蛇头是不是属于蛇身，或者跑到box外边去了。如果没有死亡，就把这个蛇头绘制出来，下边就看看绘制的代码：

function draw(seat, color) {
   box.fillStyle = color;
   box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
}

填充时填充 1818的像素，留 1px边框。.fillRect()中第一个参数就是要绘制的矩形的 x坐标 seat%2020+1，即先得到所要绘制的矩形块在方阵中的位置：第 ~~(seat/20)行，第 seat%20列，再 *20+1具体到像素点。可能这个 ~~有点难理解，我感觉在这里的用处应该和 Math.floor()差不多，对一个浮点型的数取反再取反，得到的数就是去掉小数位的整数了。

回到 47行，又是一个判断语句，判断下次蛇头出现的位置是不是和当前的食物的位置相同，如果相同，生成下一个食物，食物的位置为一个随机数，但是要判断这个点不是出现在当前的蛇身上，绘制食物。如果没有吃到食物，即蛇在正常运动时，每向前一次，将蛇尾弹出，并利用其返回值将这个点重新绘制为黑色。  最后的 setTimeout，循环执行当前函数，设置执行周期来调蛇的移动速度。  到了这里，我们发现这条蛇已经可以动了，加上键盘的操作就完成了：

document.onkeydown = function(evt) {    
   direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
};

将这个函数绑定到键盘事件上， evt||event用法的原因这里有详细的解释，是为了兼容 ie。  三目运算符 ?前边的判断语句又可分为两部分：

1. snake[1]-snake[0]的值应该就是 -direction，按理说此处写成 -direction应该和原来是一个效果，那为什么没有这么做呢，因为如果这样写，玩家可能在一个函数周期中多次改变 direction的值，最后使得 direction和当前真正的运动方向不一致，导致游戏崩溃。

2. 在 ==后边， [-1,-20,1,20][(evt||event).keyCode-37]中前边的 []是一个数组，后边的 []是取索引，左上右下四个键的 keyCode分别为 37,38,39,40，计算后的索引为 0,1,2,3，使方向键与 direction的取值对应起来。这里的巧妙之处在于如果按下的按键不是方向键，在数组中将得不到对应的值，返回 undefine。此时，由于之后的 ||运算符， n会取到 direction原来的值。

再用三目运算符来判断，如果按键方向不是反方向，就更新 direction的值。

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的