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;
}
.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 {
cursor: pointer;
padding-bottom: 85%;
@@ -75,6 +82,7 @@ body {
top: 0px;
right: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
@@ -96,7 +104,7 @@ body {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 18px;
font-size: 100%;
color: #fff;
font-family: "8-bit-pusab";
}
@@ -108,5 +116,24 @@ body {
}
#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>
<!-- <link rel="stylesheet" href="style.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>
<style>
#particles-js {
@@ -22,6 +23,11 @@
<div id="particles-js"></div>
<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">
Blocks
@@ -50,11 +56,19 @@
<!-- <button type="button">Start</button>
<button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button> -->
<div id="alerted"></div>
<div id="start-the-game" onclick="initiate()">
Start
<div id="start-the-game">
<div onmouseover="menu_clicks();" onclick="initiate()">Start</div>
<div onmouseover="menu_clicks();" class="settings">Options</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 -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="scripts/particles.js"></script>

8
scripts/gameboard.js
View File

@@ -7,7 +7,7 @@ var level = newPlayground * newPlayground;
var difficulty = -1;
var showcontent = false; // show numbers inside the cards
// Game settings end
var allow_click = 0;
var allow_click = 0;
var play_array = [];
var anim = 0;
var y = 1;
@@ -51,7 +51,7 @@ function round_value() {
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 () {
$("#" + play_array[anim]).addClass('animations')
anim++;
@@ -104,7 +104,7 @@ function calc_difficulty() {
} else {
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
}
@@ -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.
card_ids++;
var div = document.createElement('div');
div.setAttribute('class', 'card');
div.setAttribute('class', 'card noSelect');
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()
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();
}