贪吃蛇

先看继承和冒充；#

function a(){};
b.prototye= new a()'
b 继承a,是可以把a的属性和行为一起继承过来的，不止a 函数里面的还有a.prototype也是可以继承的。
冒充：
function a(){};
function b(){
a.call(this,参数)
}
b冒充a，只能冒充a函数里面的东西，对于a.prototype则冒充不了。
如果又继承又冒充那就可以把属性和行为一起弄继承过来，还可以修改。
new的步骤- new: 1 创建一个空对象 t
2 this 设为 t
3 执行函数中代码
4 返回函数

贪吃蛇：面对对象写，#

实践后的错误总结：

1：snake 对象 allTds :[], 这里的赋值用“:”, 结果用了= 就报错了。

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

2：food 对象

1：设置初始位置忘了调用this.change();函数，

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

2:写change的时候忘了调用show();
3:this.x=parseInt( Math.random()*aGame.hang );
这里要用aGame.hang，不能用y。
4：

（1），不出现表格；原因 1，

1：先找对象：蛇、食物、场景

先写场景，因为蛇还不会让它动。

对象一：场景，专业点叫游戏引擎。

游戏场景可以理解为固定变化很少，大部分只有一个，用字面量的形式会更好，var gGameBox={};里面加场景的属性和行为。
这里用的是表格来写，这样蛇的移动位置较好，
开始写
（1）定义行数：rows:20, 注意！！！在对象里，等于是“：””，结束符号用“,”逗号，都是英文状态下。
（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++)
        {
            // 创建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);
    }

通过新增表格-行数列数已知-先写行-写列-最先建一个空数组（用来标记位置）-每行是一个数组，每一列也是一个数组，这样每个表格都是一个数组，方便定位。

对象二：食物

因为食物是蛇吃掉后就要在随机位置出现，这种用构造函数写较好。

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：先设置初始位置 x=0;y=0，在初始位置之后要变化位置，调用this.change();

2：改变位置，利用写的表格加上随机数。

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

3：显示食物：

原理就是把表格的背景颜色换掉，首先是找到哪一个表格，这时候就要用行数和列数，

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

HTML 中

要引用这这两个对象的js.

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

最后调用
gGameBox.start();页面中就会出现一个红色的表格，每次刷新位置是随机的。

image.png

最后编辑于：2017.12.11 02:59:21

贪吃蛇