myxelium/Blocks-Game
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Added textures and a animated background done with particles.js and d… #3

Merged
Myxelium merged 1 commits from new/gameboard into master 2020-03-10 23:55:05 +00:00
Conversation 0 Commits 1 Files Changed 6 +144 -8
6 changed files with 144 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/textures/crate-green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

21
cards.css
View File

@@ -1,4 +1,11 @@
@import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap'); @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; transition: .3s;
} }
@@ -6,7 +13,10 @@
cursor: pointer; cursor: pointer;
padding-bottom: 85%; padding-bottom: 85%;
width: 100%; 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; border-radius: 10px;
margin: 3px; margin: 3px;
} }
@@ -35,7 +45,8 @@
} }
.animations { .animations {
background-color: rgb(80, 0, 146); /* background-color: rgb(80, 0, 146); */
filter: invert(1);
} }
.card:hover { .card:hover {
@@ -61,10 +72,10 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff; color: #fff;
/* font-weight: 900; */ /* font-weight: 900; */
font-size: 50vh; font-size: 9vw;
font-family: 'Lalezar', cursive; font-family: "8-bit-pusab";
-webkit-text-stroke: 2px rgb(10, 10, 10); -webkit-text-stroke: 2px rgb(10, 10, 10);
text-shadow: -5px 14px 20px rgb(0, 0, 0); text-shadow: -5px 14px 20px rgb(0, 0, 0);
cursor: pointer; cursor: pointer;

21
index.php
View File

@@ -8,7 +8,19 @@
<link rel="stylesheet" href="cards.css"> <link rel="stylesheet" href="cards.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </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> <body>
<div id="title-bar"> <div id="title-bar">
<div id="title"> <div id="title">
@@ -21,6 +33,7 @@
</div> </div>
</div> </div>
<!--- <div loaded="template/window_settings.html"></div> ---> <!--- <div loaded="template/window_settings.html"></div> --->
<div class="flexwrap"> <div class="flexwrap">
<div id="wrapper"> <div id="wrapper">
<div id="test-group"></div> <div id="test-group"></div>
@@ -33,5 +46,9 @@
Start Start
</div> </div>
<script src="scripts/gameboard.js"></script> <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> </html>

4
scripts/gameboard.js
View File

@@ -57,7 +57,7 @@ function animation () { //Animations, shows what cards you click on
function clear_values(){ // Resets the values for next round. function clear_values(){ // Resets the values for next round.
newPlayground = newPlayground + 0.3; newPlayground = newPlayground + 0.3;
difficulty = -1; difficulty = -1;
level = newPlayground * newPlayground; level = Math.ceil(newPlayground * newPlayground);
play_array = []; play_array = [];
randoms = 0; randoms = 0;
i = 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(allow_click === 1){
if (!avoid_repeat.includes(clicked_id)){ if (!avoid_repeat.includes(clicked_id)){
document.getElementById(clicked_id).style.backgroundColor = "green"; document.getElementById(clicked_id).style.backgroundColor = "green";
document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate-green.png)";
avoid_repeat.push(clicked_id); avoid_repeat.push(clicked_id);
correct_answers++; correct_answers++;
if(play_array.length == 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)){ 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.border = "3px solid red"; // Makes the div/cards border red
document.getElementById(clicked_id).style.backgroundColor = "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); avoid_repeat.push(clicked_id);

105
scripts/particles.js Normal file
View 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
});

1
style.css
View File

@@ -94,6 +94,7 @@ body{
background: rgba(50, 114, 210, 0.5); background: rgba(50, 114, 210, 0.5);
border-radius: 10px; border-radius: 10px;
margin: 3px; margin: 3px;
transform: rotate(180deg);
} }
#card-row { #card-row {
width: 100%; width: 100%;