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('
Points: 0
Kills: 0
Game Over
'); - $('#'+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('
Points: 0
Kills: 0
Game Over
'); $('.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();