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

New/gameboard #5

Merged
Myxelium merged 4 commits from new/gameboard into master 2020-03-15 22:53:46 +00:00
Conversation 0 Commits 4 Files Changed 10 +183 -18
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();
}