贪吃蛇逻辑

//拿到画板
var canvas = document.getElementById("canvas");
//得到画板权限
var ctx = canvas.getContext("2d");
ctx.strokeStyle="#9999ff";

//蛇的长度
var snakCount = 6;
//蛇的坐标
var snak = [];

//初始化蛇的方向
var toGo = 3;

//画蛇
function drawRect(){
    for(var i=0;i<30;i++){
    //开始绘制
    ctx.moveTo(15*i,0);
    ctx.lineTo(15*i,450);
    //连接
    ctx.stroke();

    ctx.moveTo(0,15*i);
    ctx.lineTo(450,15*i);
    //连接
    ctx.stroke();
}

    for(var i=0;i<snakCount;i++){
        ctx.fillStyle = "#000";
        if( i == snakCount-1){
            ctx.fillStyle = "green";
        }
    ctx.fillRect(snak[i].x,snak[i].y,15,15);
    }

}


//定义蛇的坐标
function start(){
    for(var i=0;i<snakCount;i++){
        snak[i] = {x:15*i,y:0};
    }
}

function move(){
    switch(toGo){
        case 1:snak.push({x:snak[snakCount-1].x-15,y:snak[snakCount-1].y});break;
        case 2:snak.push({x:snak[snakCount-1].x,y:snak[snakCount-1].y-15});break;
        case 3:snak.push({x:snak[snakCount-1].x+15,y:snak[snakCount-1].y});break;
        case 4:snak.push({x:snak[snakCount-1].x,y:snak[snakCount-1].y+15});break;
    }
    snak.shift();
    //清空画布
    ctx.clearRect(0,0,450,450);
    //重新绘制
    drawRect();
}

function keyDown(e){
    switch(e.keyCode){
        case 37:toGo=1;break;
        case 38:toGo=2;break;
        case 39:toGo=3;break;
        case 40:toGo=4;break;
    }

}
window.onload = function(){
    document.onkeydown = function(e){
        console.log(e);
        keyDown(e);    
    }
//  定时器
    setInterval(move,400);
    start();
    drawRect();