From e80ead9234aedade0c75ce376639f2f57d19de8a Mon Sep 17 00:00:00 2001 From: Azaaxin Date: Mon, 9 Mar 2020 10:06:48 +0100 Subject: [PATCH 1/2] last --- scripts/gameboard.js | 28 +++++++++++++++++---------- style.css | 45 +++++++++++++++++++++++++++++++++----------- 2 files changed, 52 insertions(+), 21 deletions(-) diff --git a/scripts/gameboard.js b/scripts/gameboard.js index b9b439b..f5e1e0b 100644 --- a/scripts/gameboard.js +++ b/scripts/gameboard.js @@ -2,15 +2,16 @@ var viewspeed = 500; // time the player can see the answers MS var timeout = 1000; // Time after all cards showed var health = 5; -var level = 9; -var difficulty = 3; -var showcontent = false; // show numbers inside the cards +var level = 9*4; +var difficulty = -1; +var showcontent = true; // show numbers inside the cards // Game settings end var play_array = []; 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 function initiate(){ // Call all the functions @@ -104,14 +105,21 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card alert("You survived this round!"); } }else{ - document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red - document.getElementById(clicked_id).style.backgroundColor = "red"; - health--; - console.log("Liv: " + health); - if(health == 0) - { - alert("Game over!"); + //Avoid repeat fix + 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"; + + avoid_repeat.push(clicked_id); + + health--; + console.log("Liv: " + health); + if(health == 0) + { + alert("Game over!"); + } } + } document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing } diff --git a/style.css b/style.css index 618a13d..adfa604 100644 --- a/style.css +++ b/style.css @@ -1,30 +1,53 @@ body { background-color: #1d1e22; } - - #wrapper { - /* max-width: 1200px; */ +/* + #wrapper { max-width: 741px; margin: 30px auto; padding: 0 20px; width: 100%; display: grid; - grid-auto-rows: 100px; + grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 1em; - } + + } */ + #wrapper { + max-width: 1200px; + max-width: 54%; + max-height: 50%; + margin: 30px auto; + padding: 0 20px; + width: 100%; + display: flex; + + + flex-wrap: wrap; + align-items: center; + justify-content: center; + /* grid-auto-rows: 1fr; */ + /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */ + /* grid-gap: 1em; */ + } .flexwrap{ display: flex; align-items: center; justify-content: center; } .card { - border-radius: 10px; - padding: 20px; - color: rgb(255, 255, 255); - background-color:rgb(0, 94, 165); - transition: 0.5s; - } + border-radius: 10px; + padding: 20px; + color: rgb(255, 255, 255); + background-color: rgb(0, 94, 165); + transition: 0.5s; + height: 30vh; + width: 30vh; + min-width: 60px; + max-width: 100px; + max-height: 100px; + margin: 5px; + } .animations{ border: 1px solid pink; background-color: pink; From e41a09195d94fdfdfa7b22ca0818f4b3499da531 Mon Sep 17 00:00:00 2001 From: Azaaxin Date: Mon, 9 Mar 2020 22:57:18 +0100 Subject: [PATCH 2/2] changes made. levels are now added, and the gameboard match the screen size. Added a function that resets the variables after each turn. and minor bug fixes so you cant click multiple times on the same block. And avoid starting the round before the animation is done. --- assets/textures/crate.png | Bin 0 -> 5930 bytes assets/textures/crate_bad.png | Bin 0 -> 4758 bytes assets/textures/crate_blown.png | Bin 0 -> 6269 bytes assets/textures/heart.png | Bin 0 -> 750 bytes cards.css | 76 +++++++++++++++ gameboard.html | 6 +- index.php | 15 ++- scripts/gameboard.js | 159 ++++++++++++++++++-------------- style.css | 71 ++++++-------- 9 files changed, 212 insertions(+), 115 deletions(-) create mode 100644 assets/textures/crate.png create mode 100644 assets/textures/crate_bad.png create mode 100644 assets/textures/crate_blown.png create mode 100644 assets/textures/heart.png create mode 100644 cards.css diff --git a/assets/textures/crate.png b/assets/textures/crate.png new file mode 100644 index 0000000000000000000000000000000000000000..8bad1bbfd502759f7e52fb42011e2ece51f07767 GIT binary patch literal 5930 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 literal 0 HcmV?d00001 diff --git a/assets/textures/crate_bad.png b/assets/textures/crate_bad.png new file mode 100644 index 0000000000000000000000000000000000000000..d5fe0b60c7b209a79076e35cfcb860678a8d11a8 GIT binary patch literal 4758 zcmcgve=wA39Di2%(PHUB5l1;8CpGM~vTip&Vu@%=a&?pt>&Mb&x5O?gp_odeEA8fD zni6U#lGPlM)Ir*_vI%Ri78?|=tdEM1a)6D%7@60~4&ph+K^Zh>G@8|P*Ki}*C ze=l9E2^IjLOY!zt55O#SWNB%@6RU`jJpf?#N4vWRP~6=u=t&8Y(XkN#*c?qg>gp{d zn>K~cD-BtS3(`-#6L99oLpcN=!`!gqYQvD-%dd}VpK|)aepy}yt)U^m>0)MXRRyjh z!(trM|NK?StHoAI2ixjHBYm~zQi-di2jh0`zEc@Z?cvzP-wu10u1((fmha}_pfQ(Y z<9P4Td81aDY3O^|$h&2YRrR7t=MPVcngGv(cw48+r+ziDYBQc7otG6H7?dr_zU^0M zF=E+aSlCOLZ)(JfytCGNFx&l)^~ISdaFL!=OYRa}*(v`Cx8{fwqefBXTf)mz-p<$9 z^}#3SwUd{=@VkC*az=)UkIlIpt@2g2M#rkn-^uh`l(VlJB%Ki4xx&FZ-N`do=%q1f zFU~LNE(tSum3Cz~KTyEec6xnnGBviVWgdB-M#b1Q{$mhHqEyygmCb#~*WI$E1|OkU z`wVlCtJ7IvMk%p-_qOslA%LCj8W&kt<=N*J6bLificLA`>5?L5lDJdBqYBDH(o|?~R z%`r5Y}=)2Ln^a$e!4k3zYQq^y8Bb!pph~_ZK{IU+jFpDs#aOWnrD%S-Uo`^3273 zdk2>5yoOOs+e3rk-|ukgLojh{;Kl<3fCYlGK)4R60YEl@n{Rq#L;J;E!Beq`inWgQ zXuCR)1)axroWx3RQ(!F9A|&ec1^X&x@^1Uo^c6(*I~`_1XM<}Iam_xFpf|85W{7@- zCQhM4CIL-rc;j!s=vT47s3_-g$h(EL$+gWJ6yHDQsrpl@qpzp|wwLf_ze-xhRt^=x zN`LXjOq8V*Z}&8Lj)<2djgsd8fn=kK&3>!JOG3)F?c0^VCHm?qu;x0`~b}Uiz{pG!f*L5>xr)}<{#0w-511?)v z#P596MIwQc$-n7Gcn97Ol)#4I{AU=AXX_%>>tl38yvET=v*dzXS=Yz&mV{b@#xzE4 z^LiG^A5yZf55dJ(HJoOW1cX$n-MRq*F+|rZlqsBvs=`U2e{KIDuN*y0SR~*?DlHKk zMr|B*=qdI)S7|FKcD9ABm_c!zs-zDs=<;y9`o3NHG6npFiYG{`h?%=sN-H88Co)g< z!`#B7MU87`$~l=S`v*fCN2O-T32TC}e$c6=J6&r8KC54Ym{KXSY zyR<(M)kHxmGUB4_Ku_$y!X=(yGg%t^9O=%tcs1^nm-r;~(=1Y-ze@#(o4O#x8%gi} zQXT{n!&yow;++kSCv&Ac<@k(cd|xWU6+uHb?B9&~x{gbLQw^CSq3iJ=Jo;Vg-t-xd z{^~m-4bD&Tp0X4(?yLf~mZi~00O`hY*a!jvk@1-a2Xt87SYRVD;zGsX9~>mrFTTN)pB|Yq zHz;_mt7GczG6gluYEsSx0%}b^Pt}??ZeFC#PDaV?!3@^8Xs|j%6r&$Q1x#jDMvV(> zgaoZdaE4A9#-;>g1inFb;HUfIiTP-X6ErZLIT*mNVOgSse>h$3*7Q9!^@X60i1ff4 zUay_>1>zxR($s%q5_u~eW@#VPD6}lAtv9XVY~klJ-g2^D6D71A5iY;fmS7Rr-QWs9 uz{i#0$53HAXQ+AGf*=|k7zfZ9-Q?zTsp%D)tanghV*$m}-=o4UEaM+A5&N+K literal 0 HcmV?d00001 diff --git a/assets/textures/crate_blown.png b/assets/textures/crate_blown.png new file mode 100644 index 0000000000000000000000000000000000000000..93f283a6b9c988f1b39c923cadef68a62ea46dec GIT binary patch literal 6269 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 -
+
+
+ +
+
diff --git a/index.php b/index.php index 6588cce..5b1551e 100644 --- a/index.php +++ b/index.php @@ -4,7 +4,8 @@ My Electron Frameless Window - + + @@ -21,12 +22,16 @@
-
+
+
+
- - +
- +
+ Start +
diff --git a/scripts/gameboard.js b/scripts/gameboard.js index f5e1e0b..d85ca5c 100644 --- a/scripts/gameboard.js +++ b/scripts/gameboard.js @@ -2,19 +2,21 @@ var viewspeed = 500; // time the player can see the answers MS var timeout = 1000; // Time after all cards showed var health = 5; -var level = 9*4; +var newPlayground = 3; // replaces the level variable +var level = newPlayground*newPlayground; var difficulty = -1; var showcontent = true; // show numbers inside the cards // Game settings end - +var allow_click = 0; var play_array = []; 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 + prep(); calc_difficulty(); console.log(level); make_playground(); @@ -22,41 +24,58 @@ function initiate(){ // Call all the functions animation(); console.log(difficulty); } -// function animation(){ -// for(anim = 0; play_array.length > anim; anim++){ -// // document.getElementById(play_array[anim]).style.border = "3px solid green"; -// console.log(anim); -// // $("#"+play_array[anim]).addClass('animations'); - -// // setTimeout(function () { -// // $("#"+play_array[anim]).removeClass('animations'); -// // }, 2000); - - -// } -// } -function animation () { +function nextRound(){ + clear_playground(); + clear_values() + calc_difficulty(); + console.log(level); + make_playground(); + randomized(); + animation(); + console.log(difficulty); +} +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 setTimeout(function () { $("#"+play_array[anim]).addClass('animations') anim++; if (play_array.length > anim) { - animation(); + animation(); }else{ basic_timeout(); + allow_click = 1; } }, viewspeed) } - function basic_timeout () { + function basic_timeout () { // small timeout before you can click and the shown cards disapear. setTimeout(function () { $(".card").removeClass('animations'); }, timeout) } -function clear_values(){ - play_array = []; - randoms = null; +function clear_values(){ // Resets the values for next round. + newPlayground = newPlayground + 0.3; + difficulty = -1; + level = newPlayground * newPlayground; + play_array = []; + randoms = 0; + i = 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 + calc_difficulty(); + if (difficulty < level){ + + } } function calc_difficulty(){ - if (level < 9){ // The level value cannot be lower than 9. + if (level <= 9){ // The level value cannot be lower than 9. level = 9; } else{ level = level + 1; @@ -66,28 +85,38 @@ function calc_difficulty(){ } function make_playground(){ //Loop out cards on the playground - var i; - for (i = 1; i < level; i++) { //Creates a new div for each loop wth the attributes and content set below. - var div = document.createElement('div'); - if(showcontent == true){ - div.textContent = i; + var i = 0; + var card_ids = 0; + 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); + 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'); + div.setAttribute('class', 'card'); + 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){ + document.getElementById(card_ids).classList.add("printid"); + } } - div.setAttribute('class', 'card'); - div.setAttribute('id', i); - 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("wrapper").appendChild(div); } } function clear_playground(){ //When called, makes the playground empty - document.getElementById("wrapper").innerHTML = ""; + 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){ - var randoms = Math.floor(Math.random() * level) + 1; - if(play_array.indexOf(randoms) === -1){ - play_array.push(randoms); + randoms = Math.floor(Math.random() * level); + if(randoms != 0){ + if(play_array.indexOf(randoms) === -1){ + play_array.push(randoms); + } } } } @@ -97,43 +126,37 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card 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 - document.getElementById(clicked_id).style.backgroundColor = "green"; - correct_answers++; - if(play_array.length == correct_answers) - { - alert("You survived this round!"); + // 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"; + avoid_repeat.push(clicked_id); + correct_answers++; + if(play_array.length == correct_answers) + { + alert("You survived this round!"); + nextRound(); + } } + } }else{ //Avoid repeat fix - 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"; - - avoid_repeat.push(clicked_id); - - health--; - console.log("Liv: " + health); - if(health == 0) - { - alert("Game over!"); + 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"; + + avoid_repeat.push(clicked_id); + + health--; + console.log("Liv: " + health); + if(health == 0) + { + alert("Game over!"); + } } } } document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing } -/* -pseudocode:' -/ - if (exists) clicked_id= randomized[x] = true - if (value already added skip(Done with array, if exists/contains)) = false - variable add 1 - if variable(int) == all answers(int) = true - next round - add score - else - health - 1 - if health < 5 - gameover -*/ \ No newline at end of file diff --git a/style.css b/style.css index adfa604..8242912 100644 --- a/style.css +++ b/style.css @@ -13,41 +13,12 @@ grid-gap: 1em; } */ - #wrapper { - max-width: 1200px; - max-width: 54%; - max-height: 50%; - margin: 30px auto; - padding: 0 20px; - width: 100%; - display: flex; - - - flex-wrap: wrap; - align-items: center; - justify-content: center; - /* grid-auto-rows: 1fr; */ - /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */ - /* grid-gap: 1em; */ - } .flexwrap{ display: flex; align-items: center; justify-content: center; } - .card { - border-radius: 10px; - padding: 20px; - color: rgb(255, 255, 255); - background-color: rgb(0, 94, 165); - transition: 0.5s; - height: 30vh; - width: 30vh; - min-width: 60px; - max-width: 100px; - max-height: 100px; - margin: 5px; - } + .animations{ border: 1px solid pink; background-color: pink; @@ -99,16 +70,6 @@ body{ background-color: #1d1e22; } - .wrapper { - max-width: 1200px; - margin: 30px auto; - padding: 0 20px; - width: 100%; - display: grid; - grid-auto-rows: 100px; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - grid-gap: 1em; - } .diavo { border-radius: 10px; @@ -126,4 +87,32 @@ body{ .diavo:nth-child(even) { background-color: #afbe29; } - \ No newline at end of file + .card { + cursor: pointer; + padding-bottom: 85%; + width: 100%; + background: rgba(50, 114, 210, 0.5); + border-radius: 10px; + margin: 3px; + } + #card-row { + width: 100%; + margin: 3px; + } + #test-group { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + width: 100%; + height: 100%; + } + #wrapper { + height: 100vh; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + max-width: 800px; + } + \ No newline at end of file