diff --git a/src/index.html b/src/index.html index e95c462..6fbedbb 100644 --- a/src/index.html +++ b/src/index.html @@ -49,12 +49,14 @@ text-align: center; z-index: 100; position: relative; + font-family: 'Comic Sans MS', cursive, sans-serif; } #time_remaining { text-align: center; font-size: 26pt; z-index: 100; position: relative; + font-family: 'Comic Sans MS', cursive, sans-serif; } .difficulty { position: absolute; @@ -89,6 +91,46 @@ color: white; text-align: center; } + .popup{ + left: calc( 50% - 150px ); + position: absolute; + top: 10%; + background: white; + width: 300px; + height: 150px; + z-index: 102; + border-radius: 10px; + display: none; + font-family: 'Comic Sans MS', cursive, sans-serif; + } + .popup .message_box{ + width: 100%; + display: block; + height: calc( 100% - 25px); + text-align: center; + position: relative; + } + .popup .message_box .message{ + display: block; + margin: auto; + padding: 30px; + } + .popup button{ + margin: auto; + display: block; + background-color: #A3A948; + border: 1px solid black; + border-radius: 15px; + width: 60px; + cursor: pointer; + } + .overlay{ + z-index: 101; + background-color: grey; + width: 100%; + height: 100%; + display: none; + } @@ -112,6 +154,11 @@

+
+
+
Sample Message
+ +
diff --git a/src/script.js b/src/script.js index 2ce26e4..91db0cc 100644 --- a/src/script.js +++ b/src/script.js @@ -6,6 +6,9 @@ const diff_enum = { EXTREME: 100, }; +// Flag: 0 => Will not restart game after game ends.; 1=> otherwise. +window.restart_after_end = 0; + //Setting difficulty from url const url = new URL(window.location); let diff_param = url.searchParams.get("difficulty"); @@ -28,6 +31,48 @@ const catch_me = document.getElementById("catch_me"), level_description = document.getElementById("level_description"), time_remaining = document.getElementById("time_remaining"); +// Pop-Up +const popup_element = document.querySelectorAll(".popup")[0], + message_element = document.querySelectorAll(".message")[0], + overlay = document.querySelectorAll(".overlay")[0], + continue_btn = document.getElementById("continue_btn"); +const popup = (message) => { + catch_me.style.display = "none"; + overlay.style.display = "block"; + message_element.innerHTML = message; + popup_element.style.display = "block"; +}; + +// on click event for OK button. +continue_btn.addEventListener("click", e => { + catch_me.style.display = "block"; + overlay.style.display = "none"; + popup_element.style.display = "none"; + + if((window.status != 'end_game') || (window.restart_after_end == 1)){ + // Starting value for level timer, + const level_start = new Date().getTime(); + + const t = setInterval(function () { + // Get today's date and time + const now = new Date().getTime(); + let timer = target_time_millis + (level_start - now); + displayTimer(timer); + + if (timer < 0) { + clearInterval(t); + window.status = 'end_game'; + end_game(); + } + if (count >= target_score) { + clearInterval(t); + advanceLevel(); + startNewLevel(); + } + }, 100); + } +}); + // Useful global values const catch_height = 50, catch_width = 100, @@ -97,7 +142,7 @@ diff_btns.forEach(el => { const setTargets = () => { - target_time = 60; // seconds + target_time = 15; // seconds target_time_millis = target_time * 1000; target_score = current_level * 5; }; @@ -126,7 +171,7 @@ const advanceLevel = () => { const end_game = () => { total_score += count; - alert("You passed " + (current_level - 1) + " levels and earned a score of " + total_score + "!"); + popup("Time's Up!
You passed " + (current_level - 1) + " levels and earned a score of " + total_score + "!"); }; const startNewLevel = () => { @@ -137,30 +182,12 @@ const startNewLevel = () => { mv_catch_y(); total_score += count; count = 0; + level_message = "Ready...Set...Go!"; + if(current_level > 1){ + level_message = "Congratulations! You have leveled up.
" + level_message; + } + popup(level_message); - alert("Ready...Set...Go!"); - - // Starting value for level timer, - const level_start = new Date().getTime(); - - const t = setInterval(function () { - // Get today's date and time - const now = new Date().getTime(); - let timer = target_time_millis + (level_start - now); - displayTimer(timer); - - if (timer < 0) { - clearInterval(t); - alert("Time's Up!"); - end_game(); - } - if (count >= target_score) { - alert("Congratulations! You have leveled up."); - clearInterval(t); - advanceLevel(); - startNewLevel(); - } - }, 100); }; const game = () => {