Added textures and a animated background done with particles.js and did a slight change in the level variable to round it up.
This commit is contained in:
BIN
assets/textures/crate-green.png
Normal file
BIN
assets/textures/crate-green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
21
cards.css
21
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;
|
||||
|
||||
21
index.php
21
index.php
@@ -8,7 +8,19 @@
|
||||
<link rel="stylesheet" href="cards.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#particles-js {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -50;
|
||||
background-image: url(assets/textures/bg.png);
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
<div id="particles-js"></div>
|
||||
<body>
|
||||
<div id="title-bar">
|
||||
<div id="title">
|
||||
@@ -21,6 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--- <div loaded="template/window_settings.html"></div> --->
|
||||
|
||||
<div class="flexwrap">
|
||||
<div id="wrapper">
|
||||
<div id="test-group"></div>
|
||||
@@ -33,5 +46,9 @@
|
||||
Start
|
||||
</div>
|
||||
<script src="scripts/gameboard.js"></script>
|
||||
</body>
|
||||
|
||||
<!-- particles.js library -->
|
||||
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
<script src="scripts/particles.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
105
scripts/particles.js
Normal file
105
scripts/particles.js
Normal file
@@ -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
|
||||
});
|
||||
Reference in New Issue
Block a user