贪吃蛇的使命 | 零基础入门贪吃蛇游戏（附源码、演示地址）

//伪代码
function 初始化数据（）{
    1、初始化贪吃蛇运动区域大小
    2、初始化canvas画布上下文对象
    3、初始化贪吃蛇的坐标
    4、初始化贪吃蛇运动的方向
    5、初始化玩家分数
    6、初始化贪吃蛇的速度
    7、初始化食物
    8、初始化蛇
    9、初始化蛇的状态
 }

function 开始游戏（）{
  interval = setInterval(运动方法（）, speed);
  document.onkeydown = function(event) {
        var event = event || window.event;
        按键监控方法(event.keyCode);
    }
}

function 按键监控方法（key）{
   switch(key){
      case: 37
      左
      break;
       case: 38
      上
      break;
       case: 39
      右
      break;
       case: 40
      下
      break;
      case: 32
      开始/暂停
      break;
      case: 107
      加速
      break;
      case: 109
      减速
      break;
   }
}

function 运动方法（）{
  switch(moveTo){
     case 0:
       向左运动；
       break;
      case 1:
       向上运动；
       break;
      case 2:
       向右运动；
       break;
      case 3:
       向下运动；
       break;
  }

  画地图方法（）;
  画食物方法（）;
  画蛇方法（）;
  是否吃到食物方法（）;
  是否死亡方法（）;
}

function 画地图方法（）{
  画地图代码实现.....
}

function 画食物方法（）{
   画食物代码实现.....
}

function 画蛇方法（）{
   画蛇代码实现.....
}

function 是否吃到食物方法（）{
  if(蛇头左上角的坐标==食物左上角的坐标){
     //吃到食物
     1、分数加一;
     2、重新绘制食物
     3、增加蛇身
  }
}

function 是否死亡方法（）{
   1、判断蛇头左上角坐标是否越过上、下、左、右任一墙壁;
   2、判断蛇头左上角坐标是否与自己身体相撞;
}

function init() {
    ROWS = 35; //初始化行数
    COLS = 25; //初始化列数
    BLOCK_SIZE = 20;
    snakeCount = 3;
    moveTo = 2;
    score=0;
    document.getElementById("score").innerHTML=score;
    CONTEXT = document.getElementById('canvas').getContext('2d'); //初始化画布上下文对象的引用
    for(var i = 0; i < snakeCount; i++) {
        snakes[i] = {
            x: i * BLOCK_SIZE,
            y: 0
        };
    }
    isStop=false;
    speed=500;
    addFood();
    drawMap(); //初始化场地
    drawSnake(); //初始化蛇
    drawFood(); //初始化食物
}

function drawMap() {
    CONTEXT.clearRect(0, 0, BLOCK_SIZE * ROWS, BLOCK_SIZE * COLS);
    //画横线
    for(var i = 0; i < COLS; i++) {
        CONTEXT.beginPath();
        CONTEXT.moveTo(0, i * BLOCK_SIZE);
        CONTEXT.lineTo(BLOCK_SIZE * ROWS, i * BLOCK_SIZE);
        CONTEXT.strokeStyle = "gray";
        CONTEXT.lineWidth=1;
        CONTEXT.stroke();
    }
    //画竖线
    for(var i = 0; i < ROWS; i++) {
        CONTEXT.beginPath();
        CONTEXT.moveTo(i * BLOCK_SIZE, 0);
        CONTEXT.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * COLS);
        CONTEXT.strokeStyle = "gray";
        CONTEXT.lineWidth=1;
        CONTEXT.stroke();
    }
}

function isDie() {
    if(snakes[snakeCount - 1].x == -20 || snakes[snakeCount - 1].x == BLOCK_SIZE * ROWS ||
        snakes[snakeCount - 1].y == -20 || snakes[snakeCount - 1].y == BLOCK_SIZE * COLS) {
        clearInterval(interval);
        document.getElementById("model2").style.display='block';
    }
    for(var i = 0; i < snakeCount - 1; i++) {
        if(snakes[snakeCount - 1].x == snakes[i].x && snakes[snakeCount - 1].y == snakes[i].y) {
            clearInterval(interval);
            document.getElementById("model2").style.display='block';
        }
    }
}