I am creating a simple game with HTML, CSS and JavaScript (jQuery). There is a main ship, where all the particles (bullets) come from. Each of them is just divs. Then the enemy divs are randomly placed across the screen.
I am looking for an effective way to check if each particle strikes a specific enemy. I have something that starts to work well, but gets bogged down incredibly fast. I'm new to js, so my code is pretty dirty and probably inefficient in many other ways. Any suggestions would be greatly appreciated!
Here is my section that creates enemies and tests for striking:
var createEnemy = function(){
var xRandom = Math.floor(Math.random() * (containerW-50));
var yRandom = Math.floor(Math.random() * (containerH-50));
var newEnemy = $('<div class="enemy"></div>');
$(newEnemy).css({'left':xRandom,'top':yRandom}).appendTo('#container').fadeTo(200, .7);
var hitTest = setInterval(function(){
var enemy = $(newEnemy);
var particle = $('.particle');
var enemyT = enemy.offset().top;
var enemyB = enemy.height()+enemyT;
var enemyL = enemy.offset().left;
var enemyR = enemy.width()+enemyL;
var particleT = particle.offset().top;
var particleB = particle.height();
var particleL = particle.offset().left;
var particleR = particle.width();
if(particleT >= enemyT-particleB && particleT <= enemyB && particleL >= enemyL-particleR && particleL <= enemyR){
enemy.hide();
var removeEnemy = setTimeout(function(){
newEnemy.remove();
clearInterval(hitTest, 0);
},500);
}
}, 20);
}
var enemyInt = setInterval(createEnemy, 1000);
Does it get something like this to work smoothly in the browser realistically? I only need a code? You will probably need more context, so:
1/12/2012: //
. Chrome Safari .
3/22/2011: fadeOut(), (), , ( ). HitTest, , , , , , . Interval hitTest. , , , .