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

转载于:https://www.cnblogs.com/dbfox/archive/2011/06/24/pengzhuangjiance.html