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');
@font-face {
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-style: normal;
}
* {
transition: .3s;
}
.card {
cursor: pointer;
padding-bottom: 85%;
@@ -61,6 +65,7 @@
body {
background-color: #1d1e22;
}
#start-the-game {
position: absolute;
background-color: #44205c65;
@@ -80,8 +85,28 @@ body {
text-shadow: -5px 14px 20px rgb(0, 0, 0);
cursor: pointer;
}
.printid:after {
content: attr(id);
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>
<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>
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="stylesheet" href="cards.css">
@@ -21,6 +20,7 @@
}
</style>
<div id="particles-js"></div>
<body>
<div id="title-bar">
<div id="title">
@@ -35,6 +35,14 @@
<!--- <div loaded="template/window_settings.html"></div> --->
<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="test-group"></div>
</div>
@@ -51,4 +59,5 @@
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="scripts/particles.js"></script>
</body>
</html>

48
scripts/gameboard.js
View File

@@ -5,7 +5,7 @@ var health = 5;
var newPlayground = 3; // replaces the level variable
var level = newPlayground * newPlayground;
var difficulty = -1;
var showcontent = true; // show numbers inside the cards
var showcontent = false; // show numbers inside the cards
// Game settings end
var allow_click = 0;
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 randoms = 0;
var room_level;
var no_fail_round = 0;
var round_values = 0;
function initiate() { // Call all the functions
round_value();
lifes();
prep();
calc_difficulty();
console.log(level);
@@ -24,7 +29,9 @@ function initiate(){ // Call all the functions
animation();
console.log(difficulty);
}
function nextRound() {
round_value();
clear_playground();
clear_values()
calc_difficulty();
@@ -34,9 +41,16 @@ function nextRound(){
animation();
console.log(difficulty);
}
function prep() { // handles everythiing before the game starts
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
setTimeout(function () {
$("#" + play_array[anim]).addClass('animations')
@@ -49,13 +63,22 @@ function animation () { //Animations, shows what cards you click on
}
}, viewspeed)
}
function basic_timeout() { // small timeout before you can click and the shown cards disapear.
setTimeout(function () {
$(".card").removeClass('animations');
}, 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.
newPlayground = newPlayground + 0.3;
no_fail_round = 0;
difficulty = -1;
level = Math.ceil(newPlayground * newPlayground);
play_array = [];
@@ -70,10 +93,11 @@ function clear_values(){ // Resets the values for next round.
correct_answers = 0;
console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info
calc_difficulty();
if (difficulty < level){
// if (difficulty < level) {
// }
}
}
function calc_difficulty() {
if (level <= 9) { // The level value cannot be lower than 9.
level = 9;
@@ -83,6 +107,7 @@ function calc_difficulty(){
difficulty = (35 / 100) * level + difficulty; //calc the difficulty to scale with the level
difficulty = Math.round(difficulty) // Makes the difficulty value a integer
}
function make_playground() {
//Loop out cards on the playground
var i = 0;
@@ -105,6 +130,7 @@ function make_playground(){
}
}
}
function clear_playground() { //When called, makes the playground empty
document.getElementById("test-group").innerHTML = "";
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)";
avoid_repeat.push(clicked_id);
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!");
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);
health--;
let list = document.getElementById("health");
list.removeChild(list.childNodes[0]);
no_fail_round = 1;
console.log("Liv: " + health);
if(health == 0)
{
if (health == 0) {
alert("Game over!");
}
}