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

39
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,7 +65,8 @@
body { body {
background-color: #1d1e22; background-color: #1d1e22;
} }
#start-the-game{
#start-the-game {
position: absolute; position: absolute;
background-color: #44205c65; background-color: #44205c65;
height: 100%; height: 100%;
@@ -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{
content:attr(id); .printid:after {
position: absolute; 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;
}

83
index.php
View File

@@ -1,27 +1,27 @@
<html> <html>
<head>
<title>My Electron Frameless Window</title> <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <title>Blocks demo</title>
<!-- <link rel="stylesheet" href="style.css"> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="cards.css"> <!-- <link rel="stylesheet" href="style.css"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="cards.css">
</head> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> </head>
#particles-js { <style>
width: 100%; #particles-js {
height: 100vh; width: 100%;
position: fixed; height: 100vh;
top: 0; position: fixed;
left: 0; top: 0;
z-index: -50; left: 0;
background-image: url(assets/textures/bg.png); z-index: -50;
background-size: cover; background-image: url(assets/textures/bg.png);
} background-size: cover;
</style> }
<div id="particles-js"></div> </style>
<body> <div id="particles-js"></div>
<body>
<div id="title-bar"> <div id="title-bar">
<div id="title"> <div id="title">
Blocks Blocks
@@ -32,23 +32,32 @@
<button class="nav-btn-xe" id="close-btn"></button> <button class="nav-btn-xe" id="close-btn"></button>
</div> </div>
</div> </div>
<!--- <div loaded="template/window_settings.html"></div> ---> <!--- <div loaded="template/window_settings.html"></div> --->
<div class="flexwrap"> <div class="flexwrap">
<div id="wrapper"> <div class="stats">
<div id="test-group"></div> <div id="health"></div>
</div> <div id="container_r">Round:&nbsp;<div id="round"></div>
</div> </div>
<!-- <button type="button">Start</button> <div id="container_r">&nbsp;Score:&nbsp;<div id="score">0</div>
</div>
</div>
<div id="wrapper">
<div id="test-group"></div>
</div>
</div>
<!-- <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" onclick="initiate()">
Start Start
</div> </div>
<script src="scripts/gameboard.js"></script> <script src="scripts/gameboard.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>
</body>
<!-- particles.js library -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="scripts/particles.js"></script>
</body>
</html> </html>

154
scripts/gameboard.js
View File

@@ -1,11 +1,11 @@
// Game settings // Game settings
var viewspeed = 500; // time the player can see the answers MS var viewspeed = 500; // time the player can see the answers MS
var timeout = 1000; // Time after all cards showed var timeout = 1000; // Time after all cards showed
var health = 5; 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;
function initiate(){ // Call all the functions var no_fail_round = 0;
var round_values = 0;
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,28 +41,44 @@ 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 animation () { //Animations, shows what cards you click on
function round_value() {
round_values++;
document.getElementById("round").innerHTML = round_values;
}
function animation() { //Animations, shows what cards you click on
setTimeout(function () { setTimeout(function () {
$("#"+play_array[anim]).addClass('animations') $("#" + play_array[anim]).addClass('animations')
anim++; anim++;
if (play_array.length > anim) { if (play_array.length > anim) {
animation(); animation();
}else{ } else {
basic_timeout(); basic_timeout();
allow_click = 1; allow_click = 1;
} }
}, 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 clear_values(){ // Resets the values for next round.
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; 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 = [];
@@ -68,30 +91,32 @@ function clear_values(){ // Resets the values for next round.
allow_click = 0; allow_click = 0;
avoid_repeat = []; avoid_repeat = [];
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(){
if (level <= 9){ // The level value cannot be lower than 9. function calc_difficulty() {
if (level <= 9) { // The level value cannot be lower than 9.
level = 9; level = 9;
} else{ } else {
level = level + 1; level = level + 1;
} }
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;
var card_ids = 0; var card_ids = 0;
for (var y = 0; y < newPlayground; y++){ for (var y = 0; y < newPlayground; y++) {
var row = document.createElement('div'); var row = document.createElement('div');
row.setAttribute('id', 'card-row' + y); row.setAttribute('id', 'card-row' + y);
row.setAttribute('class', 'card-row'); row.setAttribute('class', 'card-row');
document.getElementById("test-group").appendChild(row); document.getElementById("test-group").appendChild(row);
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');
@@ -99,51 +124,58 @@ function make_playground(){
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);
if(showcontent == true){ if (showcontent == true) {
document.getElementById(card_ids).classList.add("printid"); document.getElementById(card_ids).classList.add("printid");
} }
} }
} }
} }
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 } //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) {
randoms = Math.floor(Math.random() * level); randoms = Math.floor(Math.random() * level);
if(randoms != 0){ if (randoms != 0) {
if(play_array.indexOf(randoms) === -1){ if (play_array.indexOf(randoms) === -1) {
play_array.push(randoms); play_array.push(randoms);
}
}
}
}
function reply_click(clicked_id){ // Grabs the value from the id on the div/card when it's clicked on.
clicked_id = Number(clicked_id);
console.log("level="+level+"\n difficulty="+difficulty+"\n array="+play_array+"\n clicked_id="+clicked_id); // Console info
if(play_array.includes(clicked_id)){ // Takes the id from the div and searches in the array for it. Returns either true or false.
// document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green
if(allow_click === 1){
if (!avoid_repeat.includes(clicked_id)){
document.getElementById(clicked_id).style.backgroundColor = "green";
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)
{
alert("You survived this round!");
nextRound();
} }
} }
} }
}else{ }
function reply_click(clicked_id) { // Grabs the value from the id on the div/card when it's clicked on.
clicked_id = Number(clicked_id);
console.log("level=" + level + "\n difficulty=" + difficulty + "\n array=" + play_array + "\n clicked_id=" + clicked_id); // Console info
if (play_array.includes(clicked_id)) { // Takes the id from the div and searches in the array for it. Returns either true or false.
// document.getElementById(clicked_id).style.border = "3px solid green"; // Makes the div/cards border green
if (allow_click === 1) {
if (!avoid_repeat.includes(clicked_id)) {
document.getElementById(clicked_id).style.backgroundColor = "green";
document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate-green.png)";
avoid_repeat.push(clicked_id);
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();
}
}
}
} else {
//Avoid repeat fix //Avoid repeat fix
if(allow_click === 1){ if (allow_click === 1) {
if (!avoid_repeat.includes(clicked_id)){ if (!avoid_repeat.includes(clicked_id)) {
// document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red // document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red
document.getElementById(clicked_id).style.backgroundColor = "red"; document.getElementById(clicked_id).style.backgroundColor = "red";
document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate_bad.png)"; document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate_bad.png)";
@@ -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!");
} }
} }