效果图展示：
具体实现代码如下：
（1）html部分
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body onselectstart="return false">
<h1 id="alerts">贪吃蛇</h1>
<div id="help">
<span style="float:left">当前得分：<strong id="nowscore">0</strong></span>
<span style="float:right">最高分：<strong id="score">0</strong></span>
</div>
<div id="map"></div>
<input type="button" id="btnStart" value="开始游戏" />
<script type="text/javascript" src="gamejs.js"></script>
</body>
</html>
（2）main.css文件代码
* {margin:; padding:}
body {
background:white;
-moz-user-select:none;
text-align:center;
font-size:12px;
}
table{
margin:30px auto 10px auto;
overflow:hidden;
box-shadow:0px 0px 30px #4EFE93;
border:10px solid yellowgreen;
border-image: url(border.png);
border-image-slice:;
border-image-width:10px;
border-image-outset:;
border-image-repeat:repeat;
}
td {
width:20px;
height:20px;
border:1px solid white;
background:white;
}
.cover {background:url(body1.png);}
.food {
background:url(food.png);
background-repeat:no-repeat;
}
#nowscore{
font-size:20px;
font-weight:;
color:blue;
}
#score{
font-size:20px;
font-weight:;
color:red;
}
#alerts{
margin-top:50px;
color:brown;
font-size:30px;
font-weight:;
}
#help {
width:420px;
margin:0 auto;
line-height:17px;
color:green;
}
#help span {
float:left;
font-size:15px;
font-weight:;
margin-right:10px}
#help .box {
width:15px;
height:15px;
margin-right:5px;
border:1px solid white;}
#btnStart {
clear:both;
width:100px;
height:30px;
margin-top:10px;
padding:;
background:#4EFE93;
color:green;
border:1px solid #fff;
border-bottom-color:#000;
border-right-color:#000;
border-radius:15px;
cursor:pointer}
注意：具体图片可以自行改动
（3）game.js文件代码
/* 全局变量 */ var WIDTH = 24;
var HEIGHT = 24;
var len ;//蛇的长度
var speed; //爬行速度
var gridElems = multiArray(WIDTH,HEIGHT); //地图坐标，table对应的数组
var carrier; //蛇标志二维数组
var snake; //蛇每节的坐标点
var btnStart;
var snakeTimer;//蛇行走计时器
var directkey; // 键盘按键类型 /* 其中gridElems和snake，carrier三个数组是完成表格和数组映射的关键 */ window.onload = function(){
//info = document.getElementById("alerts");
btnStart = document.getElementById("btnStart");
initGrid();
document.onkeydown = attachEvents; //键盘事件获取，跨浏览器事件处理
btnStart.onclick = function (e) {
start();
btnStart.setAttribute("disabled",true);
btnStart.style.color = "gray";
}
} //开始游戏
function start() {
len = 3;
speed = 10;
directkey = 39;
carrier = multiArray(WIDTH,HEIGHT);
snake = new Array();
clear();
initSnake(); //蛇初始化
addObject("food");
walk(); } //创建地图，DOM节点创建增加
function initGrid() {
var body = document.getElementsByTagName("body")[0];
var table = document.createElement("table");
var tbody = document.createElement("tbody");
for(var j = 0; j < HEIGHT; j++) {
var col = document.createElement("tr");
for(var i = 0; i < WIDTH; i++) {
var row = document.createElement("td");
gridElems[i][j] = col.appendChild(row); //完成表格和二维数组的映射
}
tbody.appendChild(col);
}
table.appendChild(tbody);
document.getElementById("map").appendChild(table);//向div中添加创建好的表格
} //一开始创建蛇
function initSnake() {
var pointer = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = pointer[0] - i;//产生三个相连的表格
var y = pointer[1];
snake.push([x,y]);//采用数组压栈方法（js数组自带方法）将产生的蛇坐标压入坐标数组中
carrier[x][y] = "cover";
}
} //添加键盘事件，防止浏览器不兼容
function attachEvents(e) {
e = e || event;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效
return false;
} //设置间隔计时器，使蛇运动
function walk() {
if(snakeTimer) window.clearInterval(snakeTimer);
snakeTimer = window.setInterval(step, Math.floor(3000/speed));//3000/speed呈现速度效果
} //核心部分
function step() {
//获取目标点
var headX = snake[0][0];//从坐标数组中获取蛇头坐标
var headY = snake[0][1];
switch(directkey) { //进行按键位判断，蛇转向
case 37: headX -= 1; break;
case 38: headY -= 1; break;
case 39: headX += 1; break
case 40: headY += 1; break;
}
//死亡检测
if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || carrier[headX][headY] == "cover" ) {
alert("辣鸡高城，你挂了！");
if((document.getElementById("score").innerHTML)*1 < len)
{document.getElementById("score").innerHTML=len;}//最高分信息
btnStart.removeAttribute("disabled");//释放“开始游戏”按钮
btnStart.style.color = "#000";//释放“开始游戏”按钮
window.clearInterval(snakeTimer);//清屏
return;
}
//加速，吃到食物后提速
if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {
speed += 5;
walk();
}
if(carrier[headX][headY] != "food") {
var lastX = snake[snake.length-1][0];//提取蛇的尾部坐标
var lastY = snake[snake.length-1][1];//提取蛇的尾部坐标
carrier[lastX][lastY] = false;//蛇尾移动
gridElems[lastX][lastY].className = "";//制空单元格背景色
snake.pop();//删除蛇尾坐标
}
else {
carrier[headX][headY] = false;//记录蛇头和食物重叠，碰撞处，碰撞后：蛇尾不减，false标志重叠 addObject("food");//添加新的食物；
}
snake.unshift([headX,headY]);//将食物作为新的蛇头坐标压入蛇坐标数组，unshift函数为头压入数据，snake长度增加1
carrier[headX][headY] = "cover";//cover代表为蛇身，此时将标志false改为正常caver
gridElems[headX][headY].className = "cover";//给移动后的蛇身修改相应的表格单元格颜色
len = snake.length;
document.getElementById('nowscore').innerHTML = len;
} //添加物品
function addObject(name) {
var p = randomPointer();
carrier[p[0]][p[1]] = name;
gridElems[p[0]][p[1]].className = name;//封装投放食物函数
} //产生指定范围随机点，食物和蛇的初始值产生
function randomPointer(startX,startY,endX,endY) {
startX = startX || 0;
startY = startY || 0;
endX = endX || WIDTH;
endY = endY || HEIGHT;
var p = [];
var x = Math.floor(Math.random()*(endX - startX)) + startX;//控制产生数据在WIDTH即表格横向范围内
var y = Math.floor(Math.random()*(endY - startY)) + startY;//控制产生数据在HEIGHT即表格纵向范围内
if(carrier[x][y]) //如果产生数据和蛇身重复了，则递归再次产生
{return randomPointer(startX,startY,endX,endY);}
p[0] = x;
p[1] = y;
return p;//返回一个一维数组，仅两个数（坐标），传至坐标数组
} //产生随机整数
function randowNum(start,end) {
return Math.floor(Math.random()*(end - start)) + start;
} //创建二维数组
function multiArray(m,n) {
var arr = new Array(n);
for(var i=0; i<m; i++)
arr[i] = new Array(m);//数组套数组
return arr;
} //清除画面，游戏开始时和死亡后刷新使用
function clear() {
for(var y = 0; y < gridElems.length; y++) {
for(var x = 0; x < gridElems[y].length; x++) {
gridElems[x][y].className = "";
}
}
}