前段时间 看了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 );
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 );