javascript 碰撞检测
2011-06-24 09:14 dbfox 阅读(1104) 评论(0) 编辑 收藏 举报前段时间 看了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);