<canvas id="canvas" style="border:1px solid #d3d3d3;" height="600" width="900" />
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var snake = []; //定义一条蛇,画蛇的身体
var snakeCount = 6; //初始化蛇的长度
var foodx = 0;
var foody = 0;
var togo = 0;
function drawtable()//画地图的函数
{
for(var k = 0; k < snakeCount; k++)//画蛇的身体
ctx.fillRect(snake[k].x, snake[k].y, 15, 15); //前两个数是矩形的起始坐标,后两个数是矩形的长宽。
ctx.fillRect(foodx, foody, 15, 15); //绘制食物
ctx.fill();
}
function addfood()
{
foodx = Math.floor(Math.random() * 60) * 15; //随机产生一个0-1之间的数
foody = Math.floor(Math.random() * 40) * 15;
for (var k = 0; k < snake; k++)
if (foodx == snake[k].x && foody == snake[k].y) //防止产生的随机食物落在蛇身上
addfood();
}
function move()
{
var temp_x = snake[snakeCount-1].x;
var temp_y = snake[snakeCount-1].y;
switch (togo)
{
case 1: snake.push({x:temp_x - 15, y:temp_y}); break; //向左走
case 2: snake.push({x:temp_x, y:temp_y - 15}); break;
case 3: snake.push({x:temp_x + 15, y: temp_y}); break;
case 4: snake.push({x:temp_x, y:temp_y + 15}); break;
default: snake.push({x:temp_x + 15, y:temp_y}); //默认
}
snake.shift(); //删除数组第一个元素
ctx.clearRect(0, 0, 900, 600); //清除画布重新绘制
isEat();
isDead();
drawtable();
}
function isEat() //吃到食物后长度加1
{
if(snake[snakeCount - 1].x == foodx && snake[snakeCount - 1].y == foody)
{
addfood();
snakeCount++;
snake.unshift({x:-15, y:-15});
}
}
function isDead() /* 如果碰到边框,则死亡 */
{
if (snake[snakeCount-1].x > 885 || snake[snakeCount-1].y > 585 || snake[snakeCount-1].x < 0 || snake[snakeCount-1].y < 0)
alert("GAME OVER!");
}
document.onkeydown = function(e)
{
togo = e.keyCode - 36;
}
window.onload = function()//调用函数
{
for(var k = 0; k < snakeCount; k++)
snake[k] = { x: k * 15, y: 0};
addfood(); //在start中调用添加食物函数
setInterval(move, 250);
drawtable();
}
</script>