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

45
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,7 +65,8 @@
body {
background-color: #1d1e22;
}
#start-the-game{
#start-the-game {
position: absolute;
background-color: #44205c65;
height: 100%;
@@ -72,7 +77,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
color: #fff;
/* font-weight: 900; */
font-size: 9vw;
font-family: "8-bit-pusab";
@@ -80,8 +85,28 @@ body {
text-shadow: -5px 14px 20px rgb(0, 0, 0);
cursor: pointer;
}
.printid:after{
content:attr(id);
position: absolute;
.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;
}

89
index.php
View File

@@ -1,27 +1,27 @@
<html>
<head>
<title>My Electron Frameless Window</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
#particles-js {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -50;
background-image: url(assets/textures/bg.png);
background-size: cover;
}
</style>
<div id="particles-js"></div>
<body>
<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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
#particles-js {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -50;
background-image: url(assets/textures/bg.png);
background-size: cover;
}
</style>
<div id="particles-js"></div>
<body>
<div id="title-bar">
<div id="title">
Blocks
@@ -32,23 +32,32 @@
<button class="nav-btn-xe" id="close-btn"></button>
</div>
</div>
<!--- <div loaded="template/window_settings.html"></div> --->
<div class="flexwrap">
<div id="wrapper">
<div id="test-group"></div>
</div>
<!--- <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>
<!-- <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> -->
<div id="alerted"></div>
<div id="start-the-game" onclick="initiate()">
Start
</div>
<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>
</html>
<div id="alerted"></div>
<div id="start-the-game" onclick="initiate()">
Start
</div>
<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>
</html>

166
scripts/gameboard.js
View File

@@ -1,21 +1,26 @@
// Game settings
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 newPlayground = 3; // replaces the level variable
var level = newPlayground*newPlayground;
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 = [];
var anim = 0;
var anim = 0;
var y = 1;
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;
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();
calc_difficulty();
console.log(level);
@@ -24,7 +29,9 @@ function initiate(){ // Call all the functions
animation();
console.log(difficulty);
}
function nextRound(){
function nextRound() {
round_value();
clear_playground();
clear_values()
calc_difficulty();
@@ -34,64 +41,82 @@ function nextRound(){
animation();
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
}
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 () {
$("#"+play_array[anim]).addClass('animations')
anim++;
$("#" + play_array[anim]).addClass('animations')
anim++;
if (play_array.length > anim) {
animation();
}else{
} else {
basic_timeout();
allow_click = 1;
}
}, 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 () {
$(".card").removeClass('animations');
$(".card").removeClass('animations');
}, 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;
no_fail_round = 0;
difficulty = -1;
level = Math.ceil(newPlayground * newPlayground);
play_array = [];
randoms = 0;
i = 0;
card_ids = 0;
card_ids = 0;
y = 0;
anim = 0;
clicked_id = 0;
allow_click = 0;
avoid_repeat = [];
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();
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;
} else{
} else {
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
}
function make_playground(){
function make_playground() {
//Loop out cards on the playground
var i = 0;
var card_ids = 0;
for (var y = 0; y < newPlayground; y++){
for (var y = 0; y < newPlayground; y++) {
var row = document.createElement('div');
row.setAttribute('id', 'card-row' + y);
row.setAttribute('class', 'card-row');
document.getElementById("test-group").appendChild(row);
row.setAttribute('id', 'card-row' + y);
row.setAttribute('class', 'card-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.
card_ids++;
var div = document.createElement('div');
@@ -99,61 +124,70 @@ function make_playground(){
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);
if(showcontent == true){
if (showcontent == true) {
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 = "";
clear_values();
} //hello
function randomized(){ // Fills the array with random numbers. Max number determines by level
while(play_array.length < difficulty){
randoms = Math.floor(Math.random() * level);
if(randoms != 0){
if(play_array.indexOf(randoms) === -1){
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();
function randomized() { // Fills the array with random numbers. Max number determines by level
while (play_array.length < difficulty) {
randoms = Math.floor(Math.random() * level);
if (randoms != 0) {
if (play_array.indexOf(randoms) === -1) {
play_array.push(randoms);
}
}
}
}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
if(allow_click === 1){
if (!avoid_repeat.includes(clicked_id)){
if (allow_click === 1) {
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.backgroundColor = "red";
document.getElementById(clicked_id).style.backgroundImage = "url(assets/textures/crate_bad.png)";
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!");
}
}
@@ -161,4 +195,4 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
}
document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing
}
}