先看繼承和冒充；#

function a(){};
b.prototye= new a()'
b 繼承a,是可以把a的屬性和行為一起繼承過來的，不止a 函數(shù)里面的還有a.prototype也是可以繼承的。
冒充：
function a(){};
function b(){
a.call(this,參數(shù))
}
b冒充a，只能冒充a函數(shù)里面的東西，對于a.prototype則冒充不了。
如果又繼承又冒充 那就可以把屬性和行為一起弄繼承過來，還可以修改。
new的步驟- new: 1 創(chuàng)建一個空對象 t
2 this 設(shè)為 t
3 執(zhí)行函數(shù)中代碼
4 返回函數(shù)

貪吃蛇： 面對對象寫，#

實踐后的錯誤總結(jié)：

1：snake 對象 allTds :[], 這里的賦值用“:”, 結(jié)果用了= 就報錯了。

2：A.appendChild(B)
A.push(B)都是（里面的）到A，順序有點混淆。
3：document.body.appendChild(oTable)
忘了添加到body里。

2：food 對象

1：設(shè)置初始位置忘了調(diào)用this.change();函數(shù)，

function Food(){
    this.x=0;
    this.y=0;
    this.change();
}

2:寫change的時候忘了調(diào)用show();
3:this.x=parseInt( Math.random()*aGame.hang );
這里要用aGame.hang，不能用y。
4：

（1），不出現(xiàn)表格；原因 1，

1： 先找對象 ：蛇、 食物、場景

先寫場景，因為蛇還不會讓它動。

對象一：場景，專業(yè)點叫 游戲引擎。

游戲場景可以理解為固定變化很少，大部分只有一個，用 字面量的形式會更好，var gGameBox={};里面加場景的屬性和行為。
這里用的是表格來寫，這樣蛇的移動位置較好，
開始寫
（1）定義 行數(shù)：rows:20, 注意?。?！在對象里，等于是“：””，結(jié)束符號用“,”逗號，都是英文狀態(tài)下。
（2）游戲開始，場景的行為。

start: function() {

        gGameBox.init(); // 游戲初始化

        this.food = new Food();
        
    },

這里的 gGameBox.init(); // 是游戲初始化，單獨寫出來，因為start里面有很多行為。這樣看上去思路清晰。

init: function() {
        // 場景布置好, 用表格來做
        var oTable = document.createElement("table");
    
        for (var i = 0; i < gGameBox.rows; i++)
        {
            // 創(chuàng)建tr
            var oTr = document.createElement("tr"); 

            // 每一行，定義1個空數(shù)組
            var arr = [];

            for (var j = 0; j < gGameBox.cols; j++) {
                // 創(chuàng)建td
                var oTd = document.createElement("td"); 

                oTr.appendChild(oTd);

                // 將td放到空數(shù)組中
                arr.push(oTd);
            }
            // 將當前行所有的td，壓入到 allTds 屬性中
            gGameBox.allTds.push(arr);

            oTable.appendChild(oTr);
        }

        // 添加到body
        document.body.appendChild(oTable);
    }

通過新增表格-行數(shù)列數(shù)已知-先寫行-寫列-最先建一個空數(shù)組（用來標記位置）-每行是一個數(shù)組，每一列也是一個數(shù)組，這樣每個表格都是一個數(shù)組，方便定位。

對象二：食物

因為食物是蛇吃掉后就要在隨機位置出現(xiàn)，這種用 構(gòu)造函數(shù)寫 較好。

function Food(){
    this.x=0;
    this.y=0;
    this.change();
}
Food.prototype.change=function(){
    this.x=parseInt( Math.random()*gGameBox.rows )
    this.y=parseInt( Math.random()*gGameBox.cols )
        this.show();
}

Food.prototype.show=function(){
    gGameBox.allTds[this.y][this.x].className = "food";
}

食物對象

1：先設(shè)置初始位置 x=0;y=0，在初始位置之后要變化位置，調(diào)用this.change();

2：改變位置，利用寫的表格加上隨機數(shù)。

this.x=parseInt( Math.random()*gGameBox.rows )

3：顯示食物：

原理就是 把表格的背景顏色換掉，首先是找到哪一個表格，這時候就要用行數(shù)和列數(shù)，

gGameBox.allTds[this.y][this.x].className = "food";

HTML 中

要引用這這兩個對象的js.

<script src="GameBox.js"></script>
    <script src="WZYFOOD.js"></script>

最后調(diào)用
gGameBox.start();頁面中就會出現(xiàn)一個紅色的表格，每次刷新位置是隨機的。

image.png

image.png