use the invaders game as 'loading screen'

This commit is contained in:
2019-12-26 18:48:33 +01:00
parent 9b263a70c8
commit 2268ab40b3
7 changed files with 14 additions and 7 deletions

View File

@@ -1,30 +0,0 @@
.invader {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kKGRAxBENShygAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAbUlEQVRIx9WVQQrAMAgEM6X///L2FCihYvRg7F416LCsQdKo0DWKZA4CBGzjev1lRHgezS0lkan3IYr485ZFdo5oJZkbWoRWfSWrJ8p6suvZucsgCS8THsHX+zKiO5uLaO763bpobvoS/e6HfQBzIE0PhAsDxgAAAABJRU5ErkJggg==);
width: 26px;
height: 20px;
}
#invaders_area {
position:fixed;
display:none;
z-index: 9999;
cursor:crosshair;
background: url("../img/city_silhouette.png");
background-repeat: repeat-x;
background-position-y: bottom;
}
#invaders_game_over {
display: none;
justify-content: center;
align-items: center;
height: 100%;
}
.invader_notify {
border: solid 2px black;
padding: 1em;
background: #ccc;
z-index: 9999;
cursor:pointer;
}

View File

@@ -1,2 +0,0 @@
/font-awesome-4.7.0/
/font-awesome-4.7.0.zip

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -1,5 +0,0 @@
/horsey-master/
/horsey-master.zip
/autocomplete.js-2.1.0/
/autocomplete.js-2.1.0.zip
/search.js

View File

@@ -1,153 +0,0 @@
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;
}