From 3e7d944827139d353821020843f139f613da4e8b Mon Sep 17 00:00:00 2001 From: Azaaxin Date: Mon, 16 Mar 2020 03:30:56 +0100 Subject: [PATCH] fixed bugs and added gameover screen --- cards.css | 24 +++++++++++++++++ index.php | 13 +++++++++ scripts/gameboard.js | 64 ++++++++++++++++++++++++++++++++++---------- scripts/options.js | 8 ++++++ 4 files changed, 95 insertions(+), 14 deletions(-) diff --git a/cards.css b/cards.css index c65da2e..94a124a 100644 --- a/cards.css +++ b/cards.css @@ -93,6 +93,26 @@ body { text-shadow: -5px 14px 20px rgb(0, 0, 0); cursor: pointer; } +#start-the-game-loose { + position: absolute; + background-color: #44205c65; + height: 100%; + width: 100%; + z-index: 99999; + top: 0px; + right: 0px; + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + color: #fff; + /* font-weight: 900; */ + font-size: 9vw; + font-family: "8-bit-pusab"; + -webkit-text-stroke: 2px rgb(10, 10, 10); + text-shadow: -5px 14px 20px rgb(0, 0, 0); + cursor: pointer; +} #options-window { position: absolute; background-color: #000000d4; @@ -154,6 +174,10 @@ body { align-items: center; width: fit-content; } +.try-again{ + display: none; + font-size: 3vw; +} #range-value{ margin: 0 7px; } diff --git a/index.php b/index.php index f6ae372..afa884e 100644 --- a/index.php +++ b/index.php @@ -60,6 +60,10 @@
Start
Options
+
+
Try Again?
+ +
Card speed:
@@ -75,6 +79,15 @@ Turn on card numbers
+
+
+ + off +
+
+ Disable spinning board +
+
diff --git a/scripts/gameboard.js b/scripts/gameboard.js index f75f478..e526127 100644 --- a/scripts/gameboard.js +++ b/scripts/gameboard.js @@ -1,11 +1,12 @@ // Game settings var viewspeed = 500; // time the player can see the answers MS -var timeout = 1000; // Time after all cards showed +var timeout = 500; // Time after all cards showed var health = 5; var newPlayground = 3; // replaces the level variable var level = newPlayground * newPlayground; -var difficulty = -1; +var difficulty = 1; var showcontent = false; // show numbers inside the cards +var allow_spin = true; // Game settings end var allow_click = 0; var play_array = []; @@ -39,6 +40,7 @@ function nextRound() { make_playground(); randomized(); animation(); + console.log(difficulty); } @@ -60,6 +62,7 @@ function animation() { //Animations, shows what cards you click on. Works like a } else { basic_timeout(); allow_click = 1; + spin_round(); } }, viewspeed) } @@ -77,9 +80,9 @@ function lifes() { } function clear_values() { // Resets the values for next round. - newPlayground = newPlayground + 0.3; + // newPlayground = newPlayground + 0.1; no_fail_round = 0; - difficulty = -1; + difficulty = 1; level = Math.ceil(newPlayground * newPlayground); play_array = []; randoms = 0; @@ -91,20 +94,38 @@ function clear_values() { // Resets the values for next round. allow_click = 0; avoid_repeat = []; correct_answers = 0; - console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info + console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id + "\n NewPLaygroud=" + newPlayground*newPlayground); // Console info calc_difficulty(); - // if (difficulty < level) { - - // } + newPlayground = newPlayground + 0.1; +} +function spin_round(){ + if(allow_spin === true){ + if(round_values >= 7 && 9>= round_values || round_values >= 12 && round_values % 3){ + document.getElementById("wrapper").style.transform = 'rotate(180deg)'; + + document.getElementById("wrapper").style.height = 'unset'; + let x = document.getElementsByClassName("card"); + let i; + for (i = 0; i < x.length; i++) { + x[i].style.transform = 'rotate(180deg)'; + + } + }else{ + document.getElementById("wrapper").style.transform = 'rotate(0deg)'; + // let x = document.getElementsByClassName("card"); + // let i; + // for (i = 0; i < x.length; i++) { + // x[i].style.transform = 'rotate(0deg)'; + // } + } + } } - function calc_difficulty() { if (level <= 9) { // The level value cannot be lower than 9. level = 9; - } else { - level = level + 1; } - difficulty = (20 / 100) * level + difficulty; //calc the difficulty to scale with the level + // difficulty = (20 / 100) * level + difficulty; //calc the difficulty to scale with the level + difficulty = (20 / 100) * level % 3 + difficulty; //calc the difficulty to scale with the level difficulty = Math.round(difficulty) // Makes the difficulty value a integer } @@ -161,7 +182,7 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car correct_answers++; let x = document.getElementById("score").textContent; - if (play_array.length == correct_answers) { + if (play_array.length === correct_answers) { if (no_fail_round != 0) { document.getElementById("score").innerHTML = parseInt(x) * 1 + 13; } else { @@ -188,7 +209,22 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car no_fail_round = 1; console.log("Liv: " + health); if (health == 0) { - alert("Game over!"); + allow_click = 0; + document.getElementById("start-the-game-loose").style.display = "flex"; + // alert("Game over!"); + card_ids = card_ids + 1; + for(var xo = 1; card_ids <= xo; xo++){ + if(play_array.includes(xo)){ + document.getElementById(xo).style.backgroundColor = "green"; + document.getElementById(xo).style.backgroundImage = "url(assets/textures/crate-green.png)"; + }else{ + document.getElementById(xo).style.backgroundColor = "red"; + document.getElementById(xo).style.backgroundImage = "url(assets/textures/crate_bad.png)"; + } + + } + + } } } diff --git a/scripts/options.js b/scripts/options.js index 12bd72f..bfec0e0 100644 --- a/scripts/options.js +++ b/scripts/options.js @@ -19,6 +19,14 @@ function uncheck() { showcontent = false; document.getElementById("button-text-01").innerHTML = "Turn on card numbers"; } +function check_allowspin() { + allow_spin = true; + document.getElementById("button-text-01-spin").innerHTML = "Disable spinning board"; + } +function uncheck_allowspin() { + allow_spin = false; + document.getElementById("button-text-01-spin").innerHTML = "Enable spinning board"; +} function cardspeed(){ viewspeed = document.getElementById("card-speed-number-value").value; document.getElementById("range-value").innerText = document.getElementById("card-speed-number-value").value;