本文實例講述了JS實現(xiàn)的貪吃蛇游戲。分享給大家供大家參考，具體如下：

github項目地址：https://github.com/LEERTRT/Snake

在<script></script>中，文檔加載完畢后調(diào)用：

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

其中構(gòu)造函數(shù)Game()接收canvas的id作為參數(shù)，實例化對象以后，調(diào)用init()函數(shù)，init()函數(shù)里面有三個函數(shù)，接下來會一個一個說明。

/** * 初始化函數(shù)，生成構(gòu)造函數(shù)實例后調(diào)用此函數(shù) */this.init = function () {  /**   * 初始化畫布和果實   */  this.initData();  /**   * 1.清空畫布；2.畫背景格子；3.畫蛇；4.畫果實   */  this.draw();  /**   * 綁定事件：方向和速度控制   */  this.bindEvents();};

第一個，initData()：在initData()函數(shù)里面，聲明畫布，果實，畫布大小，格子數(shù)量，方向，速度，蛇等：

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;//畫布行列數(shù)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));

把隨機生成的rdx, rdy放進記錄蛇體的數(shù)組中：

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

到此，initData()完成。

第二個，draw()：draw()函數(shù)包含四步：1.清空畫布；2.畫背景；3.畫蛇；4.畫果實：

this.draw = function () {  /**   * 清空畫布   */  this.clear();  /**   * 畫畫布   */  this.drawBG();  /**   * 畫蛇體   */  this.drawBody();  /**   *畫果實   */  this.drawFood();};

1.清空畫布

使用clearRect(0,0,size,size)即可：

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

2.畫背景

每個格子大小 = 畫布尺寸/格子數(shù)量，然后一行一行畫就行了，和畫棋盤一樣：

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);  }}

3.畫蛇

前面在initData()里面，把隨機生成的蛇的位置放進了bodyNodes數(shù)組里面，

這里把bodyNodes里面的元素用each()取出來畫即可。因為后面當蛇吃了果實后，bodyNodes里面的

元素會增加，所以用each取出所有元素繪畫，現(xiàn)在是在初始化階段，bodyNodes里面只有在initData()