贪吃蛇大家都玩过，但你会制作嘛？听起来好像很难的样子，其实非常的简单，话不多说直接上代码
我们先把dom结构写出来
<div> <div> <div></div> <div></div> </div> </div>
其中，content为整个布局的大盒子，snake就是蛇，里面的box就是他的身体，为了区分头部我们给第一个box加了个head名字用于区分，下面我们再把css加上
<style> .box{ width: 60px; height: 60px; background-color: red; position:absolute; left: 0; top: 0; line-height: 60px; } .head{ background-color: yellowgreen; } </style>
我们给蛇的每一节的宽高设置为60像素，并给了一个定位，因为如果不加定位的话无法让他脱离文档流（在页面中飘起来），而且后续也无法通过left和top来判断他的坐标.
好的这样我们就得到了一条可爱的小蛇(然鹅并没有看出来哪里可爱- -)。什么？你问我他的头哪去了，很简单，在给元素加了定位以后后面的元素会覆盖掉前面的元素，所以只是头部和身体重叠了你看不到而已。
随后咱们得让这条蛇动起来是吧，那么我们怎么让他动起来呢？原理很简单，我们可以设置一个定时器，每过一个时间就让他动一下，而怎么让他动呢，只需要设置一个数值，让这个值每动一下就+=60，然后通过判断是上下动还是左右动，来给元素的left与top赋值。我们把逻辑写成代码，就出来了如下的代码
<script> var boxs = document.querySelectorAll(".box"); var snake_x = 0; var snake_y = 0; var turn = "right"; setInterval(function(){ snakeMove(); },100) function snakeMove(){ switch( turn ){ case "right": snake_x += 60;break; case "left" : snake_x -= 60;break; case "top" : snake_y -= 60;break; case "bottom": snake_y += 60;break; } for(var i = boxs.length - 1; i > 0 ; i --){ boxs[i].style.left = boxs[i - 1].style.left; boxs[i].style.top = boxs[i - 1].style.top; } boxs[i].style.left = snake_x + "px"; boxs[i].style.top = snake_y + "px"; } document.onkeydown = function(evt){ var e = evt || event; var keyCode = e.keyCode || e.which; switch( keyCode ){ case 37 : turn = "left";break; case 38 : turn = "top";break; case 39 : turn = "right";break; case 40 : turn = "bottom";break; } } </script>
上述代码中，我们给小蛇的初始位置的x和y的坐标都设置为0，并且默认初始向右走，通过键盘上方向键的输入，来改变他的方向。其中，难点在于
for(var i = boxs.length - 1; i > 0 ; i --){ boxs[i].style.left = boxs[i - 1].style.left; boxs[i].style.top = boxs[i - 1].style.top; } boxs[i].style.left = snake_x + "px"; boxs[i].style.top = snake_y + "px";
这一块代码，这块代码的目的是让后面的元素跟着前面的走，也就是让蛇的每一块身体都跟着上一块去运动，然后最后再给头部设置为snake_x和snake_y当前的值即可，这样就形成了第一块(头部)坐标为
snake_x,snake_y实时变化的值，第二块为第一块之前的值，第三块为第二块之前的值。。。以此类推就得到了一个身体跟着头部走的效果
但是当你把代码输进去以后一运行会发现，这条小蛇过于顽皮，以至于走到边界以后还会无限的向前走，那这不行啊，总不能让蛇跑了不是，所以得给小蛇加上一个边界
var snake_x_max = document.documentElement.clientWidth ; var snake_y_max = document.documentElement.clientHeight; if(snake_x > snake_x_max){ snake_x = 0; } if(snake_x < 0){ snake_x = snake_x_max; } if(snake_y > snake_y_max){ snake_y = 0; } if(snake_y < 0){ snake_y = snake_y_max; }
这里我们设置x和y的最大值为当前窗口的宽高，然后通过if语句进行判断，如果当前坐标大于了最大值，就讲当前坐标归0，如果小于0的话(也就是跑到了左边的边界)，就将当前坐标设置为最大值，这样就可以得到一个边界啦
你以为这样就完事啦？nonono,没有食物吃的蛇怎么能叫做贪吃蛇呢，那是没有灵魂哒。下面我们开始制作食物（不能让蛇饿着是吧）。
<div> </div>
然后给他加个css
#food{ width: 60px; height: 60px; position: absolute; background: greenyellow; }
然后再绑定一下元素并将他的left和top值设为范围内随机数，这样可以做到随机位置生成
var fd=document.getElementById("food"); fd.style.left=Math.random()*snake_x_max+"px"; fd.style.top=Math.random()*snake_y_max+"px";
好的这样我们就得到了一个随机生成的食物
