JavaScript Canvas 贪吃蛇游戏实现详解

$(function () {
  var game = new Game("canvas");
  game.init();
});

/**
 * 初始化函数，生成构造函数实例后调用此函数
 */
this.init = function () {
  /**
   * 初始化画布和果实
   */
  this.initData();
  /**
   * 1.清空画布；2.画背景格子；3.画蛇；4.画果实
   */
  this.draw();
  /**
   * 绑定事件：方向和速度控制
   */
  this.bindEvents();
};

var canvas = document.getElementById(id);
if (canvas && canvas.getContext) {
  this.ctx = canvas.getContext('2d');
}
this.foodNode = null;//果实
this.size = canvas.width || $(canvas).width();//画布大小
this.columns = 50;//画布行列数
this.direction = 0;//方向
this.speed = 10;//速度
this.bodyNodes = [];//蛇体

var rdx = Math.round(Math.random() * (this.columns - 1));
var rdy = Math.round(Math.random() * (this.columns - 1));

this.bodyNodes.push({
  x: rdx, y: rdy
});

this.draw = function () {
  /**
   * 清空画布
   */
  this.clear();
  /**
   * 画画布
   */
  this.drawBG();
  /**
   * 画蛇体
   */
  this.drawBody();
  /**
   *画果实
   */
  this.drawFood();
};

this.ctx.clearRect(0, 0, this.size, this.size);

var _this = this;
var x = 0, y = 0, size = _this.size / _this.columns;
_this.ctx.strokeStyle = "rgba(124,124,124,0.1)";
//一行一行画画布
for (var i = 0; i < _this.columns; i++) {
  y = i * size;
  for (var j = 0; j < _this.columns; j++) {
    x = j * size;
    _this.ctx.strokeRect(x, y, size, size);
  }
}

var nodes = _this.bodyNodes;
$.each(nodes, function (i, node) {
  _this.ctx.fillRect(node.x * size, node.y * size, size, size);
});

//如果果实重新出现的位置和蛇体重合，重画果实
if (_this.Utils.contains(_this.bodyNodes, {x: rdx, y: rdy})) {
   _this.drawFood();
} else {
   _this.ctx.strokeRect(rdx * size, rdy * size, size, size);
   _this.foodNode = {x: rdx, y: rdy};
}

case 37: // 左, 1表示右，即当蛇向右行时，按左键不能改变方向，下面同理
  if (_this.direction == 1) return;
  _this.direction = -1;
  break;

this.food = function () {
  var _this = this;
  var headNode = _this.bodyNodes[0];
  //吃到果实
  if (_this.Utils.equals(headNode, _this.foodNode)) {
    _this.bodyNodes.push(_this.foodNode);//push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
    _this.foodNode = null;
    var score = _this.bodyNodes.length - 1;
    $('#score').text(score);
    if (score % 10 == 0) {//加速提高难度
      _this.speed += 10;
      _this.timerController();
    }
  }
};

this.timerController = function () {
  var _this = this;
  if (_this.timer) {
    clearInterval(_this.timer);
  }
  _this.timer = setInterval(function () {
    _this.move();
  }, 6000 / _this.speed);
  $('#speed').text(_this.speed);
};

this.Utils = {
  contains: function (arr, o) {
    var _this = this;
    if (!arr || !o) return false;
    var flag = false;
    $.each(arr, function () {
      if (!this) return true;
      if (_this.equals(this, o)) {
        flag = true;
        return false;
      }
    });
    return flag;
  },
  equals: function (o1, o2) {
    if (o1 == o2) return true;
    if (!o1 || !o2) return false;
    return o1.x == o2.x && o1.y == o2.y;
  }
};