js实现简单贪吃蛇游戏

编程心得

最近一段时间对于js部分理解起来比较吃力，掌握的内容少之又少，在编程的过程中也是属于懵懵懂懂的状态，凭借对白天老师所讲解的部分记忆，又在课后时间查询，借鉴，思考，坎坎坷坷的先码出一些代码，以此为记。

---

一、编程思路

1、 找对象

① 蛇对象：
属性：长度，起点位置（x，y），当前方向
方法：渲染，更新（按键控制，变长）
②食物对象
属性：大小，背景颜色
方法：渲染，改变位置
③游戏引擎
属性：行数，列数，游戏场景，蛇，食物
方法：初始化（清空场景，启动游戏）

2、实现对象

二、代码实现过程

定义【游戏引擎】对象

var gGameBox = {
    rows: 20,  // 行数
    cols: 20,  // 列数
    allTds: [], // 存储所有的td元素对象
    // 方法： 游戏开始
    start: function() {
        gGameBox.init(); // 游戏初始化   
    },
    // 初始化
    init: function() {
        // 场景布置好, 用表格来做
        var oTable = document.createElement("table");
        for (var i = 0; i < gGameBox.rows; i++)
        {
            // 创建tr
            var oTr = document.createElement("tr"); 
            // 每一行，定义1个空数组
            var arr = [];
            for (var j = 0; j < gGameBox.cols; j++) {
                // 创建td
                var oTd = document.createElement("td"); 
                oTr.appendChild(oTd);
                // 将td放到空数组中
                arr.push(oTd);
            }
            // 将当前行所有的td，压入到 allTds 属性中
            gGameBox.allTds.push(arr);
            oTable.appendChild(oTr);
        }
        // 添加到body
        document.body.appendChild(oTable);
    }
};