1.实现贪吃蛇程序的整个代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>课件_老师</title>
</head>
<body>
<canvas id="canvas"></canvas> <input type="button" value="开始游戏" id="play" >
<script>
window.onload = function()
{
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var playG = document.getElementById("play");
canvas.width = 400;
canvas.height = 400;
canvas.style.border = "1px solid #ccc";
var foodx = 0; // 食物的x坐标
var foody = 0; // 食物的y坐标
var size = 8; // 每一块大小
var long = 10; // 初始蛇身长度
var x = y = 8; // 初始坐标
var dir = 2; // 0 左 1 上 2 右 3 下 方向
var times = 100; // 运动速度
var map = []; // 存储蛇身数据
var timer = null; // 定时器名称
var onOff=true;
playG.onclick = playGame;
function playGame()
{
if(onOff)
{
timer = setInterval(move,times);
food();
onOff=false;
};
}
function move()
{
/*运动方向；*/
switch(dir)
{
case 0: x = x - size; break;
case 1: y = y - size; break;
case 2: x = x + size; break;
case 3: y = y + size; break;
}
// 判断撞墙
if(x>=400 || x<0 || y<0 || y>=400)
{
alert("你挂掉了，原因是你撞墙了！");
window.location.reload();/*每次挂掉以后就重新开始，让游戏重新加载*/
}
// 判断撞自己
for(var i=0; i<map.length; i++)
{
if(x == map[i].x && y == map[i].y)
{
alert("你挂掉了，原因是你撞自己了！");
window.location.reload();
}
}
if(map.length > long)
{
var cl = map.shift();
context.clearRect(cl.x,cl.y,size,size);
}
map.push({‘x‘:x,‘y‘:y});
context.fillRect(x,y,size,size);
// 吃到食物
if(foodx*size ==x && foody*size == y)
{
long++;
times -=5;
clearInterval(timer);
onOff=true;
playGame();
}
}
document.onkeydown = function(ev)
{
var ev = ev || event;
var cod = ev.keyCode - 37;
switch(cod){
case 0: dir = 0; break;
case 1: dir = 1; break;
case 2: dir = 2; break;
case 3: dir = 3; break;
}
}
// 随机生成食物
function food()
{
foodx = Math.floor(Math.random()*50);
foody = Math.floor(Math.random()*50);
/*排除生成食物的时候，不让食物生成在自己身上；*/
for(var i=0; i<map.length; i++)
{
if( foodx*size == map[i].x && foody*size == map[i].y )
{
food();
return false;
}
}
context.save();
context.fillStyle = "#000";
context.fillRect(foodx*size,foody*size,size,size);
context.restore();
}
}
</script>
</body>
</html>