diff --git a/pdb-js/src/assets/js/invaders.js b/pdb-js/src/assets/js/invaders.js
index 7e730fb..2ae4f69 100644
--- a/pdb-js/src/assets/js/invaders.js
+++ b/pdb-js/src/assets/js/invaders.js
@@ -7,35 +7,27 @@ var invaders_stepSize = 5;
var invaders_margin = 30;
var invaders_city_height = 75;
var invaders_pause = true;
-var invaders_parentDivId = 'invaders_area';
+var invaders_area = 'invaders_area';
var invaders_kills = 0;
var invaders_points = 0;
var invaders_points_kill = 10;
var invaders_points_lost = -50;
var invaders_game_over = false;
var invaders_loop_count = 0;
+var invaders_parentDivId = "invaders";
function initInvaders(parentDivId) {
-
- // create a copy of the parentDiv
- // and set it at the exact same position
- var parent = $('#'+parentDivId);
- var height = parent.height();
- var width = parent.width();
- $('body').append('
');
- $('#'+invaders_parentDivId).offset({ top: parent.offset().top, left: parent.offset().left})
- $('#'+invaders_parentDivId).height(parent.height());
- $('#'+invaders_parentDivId).width(parent.width());
-
- $('#'+invaders_parentDivId)
+ invaders_parentDivId = parentDivId;
+
+ $('body').append('');
$('.invader_notify').click(function() {
// restart the game
- $('#'+invaders_parentDivId).remove();
- initInvaders(parentDivId);
+ $('#'+invaders_area).remove();
+ initInvaders(invaders_parentDivId);
invaders_game_over = false;
invaders_kills = 0;
- invaders_points = 0;
+ invaders_points = 0;
startInvaders();
});
@@ -49,7 +41,7 @@ function gameOver() {
}
function pauseInvaders() {
- $('#'+invaders_parentDivId).hide();
+ $('#'+invaders_area).hide();
clearIntervals();
}
@@ -59,16 +51,26 @@ function clearIntervals() {
}
function startInvaders() {
+
+ // move invaders_area to the same position as the parent div
+ const parent = $('#'+invaders_parentDivId);
+ const height = parent.height();
+ const width = parent.width();
+ const area = document.getElementById(invaders_area);
+ area.style.top=parent.offset().top+"px";
+ area.style.left=parent.offset().left+"px";
+ area.style.height=parent.height()+"px";
+ area.style.width=parent.width()+"px";
- $('#'+invaders_parentDivId).show();
+ $('#'+invaders_area).show();
if (!invaders_game_over) {
if (invaders_count == 0) {
- addInvader(invaders_parentDivId);
+ addInvader(invaders_area);
}
clearIntervals();
- invaders_game_move=window.setInterval("moveRandomly('"+invaders_parentDivId+"')",100);
+ invaders_game_move=window.setInterval("moveRandomly('"+invaders_area+"')",100);
invaders_game_new=window.setInterval("addInvader()", 1000);
}
}
@@ -77,7 +79,7 @@ function startInvaders() {
function addInvader()
{
var id = 'invader_' + invaders_count++;
- var parent = $('#'+invaders_parentDivId);
+ var parent = $('#'+invaders_area);
var height = parent.height();
var width = parent.width();
var top = 10; // start at the top
@@ -114,8 +116,8 @@ function moveRandomly(parentDivId)
var top = invader.position().top;
var left = invader.position().left;
- var parent = $('#'+parentDivId);
- var minTop = parent.position().top;
+ var parent = $('#'+parentDivId);
+ var minTop = parent.position().top;
var maxTop = parent.height();
var width = parent.width();