diff --git a/assets/textures/crate-green.png b/assets/textures/crate-green.png new file mode 100644 index 0000000..f5ccb85 Binary files /dev/null and b/assets/textures/crate-green.png differ diff --git a/cards.css b/cards.css index 2a59243..6d83105 100644 --- a/cards.css +++ b/cards.css @@ -1,4 +1,11 @@ @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 */ + font-weight: normal; + font-style: normal; + } *{ transition: .3s; } @@ -6,7 +13,10 @@ cursor: pointer; padding-bottom: 85%; width: 100%; - background: rgba(50, 114, 210, 0.5); + /* background: rgba(50, 114, 210, 0.5); */ + background: url(assets/textures/crate.png); + background-repeat: round; + background-size: cover; border-radius: 10px; margin: 3px; } @@ -35,7 +45,8 @@ } .animations { - background-color: rgb(80, 0, 146); + /* background-color: rgb(80, 0, 146); */ + filter: invert(1); } .card:hover { @@ -61,10 +72,10 @@ body { display: flex; justify-content: center; align-items: center; - color: #fff; + color: #fff; /* font-weight: 900; */ - font-size: 50vh; - font-family: 'Lalezar', cursive; + 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; diff --git a/index.php b/index.php index 5b1551e..441f929 100644 --- a/index.php +++ b/index.php @@ -8,7 +8,19 @@ - + +
@@ -21,6 +33,7 @@
+
@@ -33,5 +46,9 @@ Start
- + + + + + diff --git a/scripts/gameboard.js b/scripts/gameboard.js index d85ca5c..ae12c90 100644 --- a/scripts/gameboard.js +++ b/scripts/gameboard.js @@ -57,7 +57,7 @@ function animation () { //Animations, shows what cards you click on function clear_values(){ // Resets the values for next round. newPlayground = newPlayground + 0.3; difficulty = -1; - level = newPlayground * newPlayground; + level = Math.ceil(newPlayground * newPlayground); play_array = []; randoms = 0; i = 0; @@ -130,6 +130,7 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card 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) @@ -145,6 +146,7 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card 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); diff --git a/scripts/particles.js b/scripts/particles.js new file mode 100644 index 0000000..4c7871f --- /dev/null +++ b/scripts/particles.js @@ -0,0 +1,105 @@ +particlesJS("particles-js", { + "particles": { + "number": { + "value": 160, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#ffffff" + }, + "shape": { + "type": "edge", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 9 + } + }, + "opacity": { + "value": 0.2, + "random": true, + "anim": { + "enable": true, + "speed": 1, + "opacity_min": 0, + "sync": false + } + }, + "size": { + "value": 6, + "random": true, + "anim": { + "enable": false, + "speed": 4, + "size_min": 0.3, + "sync": false + } + }, + "line_linked": { + "enable": false, + "distance": 150, + "color": "#ffffff", + "opacity": 0.2, + "width": 1 + }, + "move": { + "enable": true, + "speed": 1, + "direction": "none", + "random": true, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 600 + } + } + }, + "interactivity": { + "detect_on": "window", + "events": { + "onhover": { + "enable": false, + "mode": "grab" + }, + "onclick": { + "enable": true, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 0.5 + } + }, + "bubble": { + "distance": 750, + "size": 40, + "duration": 2, + "opacity": 0, + "speed": 3 + }, + "repulse": { + "distance": 900, + "duration": 0.2 + }, + "push": { + "particles_nb": 10 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true + }); \ No newline at end of file diff --git a/style.css b/style.css index 8242912..9c7d62a 100644 --- a/style.css +++ b/style.css @@ -94,6 +94,7 @@ body{ background: rgba(50, 114, 210, 0.5); border-radius: 10px; margin: 3px; + transform: rotate(180deg); } #card-row { width: 100%;