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

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('<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>');
    
    $('.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('<span id="'+id+'" class="invader" style="position:absolute;top:'+top+'px;left:'+left+'px;"/>');

    $("#"+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;
}