use the invaders game as 'loading screen'

2019-12-26 18:48:33 +01:00
parent 9b263a70c8
commit 2268ab40b3
7 changed files with 14 additions and 7 deletions
--- a/pdb-js/src/assets/js/invaders.js
+++ b/pdb-js/src/assets/js/invaders.js
@@ -0,0 +1,153 @@
+
+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_parentDivId = '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;
+
+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('<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());
+    
+    $('.invader_notify').click(function() {
+    	// restart the game
+    	$('#'+invaders_parentDivId).remove();
+    	initInvaders(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_parentDivId).hide();
+	clearIntervals();
+}
+
+function clearIntervals() {
+	clearInterval(invaders_game_move);
+	clearInterval(invaders_game_new);
+}
+
+function startInvaders() {
+	
+	$('#'+invaders_parentDivId).show();
+
+	if (!invaders_game_over) {
+		if (invaders_count == 0) {
+			addInvader(invaders_parentDivId);
+		}
+	
+		clearIntervals();
+		invaders_game_move=window.setInterval("moveRandomly('"+invaders_parentDivId+"')",100);
+		invaders_game_new=window.setInterval("addInvader()", 1000);
+	}
+}
+
+
+function addInvader()
+{
+    var id = 'invader_' + invaders_count++;
+    var parent = $('#'+invaders_parentDivId);
+    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('<div 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;
+}