JavaScript实现贪吃蛇小游戏中游戏引擎和食物的构建

一、前言和面向对象分析

诺基亚黑白屏手机时代精品小游戏贪吃蛇一度成为人们情感的怀念，编程类型和思想也在不断向前发展。现如今JavaScript作为前端中发挥着至关作用的一门程序语言，好多游戏的动画效果的实现离不开它。

js中面向对象、原型对象和继承的思想分析下下面的这张效果图：

贪吃蛇界面效果.png

找出上图中的对象，分析每个对象具有的属性及它能产生的行为。

游戏引擎：属性——呈现效果背景，边界，方格；页面加载启动，背景呈现；
食物：属性——方格高宽、背景颜色；行为——在游戏引擎中随机出现，被吃掉后当前位置消失再随机出现更新位置；
蛇身：属性——蛇身长度、背景颜色；行为——在游戏引擎中定时移动，随键盘方向键控制改变移动方向，吃掉食物后身体变长；（此处暂不构建蛇身的行为，后期会补充蛇身移动的控制代码）

二、先看下html和css布局

html结构其实很简单，页面上需要的元素对象在js文件中可以通过创建节点元素实现，考虑好元素的css属性即渲染修饰效果。

三、激动人心的js模块

创建游戏引擎（GameBox.js）

游戏引擎在页面一加载就出现，效果图上10*10的小方格。

var GameBox = {
    rows: 10, //表格行数
    cols: 10,  //表格列数
    allTds : [], //保存td元素
    
    food : null, //食物对象
     //启动属性
    start: function () {
       
        GameBox.init();// 游戏初始化
        
        this.food = new Food(); // 赋予food方法

   },
    //游戏引擎初始化方法
    init: function () {
        //创建表格元素
        var oTable = document.createElement("table");
        // for循环，创建表格行
        for (var i = 0; i < GameBox.rows; i++) {
            var oTr = document.createElement("tr");
            //声明空数组变量，便于保存td元素
            var arr = [];
            for (var j = 0; j < GameBox.cols; j++) {
                var oTd = document.createElement("td");
                oTr.appendChild(oTd);
                arr.push(oTd);//向空数组中加入td元素
            }
            GameBox.allTds.push(arr);//向allTds加入arr
            oTable.appendChild(oTr);
        }
        document.body.appendChild(oTable);
    },

    // 清空之前的渲染内容
    refresh: function() {
        // 遍历所有td，让背景颜色为白色
        for (var i = 0; i < this.rows; i++) {
            for (var j = 0; j < this.cols; j++) {
                this.allTds[i][j].className = "";               
            }
        }       
    }
}

创建食物方法（Food.js）

注意啦：食物的随机出现，体现在allTds对象上，下标值的改变，保存的数组下标值得改变，进而反馈到td元素上。

function Food(){
    this.x = 0;
    this.y = 0;
    this.change();// 调用属性方法，改变食物的位置
}
Food.prototype.show = function(){
    GameBox.allTds[this.y][this.x].className = "food";//给食物添加样式
}
//判断食物是否被吃掉，在蛇身里
Food.prototype.isFoodInSnake = function() {
    var nodes = GameBox.snake.nodes;

    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].x == this.x && nodes[i].y == this.y) {

            return true;
        }
    }

    return false;
}
//食物方法的原型对象增加属性方法改变位置
Food.prototype.change = function(){
//利用随机数变化下标值
    this.x = parseInt(Math.random()*GameBox.cols);
    this.y = parseInt(Math.random()*GameBox.rows);
    if (this.isFoodInSnake()) {
        this.change();
    }
}

写在后面，Snake.js代码块在后续会进行补充，敬请期待！