点滴积累

面向对象分析

对象的属性以及行为的分析，在坦克大战下游戏中，分别对每个对象进行分析:

坦克(玩家)

       属性：位置、大小、颜色、生命值、步伐、方向

       行为：开火、移动、爆炸、捡道具 、碰撞检测

子弹

       属性：位置、大小、颜色、生命值、步伐、方向

       行为：移动、爆炸 、碰撞检测

土墙

       属性：位置、大小、颜色

       行为： 碰撞检测

   钢砖

       属性：位置、大小、颜色

       行为： 碰撞检测

   水

       属性：位置、大小、颜色

       行为： 碰撞检测

   草坪

       属性：位置、大小、颜色

       行为： 碰撞检测 

例如子弹：

function Bullet(dom){

    this.direction = Direction.TD; //子弹的方向

 //创建子弹（大小、颜色）

    this.element = document.createElement("div");

        this.element.setAttribute("class","zidan");

        this.element.setAttribute("style","top:0px;left:0px;width:4px;height:4px;background:#ff0000;");

        dom.appendChild(this.element);

//子弹的位置属性

 this.setLocation=function(x,y){

        this.element.style.left = x + "px";

        this.element.style.top = y + "px";

    }

/*设置子弹方向*/

    this.setDirection = function(dir){

        this.direction = dir;

    }

//子弹移动

     this.move = function(){

         switch (this.direction){

             case Direction.TU:this.element.style.top = parseInt(this.element.style.top) - 10 + "px";

                               break;

             case Direction.TD:this.element.style.top = parseInt(this.element.style.top) + 10 + "px";

                               break;

             case Direction.TL:this.element.style.left = parseInt(this.element.style.left) - 10 + "px";

                               break;

             case Direction.TR:this.element.style.left = parseInt(this.element.style.left) + 10 + "px";

                               break;

         }

//若子弹超出界面则删除子弹

         if(parseInt(this.element.style.top)<0 || parseInt(this.element.style.top)>772 ||

             parseInt(this.element.style.left)<0 || parseInt(this.element.style.left)>772){

             this.element.remove();

         }

     }

 /* 检测是否碰撞 */

     this.hit = function(obj){

        if(obj != undefined){

            var r1 = obj.getRectangle(); // 被碰撞对象的矩形区域

            var r2 = this.getRectangle();// 子弹矩形区域

            if(r2.intersects(r1) == true){// 被碰撞

                // 删除子弹

                this.element.remove();

                bullets.removeByIndex(this);// 删除数组中子弹对象

                obj.element.remove();

                world.removeByIndex(obj);

            }

        }

    }

   // Rectangle属性

    this.getRectangle  = function(){

        var x = parseInt(this.element.style.left);

        var y = parseInt(this.element.style.top);

        var width  = this.element.offsetWidth;

        var height = this.element.offsetHeight;

        return new Rectangle(x, y, width, height);

    }

}

提醒自己的一点：对其他的也一一面向对象进行分析，其中每个对象的节点名（this.element）尽可能统一化，以便对其                                  的通用，以前常常喜欢个性化命名。

    这次练习更加熟悉碰撞检测的流程，需要对每个对象都设置“Rectangle属性”,进行碰撞检测。以及对子弹和坦克本身的位置关系的设置。。。子弹的位置随坦克位置的改变而改变。