<!doctype html>
<html>
<head>
<!-- 当前文档的字符集编码GBK,UTF-8，GB2312(GBK的子集）-->
<meta charset="UTF-8">
<meta name="keyword" content="HTML5,JAVA,游虎">
<meta name="Description" content="贪吃蛇">
<title>贪吃蛇项目</title>
</head>
<!--层叠样式表 美化 类样式 -->
<style type="text/css">
.h1class {font-size:30px;color:#EE2929;text-align:center;text-shadow:2px 5px 5px rgba(0,0,0,1)}
body{background-color:#6AABD6;}
.canvasClass{background:url(‘http://pic24.nipic.com/20121022/9252150_193011306000_2.jpg‘)}
</style>
<center>
<body>
<h1 class="h1class">贪吃蛇项目</h1>
<canvas id="snakeCanvas" width="450" height="450" class="canvasClass" align="center"></canvas>
</body>
</center>
<script type="text/javascript">
/**
第一步
1.1 画布分成n个方格 为每个小方格设定15*15 30个
1.2 初始化一条蛇
1.3 初始化一个食物
第二步：实现动画
2.1 让蛇移动（监听键盘的事件）
2.2 捕捉蛇吃食物的过程（蛇变长，另外产生一个食物）
第三步：让蛇自动前行
**/
var speed = 300;//初始速度
var canvas= document.getElementById("snakeCanvas");
var ctx = canvas.getContext("2d");//理解成画笔
var width=15;
//指定初始长度
var snakeLen=6;
var snake =[];//蛇的身体
for (var i=0; i<snakeLen; i++)
{
snake[i] = new Cell(i, 0, -1);
}
//蛇的头部
var head =snake[snake.length-1];
//初始食物出现坐标
var foodX = Math.ceil(Math.random()*28 +1);
var foodY = Math.ceil(Math.random()*28 +1);
//定义食物
var food = new Food(foodX, foodY);
//蛇身体构成元素， x坐标， y坐标 d(1：左边 -1：右边 2：上 -2：下)
function Cell(x,y,d){
this.x =x;
this.y =y;
this.d =d;
return this;
}
function Food(x, y){
this.x=x;
this.y=y;
return this;
}
// 绘制游戏基本元素
function draw (){
//清空整个画布
ctx.clearRect(0, 0, 450, 450);
//绘制网格
/*for(var i=0;i<30; i++)
{
ctx.strokeStyle="#ccc";
ctx.beginPath();
//绘制横线
ctx.moveTo(0, i * width);
ctx.lineTo(450, i * width);
//绘制竖线
ctx.moveTo(i * width, 0);
ctx.lineTo(i * width, 450);
ctx.closePath();
ctx.stroke();
}
*/
//绘制蛇的身体
for (var i=0; i<snake.length; i++)
{
ctx.fillStyle = "black";//填充颜色
if (i == snake.length -1)//蛇头部
{
ctx.fillStyle = "red";
}
ctx.beginPath();
ctx.rect(snake[i].x * width, snake[i].y * width, width, width);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//绘制食物
drawFood();
//判断是否吃到食物
if (head.x==food.x && head.y==food.y)
{
//随机产生一个食物
initFood();
food =new Food(foodX, foodY);
drawFood();
//增加蛇长
var newCell = new Cell(head.x, head.y, head.d);
switch(head.d){
case 2 :newCell.y--; break;//上
case -1 :newCell.x++; break;//右
case -2 :newCell.y++; break;//下
case 1 :newCell.x--; break;//左
}
snake[snake.length]=newCell;
head=newCell;
if (speed>50)
{
speed=speed-10;
}
}
}
//初始化食物坐标，随机产生
function initFood(){
//Math.ceil(0.1) 1
foodX=Math.ceil(Math.random()*28 +1);
foodY=Math.ceil(Math.random()*28 +1);
//判断是否与蛇身体重叠
for (var i=0; i<snake.length; i++)
{
if (snake[i].x ==foodX && snake[i] ==foodY)
{
initFood ();//递归产生食物坐标
}
}
}
//绘制食物
function drawFood(){
ctx.fillStyle ="green";
ctx.beginPath ();
ctx.rect(food.x * width, food.y * width, width, width);
ctx.closePath ();
ctx.fill ();
}
draw();
//监听键盘事件
document.onkeydown = function(e){
//下 40 上38 左37 右39
var keyCode = e.keyCode -37;
var direction;
switch(keyCode){
case 1 :direction = 2; break;//上
case 2 :direction =-1; break;//右
case 3 :direction =-2; break;//下
case 0 :direction = 1; break;//左
}
if (head.d+direction !=0 && keyCode <=3 && keyCode>=0 )
{
//控制蛇的移动方向
moveSnake (direction);
}
}
//移动蛇的方法
function moveSnake (direction){
var newSnake =[];
var newCell =new Cell (head.x, head.y, head.d);
//
for ( var i = 1; i<snake.length; i++)
{
newSnake[i-1]=snake[i];
}
newSnake[snake.length-1]=newCell;
newCell.d=direction;
switch(direction){
case 2 :newCell.y--; break;//上
case -1 :newCell.x++; break;//右
case -2 :newCell.y++; break;//下
case 1 :newCell.x--; break;//左
}
snake=newSnake;
head = snake[snake.length -1];
checkDeath();
draw();
}
//判断游戏结束
function checkDeath(){
//判断是否出边界
if (head.x >=30||head.y>=30||head.x<0 ||head.y<0)
{
alert("Game Over!");
window.location.reload();
}
for (var i=0; i<snake.length-1; i++)
{
if (head.x==snake[i].x && head.y == snake[i].y)
{
alert("Game Over!");
window.location.reload();
}
}
}
function moveClock (){
moveSnake(head.d);
}
setInterval(moveClock,500);//60毫秒
</script>
</html>
原文：http://www.cnblogs.com/youhoo-IT/p/5130268.html