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

Merge pull request #5 from Azaaxin/new/gameboard

Browse Source 
New/gameboard
This commit was merged in pull request #5.
This commit is contained in:
SocksOnHead
2020-03-15 23:53:46 +01:00
committed by GitHub
parent c2e47b4281 eb693970fc
commit 8acaf1cca9
10 changed files with 183 additions and 18 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.

BIN
assets/textures/button_off.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/textures/button_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/textures/options.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

116
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;
@@ -85,7 +93,33 @@ body {
text-shadow: -5px 14px 20px rgb(0, 0, 0); text-shadow: -5px 14px 20px rgb(0, 0, 0);
cursor: pointer; cursor: pointer;
} }
#options-window {
position: absolute;
background-color: #000000d4;
height: 100%;
width: 100%;
z-index: 99999;
top: 0px;
right: 0px;
/* display: flex; */
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
/* font-weight: 900; */
font-size: 1vw;
font-family: "8-bit-pusab";
/* -webkit-text-stroke: 1px rgb(10, 10, 10); */
text-shadow: -3px 5px 20px rgb(0, 0, 0);
cursor: pointer;
display: none;
}
.shownumbers-button{
display: flex;
}
#button-text-01{
width: 21vw;
}
.printid:after { .printid:after {
content: attr(id); content: attr(id);
position: absolute; position: absolute;
@@ -96,7 +130,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 +142,79 @@ body {
} }
#health { #health {
min-width: 170px; /* min-width: 170px; */
min-width: 33%;
}
.settings{
font-size: 50%;
}
.cardspeed{
display: flex;
align-items: center;
width: fit-content;
}
#range-value{
margin: 0 7px;
}
#start-the-game *:hover::before {
content:'> ';
}
#options-window div{
margin: 1vh 0;
}
/* Menu button */
.menu-nav-button{
font-family: "8-bit-pusab";
background-color: #ff0000;
border: none;
color: white;
padding: 5px 19px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
}
/* Slider style */
.slider {
-webkit-appearance: none;
width: 25%;
height: 15px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
margin: 6;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: #ff0000;
cursor: pointer;
}
.slider::-moz-range-thumb { /* Same thing in firefox as above */
width: 15px;
height: 15px;
background: #ff0000;
cursor: pointer;
border-radius: 0px;
border: 0px solid
transparent;
}
/* slider ends */
@media screen and (max-width: 513px) {
.stats {
font-size: 64%;
}
#health{
width: 118px;
min-width: unset;
}
#health img {
width: 20%;
}
} }

39
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,36 @@
<!-- <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();" onclick="when_clicked()" class="settings">Options</div>
</div> </div>
<script src="scripts/gameboard.js"></script> <div id="options-window">
<div class="cardspeed">
<div>Card speed:</div>
<div id="range-value">500</div>
<input type="range" class="slider" onchange="cardspeed()" id="card-speed-number-value" min="10" max="2000">
</div>
<div class="shownumbers-button">
<div class="button-icon">
<img src="assets/textures/button_off.png" onclick="menu_clicks();check();document.getElementById('btn-off').style.display = 'none';document.getElementById('btn-on').style.display = 'block';" id="btn-off" alt="off">
<img src="assets/textures/button_on.png" onclick="menu_clicks();uncheck();document.getElementById('btn-on').style.display = 'none';document.getElementById('btn-off').style.display = 'block';" style="display: none;" id="btn-on" alt="off">
</div>
<div id="button-text-01">
Turn on card numbers
</div>
</div>
<button onclick="menu_clicks();when_clicked_back();" class="menu-nav-button">Back</button>
</div>
<div class="overlay">
<div class="narrator">
</div>
</div>
<script src="scripts/gameboard.js"></script>
<script src="scripts/sound.js"></script>
<script src="scripts/options.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>

4
scripts/blockamount.js
View File

@@ -1,4 +0,0 @@
$("<h1>Include this using jquery</h1>").appendTo("body");
console.log($("body").html());

10
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);
@@ -134,7 +134,7 @@ function make_playground() {
function clear_playground() { //When called, makes the playground empty function clear_playground() { //When called, makes the playground empty
document.getElementById("test-group").innerHTML = ""; document.getElementById("test-group").innerHTML = "";
clear_values(); clear_values();
} //hello }
function randomized() { // Fills the array with random numbers. Max number determines by level function randomized() { // Fills the array with random numbers. Max number determines by level
while (play_array.length < difficulty) { while (play_array.length < difficulty) {
@@ -167,7 +167,7 @@ function reply_click(clicked_id) { // Grabs the value from the id on the div/car
} else { } else {
document.getElementById("score").innerHTML = parseInt(x) * 2 + 30; document.getElementById("score").innerHTML = parseInt(x) * 2 + 30;
} }
alert("You survived this round!"); // alert("You survived this round!");
nextRound(); nextRound();
} }
} }

26
scripts/options.js Normal file
View File

@@ -0,0 +1,26 @@
// gameboard.js required
function when_clicked(){
document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/options.png)";
document.getElementById("start-the-game").style.display = "none";
document.getElementById("options-window").style.display = "flex";
}
function when_clicked_back(){
document.getElementById("particles-js").style.backgroundImage = "url(assets/textures/bg.png)";
document.getElementById("start-the-game").style.display = "flex";
document.getElementById("options-window").style.display = "none";
}
function check() {
showcontent = true;
document.getElementById("button-text-01").innerHTML = "Turn off card numbers";
}
function uncheck() {
showcontent = false;
document.getElementById("button-text-01").innerHTML = "Turn on card numbers";
}
function cardspeed(){
viewspeed = document.getElementById("card-speed-number-value").value;
document.getElementById("range-value").innerText = document.getElementById("card-speed-number-value").value;
menu_clicks();
}

4
scripts/sound.js Normal file
View File

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