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

Added sounds but buggy

Browse Source
This commit is contained in:
SocksOnHead
2020-03-15 20:56:00 +01:00
parent 8e6c5b4f67
commit a9bfbe4f95
5 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/sounds/menu_click.wav Normal file
View File

Binary file not shown.

33
cards.css
View File

@@ -12,7 +12,14 @@
* { * {
transition: .3s; transition: .3s;
} }
.noSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.card { .card {
cursor: pointer; cursor: pointer;
padding-bottom: 85%; padding-bottom: 85%;
@@ -75,6 +82,7 @@ body {
top: 0px; top: 0px;
right: 0px; right: 0px;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff; color: #fff;
@@ -96,7 +104,7 @@ body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
font-size: 18px; font-size: 100%;
color: #fff; color: #fff;
font-family: "8-bit-pusab"; font-family: "8-bit-pusab";
} }
@@ -108,5 +116,24 @@ body {
} }
#health { #health {
min-width: 170px; /* min-width: 170px; */
min-width: 33%;
}
.settings{
font-size: 50%;
}
#start-the-game *:hover::before {
content:'> ';
}
@media screen and (max-width: 513px) {
.stats {
font-size: 64%;
}
#health{
width: 118px;
min-width: unset;
}
#health img {
width: 20%;
}
} }

22
index.php
View File

@@ -5,7 +5,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="style.css"> --> <!-- <link rel="stylesheet" href="style.css"> -->
<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, user-scalable=no, initial-scale=1.0">
</head> </head>
<style> <style>
#particles-js { #particles-js {
@@ -22,6 +23,11 @@
<div id="particles-js"></div> <div id="particles-js"></div>
<body> <body>
<div class="sound_player">
<audio id="menu_click">
<source src="assets/sounds/menu_click.wav">
</audio>
</div>
<div id="title-bar"> <div id="title-bar">
<div id="title"> <div id="title">
Blocks Blocks
@@ -50,11 +56,19 @@
<!-- <button type="button">Start</button> <!-- <button type="button">Start</button>
<button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button> --> <button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button> -->
<div id="alerted"></div> <div id="alerted"></div>
<div id="start-the-game" onclick="initiate()"> <div id="start-the-game">
Start <div onmouseover="menu_clicks();" onclick="initiate()">Start</div>
<div onmouseover="menu_clicks();" class="settings">Options</div>
</div> </div>
<script src="scripts/gameboard.js"></script>
<div class="overlay">
<div class="narrator">
</div>
</div>
<script src="scripts/gameboard.js"></script>
<script src="scripts/sound.js"></script>
<!-- particles.js library --> <!-- particles.js library -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="scripts/particles.js"></script> <script src="scripts/particles.js"></script>

6
scripts/gameboard.js
View File

@@ -51,7 +51,7 @@ function round_value() {
document.getElementById("round").innerHTML = round_values; document.getElementById("round").innerHTML = round_values;
} }
function animation() { //Animations, shows what cards you click on function animation() { //Animations, shows what cards you click on. Works like a loop. SetTimout cant be used in normal loop
setTimeout(function () { setTimeout(function () {
$("#" + play_array[anim]).addClass('animations') $("#" + play_array[anim]).addClass('animations')
anim++; anim++;
@@ -104,7 +104,7 @@ function calc_difficulty() {
} else { } else {
level = level + 1; level = level + 1;
} }
difficulty = (35 / 100) * level + difficulty; //calc the difficulty to scale with the level difficulty = (20 / 100) * level + difficulty; //calc the difficulty to scale with the level
difficulty = Math.round(difficulty) // Makes the difficulty value a integer difficulty = Math.round(difficulty) // Makes the difficulty value a integer
} }
@@ -120,7 +120,7 @@ function make_playground() {
for (i = 0; i < newPlayground; i++) { //Creates a new div for each loop wth the attributes and content set below. for (i = 0; i < newPlayground; i++) { //Creates a new div for each loop wth the attributes and content set below.
card_ids++; card_ids++;
var div = document.createElement('div'); var div = document.createElement('div');
div.setAttribute('class', 'card'); div.setAttribute('class', 'card noSelect');
div.setAttribute('id', card_ids); 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() 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); document.getElementById('card-row' + y).appendChild(div);

4
scripts/sound.js Normal file
View File

@@ -0,0 +1,4 @@
function menu_clicks(){
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}