var invaders_game_move; var invaders_game_new; var invaders_max = 50; var invaders_count = 0; var invaders_stepSize = 5; var invaders_margin = 30; var invaders_city_height = 75; var invaders_pause = true; 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; $('body').append('
Points: 0
Kills: 0
Game Over
'); $('.invader_notify').click(function() { // restart the game $('#'+invaders_area).remove(); initInvaders(invaders_parentDivId); invaders_game_over = false; invaders_kills = 0; invaders_points = 0; startInvaders(); }); } function gameOver() { invaders_game_over = true; clearIntervals(); $('.invader').off(); $('#invaders_game_over').show().css('display', 'flex'); } function pauseInvaders() { $('#'+invaders_area).hide(); clearIntervals(); } function clearIntervals() { clearInterval(invaders_game_move); clearInterval(invaders_game_new); } 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_area).show(); if (!invaders_game_over) { if (invaders_count == 0) { addInvader(invaders_area); } clearIntervals(); invaders_game_move=window.setInterval("moveRandomly('"+invaders_area+"')",100); invaders_game_new=window.setInterval("addInvader()", 1000); } } function addInvader() { var id = 'invader_' + invaders_count++; var parent = $('#'+invaders_area); var height = parent.height(); var width = parent.width(); var top = 10; // start at the top var left = invaders_margin + random(width-2*invaders_margin); // spread horizontally, but keep margin to left and right parent.append(''); $("#"+id).click(function() { addPoints(invaders_points_kill); invaders_kills++; $('#invaders_kills').text('Kills: ' + invaders_kills); $(this).remove(); }); } function addPoints(increment){ invaders_points += increment; $('#invaders_points').text('Points: ' + invaders_points); if (invaders_points < 0) { gameOver(); } } function moveRandomly(parentDivId) { invaders_loop_count++; $('.invader').each(function(index) { var invader = $(this); var invaderNumber = parseInt(invader.attr('id').replace(/^\D+/g, '')) if (invaderNumber % 5 == invaders_loop_count % 5) { var top = invader.position().top; var left = invader.position().left; var parent = $('#'+parentDivId); var minTop = parent.position().top; var maxTop = parent.height(); var width = parent.width(); var newTop = top + invaders_stepSize; var newLeft = left + moveIncrement(0, width, left); if (newTop > (maxTop - invaders_city_height)) { // reached the city, you are loosing points addPoints(invaders_points_lost); $(this).remove(); } else { invader.css({ "top" : (newTop) + "px", "left": (newLeft) + "px" }); } } }); } function moveIncrement(minValue, maxValue, currentValue) { if (currentValue < minValue+ invaders_margin) { return invaders_stepSize; } if (currentValue + invaders_margin > maxValue) { return -invaders_stepSize; } return random(2) == 0 ? invaders_stepSize : -invaders_stepSize; } function random(modulus) { var value = Math.round(((Math.random() *1000 + Math.random())*1000 + Math.random())*1000 + Math.random() ); return value % modulus; }