js贪吃蛇

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>snake</title>
</head>
<body>
    <canvas id="game"  width="450px"  height="450px"  style="border:1px solid blue; margin: 30px auto;display:block;"></canvas>
    <script type="text/javascript">
    //画布包含30个格子
    var canvas = document.getElementById("game");
    var ctx = canvas.getContext("2d");
    var width = 15;
    /* for(var i = 0 ; i < 30 ; i ++){
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(0,i*width);
        ctx.lineTo(450,i*width);
        ctx.closePath();
        ctx.stroke();
    }
    for(var i = 0 ; i < 30 ; i ++){
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(i*width,0);
        ctx.lineTo(i*width,450);
        ctx.closePath();
        ctx.stroke();
    } */
    //定义格子的类  x , y  为坐标， f  为方向
    // 1 向左， -1 向右   ， 2 向上  ， -2 向下
    function Cell(x,y,f){
        this.x = x;
        this.y = y;
        this.f = f;
    }
    function Food(x ,y ){
        this.x = x;
        this.y = y ;
    }
    //蛇的身体
    var snake = [];
    var length = 6;
    var speed = 200;
    var food = new Food(15,15);
    for(var i= 0 ; i < length ; i ++){
        snake[i] = new Cell(i,0,-1);
    }

    //监听键盘按下事件
    document.onkeydown = function(e){
        var code = e.keyCode;
        var direction = 0;
        switch(code){
            case 37:direction = 1;break;
            case 38:direction = 2;break;
            case 39:direction = -1;break;
            case 40:direction = -2;break;
        }
        var head = snake[snake.length - 1];
        if(direction != 0 &&  ( head.f + direction ) != 0 ){
            moveSnake(direction);
        }
    }
    
    //根据方向移动
    function moveSnake(direction){
        var head = snake[snake.length-1];
        if(!direction){
            direction = head.f;
        }
        var newSnake = [];
        var newHead = new Cell(head.x,head.y,head.f);
        newHead.f = direction;
        //将尾巴丢掉，把剩下的放到新的数组中
        for(var i = 1 ; i < snake.length ; i ++){
            newSnake[i - 1] = snake[i];
        }
        switch(direction){
          case 1:newHead.x -- ;break;
          case 2:newHead.y -- ;break;
          case -1:newHead.x ++ ;break;
          case -2:newHead.y ++ ;break;
        }
        newSnake[newSnake.length] = newHead;
        snake = newSnake;
        gameOver()
        draw();
    }
    
    function gameOver(){
        var head = snake[snake.length - 1];
        //边界检查
        if(head.x > 29 || head.y > 29 || head.x < 0 || head.y < 0 ){
            alert("Game Over ~");
            window.location.reload(); 
        }
        //自己不能撞到自己
        for(var i = 0 ; i < snake.length - 1 ; i ++){
            if(snake[i].x == head.x && snake[i].y == head.y){
                alert("Game Over ~");
                window.location.reload(); 
            }
        }
    }
    //初始化时绘制
    draw();
    function draw(){
        ctx.clearRect(0,0,450,450);
        //绘制食物
        ctx.fillStyle = "green";
        ctx.beginPath();
        ctx.rect(food.x*width,food.y*width,width,width);
        ctx.closePath();
        ctx.fill();
        var  head = snake[snake.length-1];
        if(food.x == head.x && food.y == head.y){
            var newHead = new Cell(head.x,head.y , head.f);
            switch(newHead.f){
              case 1:newHead.x -- ;break;
              case 2:newHead.y -- ;break;
              case -1:newHead.x ++ ;break;
              case -2:newHead.y ++ ;break;
            }
            snake[snake.length] = newHead;
            randomFood();
        }
        //绘制蛇
        for(var i = 0 ;i <snake.length ;i ++){
            var cell = snake[i];
            ctx.fillStyle = "gray";
            if(i == snake.length - 1){
                ctx.fillStyle = "red";
            }
            ctx.beginPath();
            ctx.rect(cell.x*width,cell.y*width,width,width);
            ctx.closePath();
            ctx.fill();
        }
    }
    //随机产生食物的坐标
    function randomFood(){
        food.x = Math.ceil(Math.random()*28)+1;
        food.y = Math.ceil(Math.random()*28)+1;
    }
    //自动移动
    var autoRun = setInterval(moveSnake,speed);
    
    </script>
</body>
</html>