JS实现的贪吃蛇游戏案例详解

本文实例讲述了JS实现的贪吃蛇游戏。分享给大家供大家参考，具体如下：

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

在<script></script>中，文档加载完毕后调用：

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

其中构造函数Game()接收canvas的id作为参数，实例化对象以后，调用init()函数，init()函数里面有三个函数，接下来会一个一个说明。

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

第一个，initData()：在initData()函数里面，声明画布，果实，画布大小，格子数量，方向，速度，蛇等：

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

把随机生成的rdx, rdy放进记录蛇体的数组中：

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

到此，initData()完成。

第二个，draw()：draw()函数包含四步：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.画背景

每个格子大小 = 画布尺寸/格子数量，然后一行一行画就行了，和画棋盘一样：

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数组里面，

这里把bodyNodes里面的元素用each()取出来画即可。因为后面当蛇吃了果实后，bodyNodes里面的

元素会增加，所以用each取出所有元素绘画，现在是在初始化阶段，bodyNodes里面只有在initData()