Merge pull request #5 from Azaaxin/new/gameboard
New/gameboard
This commit was merged in pull request #5.
This commit is contained in:
GitHub
BIN
assets/sounds/menu_click.wav
Normal file
BIN
assets/sounds/menu_click.wav
Normal file
Binary file not shown.
BIN
assets/textures/button_off.png
Normal file
BIN
assets/textures/button_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/textures/button_on.png
Normal file
BIN
assets/textures/button_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assets/textures/options.png
Normal file
BIN
assets/textures/options.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
116
cards.css
116
cards.css
@@ -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;
|
||||
@@ -85,7 +93,33 @@ body {
|
||||
text-shadow: -5px 14px 20px rgb(0, 0, 0);
|
||||
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 {
|
||||
content: attr(id);
|
||||
position: absolute;
|
||||
@@ -96,7 +130,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 +142,79 @@ body {
|
||||
}
|
||||
|
||||
#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
39
index.php
@@ -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,36 @@
|
||||
<!-- <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();" onclick="when_clicked()" class="settings">Options</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 -->
|
||||
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
<script src="scripts/particles.js"></script>
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
|
||||
$("<h1>Include this using jquery</h1>").appendTo("body");
|
||||
console.log($("body").html());
|
||||
@@ -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);
|
||||
@@ -134,7 +134,7 @@ function make_playground() {
|
||||
function clear_playground() { //When called, makes the playground empty
|
||||
document.getElementById("test-group").innerHTML = "";
|
||||
clear_values();
|
||||
} //hello
|
||||
}
|
||||
|
||||
function randomized() { // Fills the array with random numbers. Max number determines by level
|
||||
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 {
|
||||
document.getElementById("score").innerHTML = parseInt(x) * 2 + 30;
|
||||
}
|
||||
alert("You survived this round!");
|
||||
// alert("You survived this round!");
|
||||
nextRound();
|
||||
}
|
||||
}
|
||||
|
||||
26
scripts/options.js
Normal file
26
scripts/options.js
Normal 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
4
scripts/sound.js
Normal file
@@ -0,0 +1,4 @@
|
||||
function menu_clicks(){
|
||||
var audio = document.getElementsByTagName("audio")[0];
|
||||
audio.play();
|
||||
}
|
||||
Reference in New Issue
Block a user