Added textures and a animated background done with particles.js and did a slight change in the level variable to round it up.

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);
     

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
+  });