<!DOCTYPE html>
< html lang = "en-US" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" / >
< title > chemtrails< / title >
< link rel = "icon" href = "imgs/pleiadian_s/planet7.gif" >
< link rel = "stylesheet" href = "pleiadians_satanism.css" >
< / head >
< body >
< audio loop = "loop" id = "magic" preload = "auto" > < source src = "sound/theme5_magic.wav" type = "audio/wav" > < / audio >
< audio id = "click" > < source src = "sound/click.wav" type = "audio/wav" > < / audio >
< audio id = "appear" > < source src = "sound/appear.wav" type = "audio/wav" > < / audio >
< audio id = "alien" > < source src = "sound/alien_speech.wav" type = "audio/wav" > < / audio >
< div class = "back" style = "display: none;" >
Do you want to start from the beginning?< br >
< button id = "go_to_start" class = "button_back" > yes < / button > / < button id = "stay" class = "button_back" > no < / button >
< / div >
< div id = "ground_color" class = "invert scroll-pane stop_invert" > < / div >
< div id = "groundline" class = "invert scroll-pane stop_invert" > < / div >
< div id = "player_img" > < / div >
< div id = "ground" >
< img id = "trail1" src = "imgs/pleiadian_s/trail1.gif" height = "140px" >
< img id = "trail2" src = "imgs/pleiadian_s/trail1.gif" height = "140px" >
< img id = "trail3" src = "imgs/pleiadian_s/trail1.gif" height = "140px" >
< img id = "trail4" src = "imgs/pleiadian_s/trail1.gif" height = "140px" >
< img id = "tree1" src = "imgs/pleiadian_s/tree.gif" height = "160px" >
< img id = "tree2" src = "imgs/pleiadian_s/tree.gif" height = "160px" >
< img id = "tree3" src = "imgs/pleiadian_s/tree.gif" height = "160px" >
< img id = "tree4" src = "imgs/pleiadian_s/tree.gif" height = "160px" >
< img id = "tree5" src = "imgs/pleiadian_s/tree.gif" height = "160px" >
< div class = "figure1" >
< img id = "planet1" src = "imgs/pleiadian_s/planet1.gif" height = "100px" >
< img id = "being1" src = "imgs/pleiadian_s/angel1.gif" height = "150px" style = "display: none;" >
< / div >
< img id = "planet2" src = "imgs/pleiadian_s/planet2.gif" height = "100px" >
< div class = "figure2" >
< img id = "planet3" src = "imgs/pleiadian_s/planet3.gif" height = "100px" >
< img id = "being3" src = "imgs/pleiadian_s/angel2.gif" height = "130px" style = "display: none;" >
< / div >
< img id = "planet4" src = "imgs/pleiadian_s/planet4.gif" height = "120px" >
< div class = "figure3" >
< img id = "planet5" src = "imgs/pleiadian_s/planet5.gif" height = "100px" >
< img id = "being5" src = "imgs/pleiadian_s/angel3.gif" height = "100px" style = "display: none;" >
< / div >
< img id = "planet6" src = "imgs/pleiadian_s/planet6.gif" height = "150px" >
< div class = "figure4" >
< img id = "planet7" src = "imgs/pleiadian_s/planet7.gif" height = "100px" >
< img id = "being7" src = "imgs/pleiadian_s/angel4.gif" height = "100px" style = "display: none;" >
< / div >
< img id = "planet8" src = "imgs/pleiadian_s/planet8.gif" height = "140px" >
< img id = "stars1" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars2" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars3" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars1" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars2" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars3" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars1" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars2" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars3" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars1" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars2" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars3" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< img id = "stars3" src = "imgs/pleiadian_s/stars.gif" height = "200px" >
< div class = "bubble1 invert" style = "display: none;" > Hello < span id = "player_name" > < / span > , your enlightened spirit guided you here ■< / div >
< div class = "bubble2 invert" style = "display: none;" > We can sense that you are looking for something beyond your habits and understanding. We are happy to meet you ■< / div >
< div class = "bubble3 invert" style = "display: none;" > We are the beings of light. We don't belong to this planet ■< / div >
< div class = "bubble4 invert" style = "display: none;" > We can sense the other beings and planet's energetic state. A heinous crime is shaking this land's vibration ■< / div >
< div class = "bubble5 invert" style = "display: none;" > This darkness will soon spread to other planets. We came here as messengers, to help you elevate your soul and find the courage to fight evil ■< / div >
< div class = "text_container invert " >
< div class = "message1" >
< span class = "instructions" > < span class = "instructions_arrow" > →< / span > Move with the arrows to follow the trails in the sky.< / span >
< / div >
< div class = "message2" style = "display: none;" >
The sky looks odd. Is there something out there?
< / div >
< div class = "message3" style = "display: none;" >
They must be referring to the dreadful kitten slaughter and the saurian invasion. < button onclick = "location.href='square_saurians.html';" > < span class = "button_text" > Go to the village square< / span > < / button > and inform the citizens of what is going on.
< / div >
< / div >
< script src = "jquery.min.js" > < / script >
< script >
//audio
var magic = document.querySelector("#magic");
var click = document.querySelector("#click");
var appear = document.querySelector("#appear");
var alien = document.querySelector("#alien");
magic.volume= 0.5;
click.volume=0.5;
alien.volume= 0.5;
$("body").hover( function() {
magic.play();
magic.addEventListener('paused',function() {
magic.play();
},false);
})
// saves game step in the local storage
window.onload = function() {
magic.play();
window.localStorage.setItem("pleiadians","opened");
console.log ("pleiadians:",localStorage.pleiadians);
}
//get player avatar from local storage
console.log (localStorage.myavatar)
var img = document.createElement("img");
img.src = localStorage.myavatar;
var player_img = document.querySelector("#player_img");
player_img.appendChild(img);
//get player name from local storage
document.querySelector('#player_name').innerHTML = localStorage.playerName;
//adjust camera scroll
var $div = $('#player_img');
var screenLeftMin = 50;
var screenLeftMax = 700;
function adjustScroll() {
var playerLeft = parseInt($div.css("left"));
var scrollLeft = $(document).scrollLeft();
var screenLeft = playerLeft - scrollLeft;
console.log ("screenleft:", screenLeft);
if (screenLeft > screenLeftMax ) {
$(document).scrollLeft(playerLeft - screenLeftMax)
}
if (screenLeft < screenLeftMin ) {
$(document).scrollLeft(playerLeft - screenLeftMin)
}
}
//move the character
$(document).keydown(function(e) {
var offset = $div.position();
console.log("offset:", offset);
switch (e.which) {
case 83:
$(".back").show();
case 37:
offset.left -= 20;
console.log("left");
$div.addClass("flipped");
break;
case 39:
offset.left += 20;
console.log("right");
$div.removeClass("flipped");
$(".message1").hide();
break;
}
//check the offset and prevent the character to exceed the screen dimension
if (offset.left < 80 ) {
offset.left = 80;
}
if (offset.left > $("#ground").width() - 700) {
$(".message1").hide();
$(".message2").show();
}
if (offset.left > $("#ground").width() - 80) {
offset.left = $("#ground").width() - 80;
}
$div.css("left", offset.left);
$div.css("top", offset.top);
e.preventDefault();
adjustScroll();
})
//go back to start
$("#go_to_start").click( function (){
window.location.href="index.html";
click.play();
});
$("#stay").click( function (){
$(".back").hide();
click.play();
});
// make pleiadians appear
var pleiadians = 0;
$("#planet1").click( function() {
appear.play();
pleiadians ++;
$("#planet1").hide();
$("#being1").show();
check_pleiadians();
});
$("#planet3").click( function() {
appear.play();
pleiadians ++;
$("#planet3").hide();
$("#being3").show();
check_pleiadians();
});
$("#planet5").click( function() {
appear.play();
pleiadians ++;
$("#planet5").hide();
$("#being5").show();
check_pleiadians();
});
$("#planet7").click( function() {
appear.play();
pleiadians ++;
$("#planet7").hide();
$("#being7").show();
check_pleiadians();
});
function check_pleiadians() {
if (pleiadians == 4) {
setTimeout( function (){
alien.play();
$(".bubble1").css("zIndex", 50);
$(".bubble1").show();
setTimeout( function (){
alien.play();
$(".bubble2").css("zIndex", 50);
$(".bubble2").show();
setTimeout( function (){
alien.play();
$(".bubble3").css("zIndex", 50);
$(".bubble3").show();
setTimeout( function (){
alien.play();
$(".bubble4").css("zIndex", 50);
$(".bubble4").show();
setTimeout( function (){
alien.play();
$(".bubble5").css("zIndex", 50);
$(".bubble5").show();
setTimeout( function (){
click.play();
$(".message2, .message1").hide();
$(".message3").show();
}, 3500);
}, 3500);
}, 3500);
}, 3500);
}, 3500);
}, 1000);
};
};
$(".bubble1").click( function(){
click.play();
$(".bubble1").hide();
});
$(".bubble2").click( function(){
click.play();
$(".bubble2").hide();
});
$(".bubble3").click( function(){
click.play();
$(".bubble3").hide();
});
$(".bubble4").click( function(){
click.play();
$(".bubble4").hide();
});
$(".bubble5").click( function(){
click.play();
$(".bubble5").hide();
});
< / script >
< / body >