diff --git a/cards.css b/cards.css index 6d83105..c7bfa27 100644 --- a/cards.css +++ b/cards.css @@ -1,14 +1,18 @@ @import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap'); + @font-face { font-family: "8-bit-pusab"; - - src: url("./assets/fonts/8-bit-pusab.woff") format("woff"); /* Modern Browsers */ + + src: url("./assets/fonts/8-bit-pusab.woff") format("woff"); + /* Modern Browsers */ font-weight: normal; font-style: normal; - } -*{ +} + +* { transition: .3s; } + .card { cursor: pointer; padding-bottom: 85%; @@ -61,7 +65,8 @@ body { background-color: #1d1e22; } -#start-the-game{ + +#start-the-game { position: absolute; background-color: #44205c65; height: 100%; @@ -72,7 +77,7 @@ body { display: flex; justify-content: center; align-items: center; - color: #fff; + color: #fff; /* font-weight: 900; */ font-size: 9vw; font-family: "8-bit-pusab"; @@ -80,8 +85,28 @@ body { text-shadow: -5px 14px 20px rgb(0, 0, 0); cursor: pointer; } -.printid:after{ - content:attr(id); - position: absolute; - + +.printid:after { + content: attr(id); + position: absolute; + +} + +.stats { + display: flex; + flex-direction: row; + justify-content: space-around; + font-size: 18px; + color: #fff; + font-family: "8-bit-pusab"; +} + +#container_r { + display: flex; + flex-direction: column; + flex-direction: row; +} + +#health { + min-width: 170px; } \ No newline at end of file diff --git a/index.php b/index.php index 441f929..45a25c0 100644 --- a/index.php +++ b/index.php @@ -1,27 +1,27 @@ - - - My Electron Frameless Window - - - - - - -
- + + Blocks demo + + + + + + +
+ +
Blocks @@ -32,23 +32,32 @@
- - -
-
-
-
+ + +
+
+
+
Round: 
- -
-
- Start -
- - - - - - - +
+
+ Start +
+ + + + + + + + \ No newline at end of file diff --git a/scripts/gameboard.js b/scripts/gameboard.js index ae12c90..69ddf5e 100644 --- a/scripts/gameboard.js +++ b/scripts/gameboard.js @@ -1,21 +1,26 @@ // Game settings var viewspeed = 500; // time the player can see the answers MS -var timeout = 1000; // Time after all cards showed +var timeout = 1000; // Time after all cards showed var health = 5; var newPlayground = 3; // replaces the level variable -var level = newPlayground*newPlayground; +var level = newPlayground * newPlayground; var difficulty = -1; -var showcontent = true; // show numbers inside the cards +var showcontent = false; // show numbers inside the cards // Game settings end var allow_click = 0; var play_array = []; -var anim = 0; +var anim = 0; var y = 1; var correct_answers = 0; var avoid_repeat = []; // When a card is clicked, the player cant click on same card more than once var randoms = 0; var room_level; -function initiate(){ // Call all the functions +var no_fail_round = 0; +var round_values = 0; + +function initiate() { // Call all the functions + round_value(); + lifes(); prep(); calc_difficulty(); console.log(level); @@ -24,7 +29,9 @@ function initiate(){ // Call all the functions animation(); console.log(difficulty); } -function nextRound(){ + +function nextRound() { + round_value(); clear_playground(); clear_values() calc_difficulty(); @@ -34,64 +41,82 @@ function nextRound(){ animation(); console.log(difficulty); } -function prep(){ // handles everythiing before the game starts + +function prep() { // handles everythiing before the game starts document.getElementById("start-the-game").style.visibility = "hidden"; //hides the start button } -function animation () { //Animations, shows what cards you click on + +function round_value() { + round_values++; + document.getElementById("round").innerHTML = round_values; +} + +function animation() { //Animations, shows what cards you click on setTimeout(function () { - $("#"+play_array[anim]).addClass('animations') - anim++; + $("#" + play_array[anim]).addClass('animations') + anim++; if (play_array.length > anim) { animation(); - }else{ + } else { basic_timeout(); allow_click = 1; } }, viewspeed) - } - function basic_timeout () { // small timeout before you can click and the shown cards disapear. +} + +function basic_timeout() { // small timeout before you can click and the shown cards disapear. setTimeout(function () { - $(".card").removeClass('animations'); + $(".card").removeClass('animations'); }, timeout) - } -function clear_values(){ // Resets the values for next round. +} + +function lifes() { + for (let lives = 0; lives < health; lives++) { + document.getElementById("health").innerHTML += 'health'; + } +} + +function clear_values() { // Resets the values for next round. newPlayground = newPlayground + 0.3; + no_fail_round = 0; difficulty = -1; level = Math.ceil(newPlayground * newPlayground); play_array = []; randoms = 0; i = 0; - card_ids = 0; + card_ids = 0; y = 0; anim = 0; clicked_id = 0; 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); // Console info calc_difficulty(); - if (difficulty < level){ + // if (difficulty < level) { - } + // } } -function calc_difficulty(){ - if (level <= 9){ // The level value cannot be lower than 9. + +function calc_difficulty() { + if (level <= 9) { // The level value cannot be lower than 9. level = 9; - } else{ + } else { level = level + 1; } - difficulty = (35/100) * level + difficulty; //calc the difficulty to scale with the level + difficulty = (35 / 100) * level + difficulty; //calc the difficulty to scale with the level difficulty = Math.round(difficulty) // Makes the difficulty value a integer } -function make_playground(){ + +function make_playground() { //Loop out cards on the playground var i = 0; var card_ids = 0; - for (var y = 0; y < newPlayground; y++){ + for (var y = 0; y < newPlayground; y++) { var row = document.createElement('div'); - row.setAttribute('id', 'card-row' + y); - row.setAttribute('class', 'card-row'); - document.getElementById("test-group").appendChild(row); + row.setAttribute('id', 'card-row' + y); + row.setAttribute('class', 'card-row'); + document.getElementById("test-group").appendChild(row); for (i = 0; i < newPlayground; i++) { //Creates a new div for each loop wth the attributes and content set below. card_ids++; var div = document.createElement('div'); @@ -99,61 +124,70 @@ function make_playground(){ div.setAttribute('id', card_ids); div.setAttribute('onClick', 'reply_click(this.id)'); // add an onClick event to the div that sends the id of it to the funcition reply_click() document.getElementById('card-row' + y).appendChild(div); - if(showcontent == true){ + if (showcontent == true) { document.getElementById(card_ids).classList.add("printid"); } } } } -function clear_playground(){ //When called, makes the playground empty + +function clear_playground() { //When called, makes the playground empty document.getElementById("test-group").innerHTML = ""; clear_values(); } //hello -function randomized(){ // Fills the array with random numbers. Max number determines by level - while(play_array.length < difficulty){ - randoms = Math.floor(Math.random() * level); - if(randoms != 0){ - if(play_array.indexOf(randoms) === -1){ - play_array.push(randoms); - } - } - } -} - -function reply_click(clicked_id){ // Grabs the value from the id on the div/card when it's clicked on. - clicked_id = Number(clicked_id); - console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+clicked_id); // Console info - - if(play_array.includes(clicked_id)){ // Takes the id from the div and searches in the array for it. Returns either true or false. - // document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green - if(allow_click === 1){ - if (!avoid_repeat.includes(clicked_id)){ - document.getElementById(clicked_id).style.backgroundColor = "green"; - document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate-green.png)"; - avoid_repeat.push(clicked_id); - correct_answers++; - if(play_array.length == correct_answers) - { - alert("You survived this round!"); - nextRound(); +function randomized() { // Fills the array with random numbers. Max number determines by level + while (play_array.length < difficulty) { + randoms = Math.floor(Math.random() * level); + if (randoms != 0) { + if (play_array.indexOf(randoms) === -1) { + play_array.push(randoms); } } } - }else{ +} + +function reply_click(clicked_id) { // Grabs the value from the id on the div/card when it's clicked on. + clicked_id = Number(clicked_id); + console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info + + if (play_array.includes(clicked_id)) { // Takes the id from the div and searches in the array for it. Returns either true or false. + // document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green + if (allow_click === 1) { + if (!avoid_repeat.includes(clicked_id)) { + document.getElementById(clicked_id).style.backgroundColor = "green"; + document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate-green.png)"; + avoid_repeat.push(clicked_id); + correct_answers++; + let x = document.getElementById("score").textContent; + + if (play_array.length == correct_answers) { + if (no_fail_round != 0) { + document.getElementById("score").innerHTML = parseInt(x) * 1 + 13; + } else { + document.getElementById("score").innerHTML = parseInt(x) * 2 + 30; + } + alert("You survived this round!"); + nextRound(); + } + } + } + } else { //Avoid repeat fix - if(allow_click === 1){ - if (!avoid_repeat.includes(clicked_id)){ + if (allow_click === 1) { + if (!avoid_repeat.includes(clicked_id)) { // document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red document.getElementById(clicked_id).style.backgroundColor = "red"; document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate_bad.png)"; - + avoid_repeat.push(clicked_id); - + health--; + let list = document.getElementById("health"); + list.removeChild(list.childNodes[0]); + no_fail_round = 1; console.log("Liv: " + health); - if(health == 0) - { + if (health == 0) { alert("Game over!"); } } @@ -161,4 +195,4 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card } document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing -} +} \ No newline at end of file