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

Added stats to the game, health left and score, and what level you are on

Browse Source
This commit is contained in:
SocksOnHead
2020-03-12 13:39:43 +01:00
parent 9d462fad87
commit 8e6c5b4f67
3 changed files with 184 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
cards.css
View File

@@ -1,14 +1,18 @@
@import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap'); @import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap');
@font-face { @font-face {
font-family: "8-bit-pusab"; font-family: "8-bit-pusab";
src: url("./assets/fonts/8-bit-pusab.woff") format("woff"); /* Modern Browsers */ src: url("./assets/fonts/8-bit-pusab.woff") format("woff");
/* Modern Browsers */
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
* { * {
transition: .3s; transition: .3s;
} }
.card { .card {
cursor: pointer; cursor: pointer;
padding-bottom: 85%; padding-bottom: 85%;
@@ -61,6 +65,7 @@
body { body {
background-color: #1d1e22; background-color: #1d1e22;
} }
#start-the-game { #start-the-game {
position: absolute; position: absolute;
background-color: #44205c65; background-color: #44205c65;
@@ -80,8 +85,28 @@ body {
text-shadow: -5px 14px 20px rgb(0, 0, 0); text-shadow: -5px 14px 20px rgb(0, 0, 0);
cursor: pointer; cursor: pointer;
} }
.printid:after { .printid:after {
content: attr(id); content: attr(id);
position: absolute; position: absolute;
} }
.stats {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 18px;
color: #fff;
font-family: "8-bit-pusab";
}
#container_r {
display: flex;
flex-direction: column;
flex-direction: row;
}
#health {
min-width: 170px;
}

15
index.php
View File

@@ -1,8 +1,7 @@
<html> <html>
<head>
<title>My Electron Frameless Window</title> <head>
<title>Blocks demo</title>
<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">
@@ -21,6 +20,7 @@
} }
</style> </style>
<div id="particles-js"></div> <div id="particles-js"></div>
<body> <body>
<div id="title-bar"> <div id="title-bar">
<div id="title"> <div id="title">
@@ -35,6 +35,14 @@
<!--- <div loaded="template/window_settings.html"></div> ---> <!--- <div loaded="template/window_settings.html"></div> --->
<div class="flexwrap"> <div class="flexwrap">
<div class="stats">
<div id="health"></div>
<div id="container_r">Round:&nbsp;<div id="round"></div>
</div>
<div id="container_r">&nbsp;Score:&nbsp;<div id="score">0</div>
</div>
</div>
<div id="wrapper"> <div id="wrapper">
<div id="test-group"></div> <div id="test-group"></div>
</div> </div>
@@ -51,4 +59,5 @@
<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>
</body> </body>
</html> </html>

48
scripts/gameboard.js
View File

@@ -5,7 +5,7 @@ var health = 5;
var newPlayground = 3; // replaces the level variable var newPlayground = 3; // replaces the level variable
var level = newPlayground * newPlayground; var level = newPlayground * newPlayground;
var difficulty = -1; var difficulty = -1;
var showcontent = true; // show numbers inside the cards var showcontent = false; // show numbers inside the cards
// Game settings end // Game settings end
var allow_click = 0; var allow_click = 0;
var play_array = []; var play_array = [];
@@ -15,7 +15,12 @@ var correct_answers = 0;
var avoid_repeat = []; // When a card is clicked, the player cant click on same card more than once var avoid_repeat = []; // When a card is clicked, the player cant click on same card more than once
var randoms = 0; var randoms = 0;
var room_level; var room_level;
var no_fail_round = 0;
var round_values = 0;
function initiate() { // Call all the functions function initiate() { // Call all the functions
round_value();
lifes();
prep(); prep();
calc_difficulty(); calc_difficulty();
console.log(level); console.log(level);
@@ -24,7 +29,9 @@ function initiate(){ // Call all the functions
animation(); animation();
console.log(difficulty); console.log(difficulty);
} }
function nextRound() { function nextRound() {
round_value();
clear_playground(); clear_playground();
clear_values() clear_values()
calc_difficulty(); calc_difficulty();
@@ -34,9 +41,16 @@ function nextRound(){
animation(); animation();
console.log(difficulty); console.log(difficulty);
} }
function prep() { // handles everythiing before the game starts function prep() { // handles everythiing before the game starts
document.getElementById("start-the-game").style.visibility = "hidden"; //hides the start button document.getElementById("start-the-game").style.visibility = "hidden"; //hides the start button
} }
function round_value() {
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
setTimeout(function () { setTimeout(function () {
$("#" + play_array[anim]).addClass('animations') $("#" + play_array[anim]).addClass('animations')
@@ -49,13 +63,22 @@ function animation () { //Animations, shows what cards you click on
} }
}, viewspeed) }, viewspeed)
} }
function basic_timeout() { // small timeout before you can click and the shown cards disapear. function basic_timeout() { // small timeout before you can click and the shown cards disapear.
setTimeout(function () { setTimeout(function () {
$(".card").removeClass('animations'); $(".card").removeClass('animations');
}, timeout) }, timeout)
} }
function lifes() {
for (let lives = 0; lives < health; lives++) {
document.getElementById("health").innerHTML += '<img src="assets/textures/heart.png" alt="health">';
}
}
function clear_values() { // Resets the values for next round. function clear_values() { // Resets the values for next round.
newPlayground = newPlayground + 0.3; newPlayground = newPlayground + 0.3;
no_fail_round = 0;
difficulty = -1; difficulty = -1;
level = Math.ceil(newPlayground * newPlayground); level = Math.ceil(newPlayground * newPlayground);
play_array = []; play_array = [];
@@ -70,10 +93,11 @@ function clear_values(){ // Resets the values for next round.
correct_answers = 0; correct_answers = 0;
console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info
calc_difficulty(); calc_difficulty();
if (difficulty < level){ // if (difficulty < level) {
// }
} }
}
function calc_difficulty() { function calc_difficulty() {
if (level <= 9) { // The level value cannot be lower than 9. if (level <= 9) { // The level value cannot be lower than 9.
level = 9; level = 9;
@@ -83,6 +107,7 @@ function calc_difficulty(){
difficulty = (35 / 100) * level + difficulty; //calc the difficulty to scale with the level difficulty = (35 / 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
} }
function make_playground() { function make_playground() {
//Loop out cards on the playground //Loop out cards on the playground
var i = 0; var i = 0;
@@ -105,6 +130,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();
@@ -133,8 +159,14 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate-green.png)"; document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate-green.png)";
avoid_repeat.push(clicked_id); avoid_repeat.push(clicked_id);
correct_answers++; correct_answers++;
if(play_array.length == correct_answers) let x = document.getElementById("score").textContent;
{
if (play_array.length == correct_answers) {
if (no_fail_round != 0) {
document.getElementById("score").innerHTML = parseInt(x) * 1 + 13;
} else {
document.getElementById("score").innerHTML = parseInt(x) * 2 + 30;
}
alert("You survived this round!"); alert("You survived this round!");
nextRound(); nextRound();
} }
@@ -151,9 +183,11 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
avoid_repeat.push(clicked_id); avoid_repeat.push(clicked_id);
health--; health--;
let list = document.getElementById("health");
list.removeChild(list.childNodes[0]);
no_fail_round = 1;
console.log("Liv: " + health); console.log("Liv: " + health);
if(health == 0) if (health == 0) {
{
alert("Game over!"); alert("Game over!");
} }
} }