逻辑思路：
创建表格，目的画线分割创建地图div，让蛇在上面移动创建所有的块，蛇头、身体、食物 创建的蛇头、身体、食物div，添加到地图中蛇头、身体、食物随机产生坐标设置蛇头的初始方向设置按键改变蛇头方向开启定时器，自动移动蛇头
4.食物
判断是否吃到食物（蛇头的left和top等于食物的left和top）碰撞则随机产生食物（随机坐标）
5.身体
存所有的身体(数组)创建新身体newbody和蛇头方向相比，判断最后一个身体的方向新的身体的方向等于最后一个身体方向把新的身体移动到蛇头的后边，通过函数改变style.left和top的值新的身体添加到所有的身体数组中：allNode.push(bodyNode),目的遍历所有身体遍历所有的身体，链接在一起并一起移动
6.设置如果所有身体.length>0时，按键不能在对面进行移动（onkeydown）
7.判断蛇头有没有出边界（判断头部的top和style坐标）
8.判断食物和身体不能重叠（身体和食物的坐标进行判断）
9.设置速度
10.分数
11.判断头部不能碰撞身体（判断头部和所有的身体数组的坐标是否一致）
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>贪吃蛇</title><style type="text/css">body, table, td, tr {padding: 0;margin: 0;}td {width: 48px;height: 48px;border: 1px solid #6eb3d8;}#map {background: #6eb3d8;width: 500px;height: 500px;opacity: 0.3;position: absolute;top: 0;}div {width: 50px;height: 50px;position: absolute;}#game {position: absolute;top: 510px;left: 20px;}#a {position: absolute;top: 515px;}#b {position: absolute;top: 515px;left: 50px;}#c {position: absolute;top: 515px;left: 100px;}</style></head><body><div id="map"></div><h3 id="game"><p id="score">本轮成绩为:</p></h3><input type="button" value="慢" onclick="speed('1000')" id="a"><input type="button" value="中" onclick="speed('500')" id="b"><input type="button" value="块" onclick="speed('100')" id="c"><script>//分数的idvar score = document.getElementById("score");//初始化分数为0var scoreNum = 0;//第一步：创建表格document.write("<table cellspacing='0'>");for (var n = 0; n < 10; n++) {document.write("<tr>")for (var m = 0; m < 10; m++) {document.write("<td></td>");}document.write("</tr>")}document.write("</table>");//第二步：创建地图var map = document.getElementById("map");//第三步：创建所有块，蛇头 身体 食物function createNode(type) {//获取蛇头的随机坐标var x = parseInt(Math.random() * 10) * 50;var y = parseInt(Math.random() * 10) * 50;//alert(x);//添加三块的divvar div = document.createElement("div");div.style.left = x + "px";div.style.top = y + "px";map.appendChild(div);if (type == 0) {//蛇头div.style.background = "red";}if (type == 1) {//身体div.style.background = "yellow";}if (type == 2) {//食物div.style.background = "blue";}return div;}var allNode = new Array();//存所有的身体var allHeadBody = new Array();//存头和身体//第三步：创建头部的divvar headNode = null;var foodNode = null;headNode = createNode(0);foodNode = createNode(2);allHeadBody.push(headNode);//把蛇头添加到存储头和身体的数组中headNode.value = 37;//第三步：移动头部function moveNode() {//判断游戏有没有出界if (parseInt(headNode.style.top) >= 500 || parseInt(headNode.style.left) >= 500 || parseInt(headNode.style.top) < 0 || parseInt(headNode.style.left) < 0) {alert("游戏结束");//停止游戏，停止定时器，则把定时器给一个变量clearInterval(stopGame);}//第四步：检测是否碰撞if (headNode.style.left == foodNode.style.left && headNode.style.top == foodNode.style.top) {//碰撞一次加0分scoreNum += 10;//写入到score中score.innerHTML = "本轮成绩为：" + scoreNum;//第五步：创建身体,记录当前的身体var bodyNode = createNode(1);var lastNode = null;//身体的最后一块//判断身体最后一块的方向（键盘位置）if (allNode.length == 0) {lastNode = headNode;} else {lastNode = allNode[allNode.length - 1];}bodyNode.value = lastNode.value;switch (parseInt(lastNode.value)) {//根据蛇头判断 身体的位置case 37:bodyNode.style.left = parseInt(lastNode.style.left) + 50 + "px";bodyNode.style.top = lastNode.style.top;break;case 38:bodyNode.style.top = parseInt(lastNode.style.top) + 50 + "px";bodyNode.style.left = lastNode.style.left;break;case 39:bodyNode.style.left = parseInt(lastNode.style.left) - 50 + "px";bodyNode.style.top = lastNode.style.top;break;case 40:bodyNode.style.top = parseInt(lastNode.style.top) - 50 + "px";bodyNode.style.left = lastNode.style.left;break;}allNode.push(bodyNode);//存所有的身体allHeadBody.push(bodyNode);//存的头和身体//判断食物和身体不能重叠var foodbool = true;var px = 0;var py = 0;var num = 0;while (foodbool) {px = parseInt(Math.random() * 10) * 50 + "px";py = parseInt(Math.random() * 10) * 50 + "px";for (var n = 0; n < allHeadBody.length; n++) {if (allHeadBody[n].style.left == px && allHeadBody[n].style.top == py) {num++;}}if (num == 0) {foodbool = false;} else {num = 0;}}foodNode.style.left = px;foodNode.style.top = py;//}//让身体跟着蛇头走if (allNode.length > 0) {for (var n = allNode.length - 1; n >= 0; n--) {//判断蛇头和身体不能碰撞if (headNode.style.left == allNode[n].style.left && headNode.style.top == allNode[n].style.top) {alert("游戏结束，碰撞身体了！");clearInterval(stopGame);}switch (parseInt(allNode[n].value)) {case 37:allNode[n].style.left = parseInt(allNode[n].style.left) - 50 + "px";break;case 38:allNode[n].style.top = parseInt(allNode[n].style.top) - 50 + "px";break;case 39:allNode[n].style.left = parseInt(allNode[n].style.left) + 50 + "px";break;case 40:allNode[n].style.top = parseInt(allNode[n].style.top) + 50 + "px";break;}if (n > 0) {allNode[n].value = allNode[n - 1].value;} else {allNode[n].value = headNode.value;}}}//根据headNode.value的初始值移动蛇头方向switch (parseInt(headNode.value)) {case 37://左headNode.style.left = (parseInt(headNode.style.left) - 50) + "px";break;case 38://上headNode.style.top = (parseInt(headNode.style.top) - 50 ) + "px";break;case 39://右headNode.style.left = (parseInt(headNode.style.left) + 50) + "px";break;case 40://上headNode.style.top = (parseInt(headNode.style.top) + 50) + "px";break;}}//移动蛇头结束//控制速度//初始默认的速度var newspeed = 500;function speed(num) {newspeed = num;// clearInterval(stopGame);stopGame = setInterval(moveNode, newspeed);speed=null;//函数执行一次，第二次调用则函数为空}//stopGame = setInterval(moveNode, newspeed);document.onkeydown = function () {// alert(event.keyCode);switch (event.keyCode) {case 37://左if (headNode.value != 39 || allNode.length <= 0) {headNode.value = 37;}break;case 38://上if (headNode.value != 40 || allNode.length <= 0) {headNode.value = 38;}break;case 39://右if (headNode.value != 37 || allNode.length <= 0) {headNode.value = 39;}break;case 40://上if (headNode.value != 38 || allNode.length <= 0) {headNode.value = 40;}break;}}</script></body></html>
