javascript 碰撞检测

前段时间 看了javascript 的坦克 大战，很是喜欢，自己对javascript 语言也是很 喜欢的

中间用到了碰撞检测，我还想 在 学习下寻路算法

碰撞检测也很简单，可是也有一些技巧性的东西，所以写了下来，希望大家批评指正，共同学习共同进步

演示地址http://www.foxidea.net/DEMO/pengzhuangjiance.html

var DOCBODY=document.body;

Array.prototype.remove = function (_element) {
    var arr = this;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === _element) {
            arr.splice(i, 1);
        }
    }
}

Array.prototype.exists = function (_element) {
    var arr = this;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === _element) {
            return true;
        }
    }
    return false;
}

Array.prototype.del = function (_inx) {
    this.splice(_inx, 1);
}







//定时器
var Timer = {};
(
    function (obj) {
        var arr = [];
        var T = null;
        var Hz = 50; //频率
        
        var execute = function () {
            
            var fun = function () {
                var arr_length = arr.length;

                if (arr_length > 0) {
                    for (var i = 0; i < arr_length; i++) {

                        if(arr[i]){
                            arr[i]();
                        }
                    }
                } else {
                    clearInterval(T);
                }
            }
            
            
            T = setInterval(fun, Hz);
        }
        
        var start = function () {
            if (!T) {
                execute();
            }
        }
        
        obj.add = function (_obj) {
           
            
            arr.push(_obj);
            start();
        }
        
       
        
        obj.remove = function (_obj) {
            arr.remove(_obj);
          
        }
        
})(Timer);

//碰撞检测对象
var CollDeteObj = {};
(
    function (obj) {
        var arr = [];
        
        var exists = function (_obj) {
            return arr.exists(_obj);
        }
        
        var add = function (_obj) {
            arr.push(_obj);
        }
        
        obj.addObject = function (_obj) {
            var bool = exists(_obj);
            if (!bool)
                add(_obj);
            return bool;
        }
        
        //判断 _obj1 与 _obj2 是否 重合  _obj1 _obj2 都是 物体
        var isCoincide = function (_obj1, _obj2) {
            var _XDif = Math.abs(_obj1.x() - _obj2.x());
            var _YDif = Math.abs(_obj1.y() - _obj2.y());
    
            return (_XDif <= _obj1.width() && _YDif <= _obj1.height()) || (_XDif <= _obj2.width() && _YDif <= _obj2.height());
        }
        
        obj.remove=function(_obj){
            arr.remove(_obj);
        }
        var k=0;
        
        //Collision detection 为 物体添加 碰撞检测
        obj.addCollDete = function (_obj) {
            
            var fun = function () {
                
                for (var i = 0; i < arr.length; i++) {
                    
                    if (arr[i] !== _obj) {
                        
                        if (isCoincide(arr[i],_obj)) {
                            
                            //当发生碰撞之时 执行  物体的 碰撞 函数 colldete()                            
                            _obj.colldete(arr[i]);
                 
                            
                            Timer.remove(fun);
                            
                            
                        }
                    }
                }
            }
            
            Timer.add(fun);
        }
    }
)(CollDeteObj);







//拥有 html 元素 和 width height x y 添加子元素 和 删除子元素

function HtmlObject(){
    var obj=this;
    var config = arguments[0] || {
        x : 10,
        y : 10,
        width : 100,
        height : 100
    };
    
    var html = document.createElement("div");
    
    html.style.cssText = "border:1px solid #000;top:" + config.y + "px;left:" + config.x + 
    "px;width:" + config.width + "px;height:" + config.height + "px;";
    
    obj.html = html;
    
    obj.width=function(){
        
        if(arguments[0]){
            html.style.width=arguments[0]+'px';
        }else{
            return parseInt(html.style.width.replace('px',''));
        }
    }
    
    
    obj.height=function(){
        if(arguments[0]){
            html.style.height=arguments[0]+'px';
        }else{
            return parseInt(html.style.height.replace('px',''));
        }
    }
    
    obj.x=function(){
        if(arguments[0]){
            html.style.left=arguments[0]+'px';
        }else{
            return parseInt(html.style.left.replace('px',''));
        }
    }
    
    obj.y=function(){
        if(arguments[0]){
            html.style.top=arguments[0]+'px';
        }else{
            return parseInt(html.style.top.replace('px',''));
        }
    }
    
    obj.append=function(_obj){
        html.appendChild(_obj.html);
    }
    
    obj.remove=function(_obj){
        html.removeChild(_obj.html);
    }
}


//舞台 继承 HtmlObject
var Stage={};
(
    function(){
        
        var config = arguments[0] || {
            x : 10,
            y : 10,
            width : 800,
            height : 500
        };
        
        Stage=new HtmlObject(config);        
        Stage.html.style.position="relative";
        DOCBODY.appendChild(Stage.html);
    }
)();

// 舞台元素 继承 HtmlObject
function Element() {    
    var config = arguments[0] || {
        x : 0,
        y : 0,
        width : 100,
        height : 100
    };
    
    var obj=new HtmlObject(config);    
    obj.html.style.position="absolute";
    
    obj.dispose=function(){
        //从碰撞检测集合中 删除 该 对象
        CollDeteObj.remove(obj);
        //从舞台中移除 该对象
        Stage.remove(obj);            
    }
    //发生碰撞
    obj.colldete=function(_obj){
                
        _obj.dispose();
        obj.dispose();
    }
    
    return obj;    
}



var o1 = new Element({
            x : 0,
            y : 0,
            width : 100,
            height : 100
            
        });
var o2 = new Element({
            x : 200,
            y : 0,
            width : 100,
            height : 100
            
        });
var o3 = new Element({
            x : 400,
            y : 0,
            width : 100,
            height : 100
            
        });
var o4 = new Element({
            x : 600,
            y : 0,
            width : 100,
            height : 100
        });




Stage.append(o1);    
Stage.append(o2);    
Stage.append(o3);    
Stage.append(o4);    

CollDeteObj.addObject(o1);
CollDeteObj.addObject(o2);
CollDeteObj.addObject(o3);
CollDeteObj.addObject(o4);



 
CollDeteObj.addCollDete(o2);
CollDeteObj.addCollDete(o4);


function go(obj,i){
        
    var fun=function(){
        if(obj){
            if(obj.x()-1>=0){
                i-=1
                obj.x(i);
            }else{
                Timer.remove(fun);
            }
        }else{
            Timer.remove(fun);
        }
    }    
    Timer.add(fun);
}
 
go(o2,200);

go(o4,600);