pdb-js/src/assets/js/invaders.js

@@ -7,32 +7,24 @@ 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) {
+    invaders_parentDivId = parentDivId;
 	
-	// create a copy of the parentDiv
+    $('body').append('<div id="'+invaders_area+'"><div id="invaders_points">Points: 0</div><div id="invaders_kills">Kills: 0</div><div id="invaders_game_over"><div class="invader_notify">Game Over</div></div></div>');
-	// and set it at the exact same position
-	var parent = $('#'+parentDivId);
-    var height = parent.height();
-    var width = parent.width();
-    $('body').append('<div id="'+invaders_parentDivId+'"><div id="invaders_points">Points: 0</div><div id="invaders_kills">Kills: 0</div><div id="invaders_game_over"><div class="invader_notify">Game Over</div></div></div>');
-    $('#'+invaders_parentDivId).offset({ top: parent.offset().top, left: parent.offset().left})
-    $('#'+invaders_parentDivId).height(parent.height());
-    $('#'+invaders_parentDivId).width(parent.width());
-    
-    $('#'+invaders_parentDivId)
     
     $('.invader_notify').click(function() {
     	// restart the game
-    	$('#'+invaders_parentDivId).remove();
+    	$('#'+invaders_area).remove();
-    	initInvaders(parentDivId);
+    	initInvaders(invaders_parentDivId);
     	invaders_game_over = false;
     	invaders_kills = 0;
 		  invaders_points = 0;
@@ -49,7 +41,7 @@ function gameOver() {
 }
 
 function pauseInvaders() {
-	$('#'+invaders_parentDivId).hide();
+	$('#'+invaders_area).hide();
 	clearIntervals();
 }
 
@@ -60,15 +52,25 @@ function clearIntervals() {
 
 function startInvaders() {
 
-	$('#'+invaders_parentDivId).show();
+  // 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_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