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);