Merge pull request #130 from es-rene99/feature/final-scene-#76

Feature/final scene #76
es-rene99 · Aug 6, 2021 · 331c31e · 331c31e
2 parents 87f3acb + 29032c6
commit 331c31e
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 42 deletions.
diff --git a/...road/123Z_2101.w020.n001.953A.p30.953.jpg → assets/Backgrounds/road/outside.jpg b/...road/123Z_2101.w020.n001.953A.p30.953.jpg → assets/Backgrounds/road/outside.jpg
diff --git a/assets/monster/Extras/ancient-calculationster.png b/assets/monster/Extras/ancient-calculationster.png
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
   </head>
   <body>
-    <div class="background-image-div current"></div>
+    <div id="background-image-current"class="background-image-div current"></div>
     <div class="background-image-div preload"></div>
     <!-- welcome page -->
     <div id="start-container">

diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-plusplus */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable comma-dangle */
 /*
@@ -1022,7 +1023,7 @@ storyContent[1] = 'there lived an evil wizard ';
 storyContent[2] = 'who dreamt of conquering the world';
 storyContent[3] = 'and forcing everyone to serve him...';
 
-const iSpeed = 100; // time delay of print out
+const iSpeed = 18; // time delay of print out
 let iIndex = 0; // start printing array at this posision
 let iArrLength = storyContent[0].length; // the length of the text array
 const iScrollAt = 20; // start scrolling up at this many lines
@@ -1039,15 +1040,14 @@ function typewriter() {
   while (iRow < iIndex) {
     sContents += `${storyContent[iRow++]}<br />`;
   }
-  destination.innerHTML = `${sContents + storyContent[iIndex].substring(0, iTextPos)
-    }`;
-  if (iTextPos++ == iArrLength) {
+  destination.innerHTML = `${sContents + storyContent[iIndex].substring(0, iTextPos)}`;
+  if (iTextPos++ === iArrLength) {
     iTextPos = 0;
     iIndex++;
-    if (iIndex != storyContent.length) {
+    if (iIndex !== storyContent.length) {
       iArrLength = storyContent[iIndex].length;
       // eslint-disable-next-line no-implied-eval
-      setTimeout('typewriter()', 500);
+      setTimeout('typewriter()', 1);
     }
   } else {
     // eslint-disable-next-line no-implied-eval
@@ -1071,15 +1071,19 @@ function sceneControl() {
   const wizard = document.getElementById('wizard1');
   const egg = document.getElementById('egg2');
   const playerMonster = document.getElementById('player-monster');
+  const backgroundImage = document.getElementById('background-image-current');
+  function endSceneActions() {
+    scene += 1;
+    resetText();
+    typewriter();
+  }
   if (scene === 1) {
     playerMonster.style.display = 'none';
     egg.style.display = 'none';
     createMonsterImg('assets/monster/Extras/Wizard.png', 'wizard', 'wizard1');
     changeToPreloadedBackground();
     preloadBackground("url('assets/Backgrounds/Cave/cave_edited.jpg')");
-    typewriter();
-    scene += 1;
-    resetText();
+    endSceneActions();
   } else if (scene === 2) {
     wizard.style.display = 'none';
     egg.style.display = 'inline';
@@ -1088,13 +1092,11 @@ function sceneControl() {
     storyContent[1] = 'and in the cave there was an egg...';
     storyContent[2] = 'He stole it and ran to his castle';
     storyContent[3] = '"Whatever grows from this egg will serve me well!"';
-    storyContent[4] = '- happily thought the sorcerer...';
+    storyContent[4] = '- happily thought the wizard...';
     changeToPreloadedBackground();
     preloadBackground("url('assets/Backgrounds/Prison/prison01.jpg')");
     createMonsterImg('assets/monster/Starter/01.png', 'egg2', 'egg2');
-    scene += 1;
-    typewriter();
-    resetText();
+    endSceneActions();
   } else if (scene === 3) {
     wizard.style.display = 'inline';
     wizard.style.left = '10%';
@@ -1106,9 +1108,7 @@ function sceneControl() {
     storyContent[4] = '';
     changeToPreloadedBackground();
     preloadBackground("url('assets/Backgrounds/Interior/interior04.jpg')");
-    scene += 1;
-    resetText();
-    typewriter();
+    endSceneActions();
   } else if (scene === 4) {
     storyContent[0] = 'As soon as he left, the beast within tried to break away...';
     storyContent[1] = 'but the shackles of the egg would not break.';
@@ -1117,9 +1117,7 @@ function sceneControl() {
     storyContent[4] = '"...Grow enough to get your freedom!"';
     egg.style.animation = 'shake 3s infinite';
     wizard.style.display = 'none';
-    scene += 1;
-    resetText();
-    typewriter();
+    endSceneActions();
   } else if (scene === 5) {
     storyContent[0] = 'And then the creature saw...';
     storyContent[1] = '5 + 5 = ?';
@@ -1128,40 +1126,128 @@ function sceneControl() {
     storyContent[4] = 'Once again it heard - "Grow as fast as you can..."';
     storyContent[5] = '...escape the castle before the wizard catches you!';
     egg.style.animation = 'grow 10s forwards';
-    scene += 1;
-    resetText();
-    typewriter();
+    endSceneActions();
   } else if (scene === 6) {
     sceneDiv.style.display = 'none';
     scene += 1;
   } else if (scene === 8) {
+    preloadBackground("url('assets/Backgrounds/road/outside.jpg')");
     playerMonster.src = document.getElementById('monster').src;
     egg.style.display = 'none';
     playerMonster.style.display = 'block';
-    textFrame.style.visibility = 'hidden';
     sceneDiv.style.display = 'block';
-    storyContent[0] = 'Good job little creature!';
+    storyContent[0] = 'Your final transformation caused destruction all around you.';
     storyContent[1] = 'You have learned and grown so much!';
-    storyContent[2] = 'Now we will help you escape the castle';
-    storyContent[3] = 'And live with us, ';
-    storyContent[4] = 'Your new family of calculationsters';
-    storyContent[5] = 'Just like you!';
-    resetText();
-    typewriter();
-    textFrame.style.visibility = 'visible';
-    scene += 1;
+    storyContent[2] = "While you're getting used to your full power ";
+    storyContent[3] = 'you feel someone approaching...';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    endSceneActions();
   } else if (scene === 9) {
-    textFrame.style.visibility = 'hidden';
-    storyContent[0] = `You escaped with ${timer.sec} seconds to spare!`;
-    storyContent[1] = 'For each remaining second you get 5 bonus points';
-    storyContent[2] = `Your final score is ${scoreboard.score + timer.sec * 5}`;
+    wizard.style.display = 'block';
+    storyContent[0] = '"That sound, my monster! Said the wizard"';
+    storyContent[1] = '"You have more power that I had imagined"';
+    storyContent[2] = '"Now come forth as my soldier';
+    storyContent[3] = 'you will allow me to conquer the world!"';
+    storyContent[4] = '...';
+    storyContent[5] = '...';
+    endSceneActions();
+  } else if (scene === 10) {
+    wizard.style.display = 'block';
+    storyContent[0] = '"... Aren\'t you listening? Come towards me!"';
+    storyContent[1] = '"You will need to be disciplined!"';
+    storyContent[2] = '';
     storyContent[3] = '';
     storyContent[4] = '';
     storyContent[5] = '';
-    resetText();
-    typewriter();
-    textFrame.style.visibility = 'visible';
-    scene += 1;
+    wizard.style.animation = 'move-right 1s forwards';
+    endSceneActions();
+  } else if (scene === 11) {
+    const calculationsterMagicAttack = document.createElement('div');
+    calculationsterMagicAttack.id = 'calculationster-magic-attack';
+    calculationsterMagicAttack.className = 'calculationster-magic-attack';
+    calculationsterMagicAttack.textContent = '2+2=4';
+    sceneDiv.appendChild(calculationsterMagicAttack);
+    storyContent[0] = '"AAAH-"';
+    storyContent[1] = 'You defeated the wizard easily';
+    storyContent[2] = 'and decided to finally escape from this castle.';
+    storyContent[3] = '';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    audioHandler.playNoise('incorrect');
+    calculationsterMagicAttack.style.animation = 'expand-magic 1.2s forwards';
+    wizard.style.animation = 'send-flying 4s forwards';
+    endSceneActions();
+  } else if (scene === 12) {
+    const calculationsterMagicAttack = document.getElementById('calculationster-magic-attack');
+    sceneDiv.removeChild(calculationsterMagicAttack);
+    sceneDiv.removeChild(wizard);
+    const ancientCalculationster = document.createElement('img');
+    ancientCalculationster.src = '../assets/monster/Extras/ancient-calculationster.png';
+    ancientCalculationster.id = 'ancient-calculationster';
+    ancientCalculationster.className = 'ancient-calculationster';
+    sceneDiv.appendChild(ancientCalculationster);
+    changeToPreloadedBackground();
+    storyContent[0] = '"Outside the castle you found another strange creature speaking in a very strong tone."';
+    storyContent[1] = '"I didn\'t know wizards already found ways to fly..."';
+    storyContent[2] = 'said the creature.';
+    storyContent[3] = '"Hey it\'s you! I was looking all over for you,';
+    storyContent[4] = 'you look different but I can feel your presence."';
+    storyContent[5] = '';
+    endSceneActions();
+  } else if (scene === 13) {
+    storyContent[0] = 'You did not understand what was the creature talking about...';
+    storyContent[1] = '"My voice familiar? Oh of course"';
+    storyContent[2] = '"I was the voice you heard to free yourself"';
+    storyContent[3] = '"I knew how to awaken your powers, my brother!"';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    endSceneActions();
+  } else if (scene === 14) {
+    storyContent[0] = 'What a surprise! Brother?!';
+    storyContent[1] = '"Yeah, I\'m a calculationster just like you! "';
+    storyContent[2] = '"The most ancient one, that I\'m aware of, "';
+    storyContent[3] = '"Nice to finally meet you for real!"';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    endSceneActions();
+  } else if (scene === 15) {
+    storyContent[0] = '"Let me show the way,"';
+    storyContent[1] = '"I will introduce you to our whole family so far"';
+    storyContent[2] = '"We\'re planning to conquer the world together!"';
+    storyContent[3] = '';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    endSceneActions();
+  } else if (scene === 16) {
+    const endingFadeOutAnimation = 'fade-out 4s forwards';
+    storyContent[0] = '"Yeah you must have many questions,"';
+    storyContent[1] = '"do not worry Pythagosaurus gives some of the best explanations about our existence,"';
+    storyContent[2] = '"else may be Einstartarus will give you more simple explanations, "';
+    storyContent[3] = '"there was this one time were..."';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    const ancientCalculationster = document.getElementById('ancient-calculationster');
+    const allElementsInScene = document.querySelectorAll('.scene *');
+    const allElementsInSceneExceptStoryText = [...allElementsInScene].filter((element) => element.id !== 'story');
+    allElementsInSceneExceptStoryText.forEach((element) => {
+      element.style.animation = endingFadeOutAnimation;
+    });
+    backgroundImage.style.animation = endingFadeOutAnimation;
+    playerMonster.style.animation = `move-right 5s forwards, ${endingFadeOutAnimation}`;
+    ancientCalculationster.style.animation = `move-right 5s forwards, ${endingFadeOutAnimation}`;
+    endSceneActions();
+  } else if (scene === 17) {
+    storyContent[0] = `You escaped with ${timer.sec} seconds to spare!`;
+    storyContent[1] = 'For each remaining second you get 5 bonus points';
+    storyContent[2] = `Your final score is ${scoreboard.score + timer.sec * 5}`;
+    storyContent[3] = 'Thank you for playing this game!';
+    storyContent[4] = 'If you click next the game will restart';
+    storyContent[5] = ':) Hope you enjoyed';
+    endSceneActions();
+  } else if (scene === 18) {
+    // * Refresh the game to title screen
+    window.location.reload();
   }
 }
 

diff --git a/src/style.css b/src/style.css
@@ -527,6 +527,30 @@ img.egg {
   box-shadow: 1px 1px 10px;
 }
 
+.calculationster-magic-attack {
+  display: block;
+  position: absolute;
+  font-size: 2rem;
+  color: #fb15fb;
+  text-shadow: -1px 1px 2px #23430c, 1px 1px 2px #23430c, 1px -1px 0 #23430c,
+    -1px -1px 0 #23430c;
+  -webkit-text-stroke: 1px #23430c;
+  border: 10px darkmagenta;
+  border-top-style: none;
+  border-right-style: none;
+  border-bottom-style: none;
+  border-left-style: none;
+  border-style: double;
+  bottom: 10%;
+  left: 41%;
+}
+
+.ancient-calculationster {
+  position: absolute;
+  bottom: -2%;
+  right: 10%;
+}
+
 @keyframes addedSeconds {
   0% {
     color: green;
@@ -561,16 +585,61 @@ img.egg {
     bottom: 5%;
   }
 }
+@keyframes move-right {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(12.5rem);
+    transform: translateX(12.5rem);
+  }
+}
 
-@keyframes fade-in {
+@keyframes expand-magic {
   0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(5);
+    transform: scale(5);
     opacity: 0;
   }
+}
+@keyframes send-flying {
+  0% {
+    -webkit-transform: translateX(0) translateY(0) rotate(0deg);
+    transform: translateX(0) translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(-1000px) translateY(-3000px) rotate(-540deg);
+    transform: translateX(-1000px) translateY(-3000px) rotate(-540deg);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    /* TODO need to set as 0 added as testing */
+    opacity: 1;
+  }
   100% {
     opacity: 1;
   }
 }
 
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 @keyframes shake {
   0% {
     transform: translate(1px, 1px) rotate(0deg);