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

changes made. levels are now added, and the gameboard match the screen size. Added a function that resets the variables after each turn. and minor bug fixes so you cant click multiple times on the same block. And avoid starting the round before the animation is done.

Browse Source
This commit is contained in:
SocksOnHead
2020-03-09 22:57:18 +01:00
parent e80ead9234
commit e41a09195d
9 changed files with 212 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/textures/crate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
assets/textures/crate_bad.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
assets/textures/crate_blown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
assets/textures/heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 750 B

76
cards.css Normal file
View File

@@ -0,0 +1,76 @@
@import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap');
*{
transition: .3s;
}
.card {
cursor: pointer;
padding-bottom: 85%;
width: 100%;
background: rgba(50, 114, 210, 0.5);
border-radius: 10px;
margin: 3px;
}
.card-row {
width: 100%;
margin: 3px;
}
#test-group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
#wrapper {
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
max-width: 800px;
}
.animations {
background-color: rgb(80, 0, 146);
}
.card:hover {
box-shadow: 0 0 10px purple;
}
.flexwrap::after {
position: absolute;
top: 0px;
}
body {
background-color: #1d1e22;
}
#start-the-game{
position: absolute;
background-color: #44205c65;
height: 100%;
width: 100%;
z-index: 99999;
top: 0px;
right: 0px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
/* font-weight: 900; */
font-size: 50vh;
font-family: 'Lalezar', cursive;
-webkit-text-stroke: 2px rgb(10, 10, 10);
text-shadow: -5px 14px 20px rgb(0, 0, 0);
cursor: pointer;
}
.printid:after{
content:attr(id);
position: absolute;
}

6
gameboard.html
View File

@@ -34,7 +34,11 @@
}*/ }*/
</style> </style>
<script src="../scripts/jquery-3.4.1.min.js"></script> <script src="../scripts/jquery-3.4.1.min.js"></script>
<div id="wrapper"></div> <div id="wrapper">
<div id="test-group">
</div>
</div>
<button type="button" style="position:fixed" onclick="initiate()">initiate</button> <button type="button" style="position:fixed" onclick="initiate()">initiate</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>

15
index.php
View File

@@ -4,7 +4,8 @@
<title>My Electron Frameless Window</title> <title>My Electron Frameless Window</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
@@ -21,12 +22,16 @@
</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> <div id="wrapper">
<div id="test-group"></div>
</div> </div>
<button type="button" style="position:fixed" onclick="initiate()">Start</button> </div>
<button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button> <!-- <button type="button">Start</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()">
Start
</div>
<script src="scripts/gameboard.js"></script> <script src="scripts/gameboard.js"></script>
</body> </body>
</html> </html>

117
scripts/gameboard.js
View File

@@ -2,19 +2,21 @@
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 level = 9*4; var newPlayground = 3; // replaces the level variable
var level = newPlayground*newPlayground;
var difficulty = -1; var difficulty = -1;
var showcontent = true; // show numbers inside the cards var showcontent = true; // show numbers inside the cards
// Game settings end // Game settings end
var allow_click = 0;
var play_array = []; var play_array = [];
var anim = 0; var anim = 0;
var y = 1; var y = 1;
var correct_answers = 0; 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 room_level;
function initiate(){ // Call all the functions function initiate(){ // Call all the functions
prep();
calc_difficulty(); calc_difficulty();
console.log(level); console.log(level);
make_playground(); make_playground();
@@ -22,20 +24,20 @@ function initiate(){ // Call all the functions
animation(); animation();
console.log(difficulty); console.log(difficulty);
} }
// function animation(){ function nextRound(){
// for(anim = 0; play_array.length > anim; anim++){ clear_playground();
// // document.getElementById(play_array[anim]).style.border = "3px solid green"; clear_values()
// console.log(anim); calc_difficulty();
// // $("#"+play_array[anim]).addClass('animations'); console.log(level);
make_playground();
// // setTimeout(function () { randomized();
// // $("#"+play_array[anim]).removeClass('animations'); animation();
// // }, 2000); console.log(difficulty);
}
function prep(){ // handles everythiing before the game starts
// } document.getElementById("start-the-game").style.visibility = "hidden"; //hides the start button
// } }
function animation () { 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++;
@@ -43,20 +45,37 @@ function animation () {
animation(); animation();
}else{ }else{
basic_timeout(); basic_timeout();
allow_click = 1;
} }
}, viewspeed) }, viewspeed)
} }
function basic_timeout () { 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(){ function clear_values(){ // Resets the values for next round.
newPlayground = newPlayground + 0.3;
difficulty = -1;
level = newPlayground * newPlayground;
play_array = []; play_array = [];
randoms = null; randoms = 0;
i = 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
calc_difficulty();
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;
} else{ } else{
level = level + 1; level = level + 1;
@@ -66,48 +85,65 @@ function calc_difficulty(){
} }
function make_playground(){ function make_playground(){
//Loop out cards on the playground //Loop out cards on the playground
var i; var i = 0;
for (i = 1; i < level; i++) { //Creates a new div for each loop wth the attributes and content set below. var card_ids = 0;
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);
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'); var div = document.createElement('div');
if(showcontent == true){
div.textContent = i;
}
div.setAttribute('class', 'card'); div.setAttribute('class', 'card');
div.setAttribute('id', i); 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("wrapper").appendChild(div); document.getElementById('card-row' + y).appendChild(div);
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("wrapper").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){
var randoms = Math.floor(Math.random() * level) + 1; randoms = Math.floor(Math.random() * level);
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. 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); clicked_id = Number(clicked_id);
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
if(play_array.includes(clicked_id)){ // Takes the id from the div and searches in the array for it. Returns either true or false. 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 // 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.backgroundColor = "green";
avoid_repeat.push(clicked_id);
correct_answers++; correct_answers++;
if(play_array.length == correct_answers) if(play_array.length == correct_answers)
{ {
alert("You survived this round!"); alert("You survived this round!");
nextRound();
}
}
} }
}else{ }else{
//Avoid repeat fix //Avoid repeat fix
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";
avoid_repeat.push(clicked_id); avoid_repeat.push(clicked_id);
@@ -119,21 +155,8 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
alert("Game over!"); alert("Game over!");
} }
} }
}
} }
document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing document.getElementById("alerted").innerHTML = clicked_id; // Just prints it out on the screen for testing
} }
/*
pseudocode:'
/
if (exists) clicked_id= randomized[x] = true
if (value already added skip(Done with array, if exists/contains)) = false
variable add 1
if variable(int) == all answers(int) = true
next round
add score
else
health - 1
if health < 5
gameover
*/

69
style.css
View File

@@ -13,41 +13,12 @@
grid-gap: 1em; grid-gap: 1em;
} */ } */
#wrapper {
max-width: 1200px;
max-width: 54%;
max-height: 50%;
margin: 30px auto;
padding: 0 20px;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
/* grid-auto-rows: 1fr; */
/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
/* grid-gap: 1em; */
}
.flexwrap{ .flexwrap{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.card {
border-radius: 10px;
padding: 20px;
color: rgb(255, 255, 255);
background-color: rgb(0, 94, 165);
transition: 0.5s;
height: 30vh;
width: 30vh;
min-width: 60px;
max-width: 100px;
max-height: 100px;
margin: 5px;
}
.animations{ .animations{
border: 1px solid pink; border: 1px solid pink;
background-color: pink; background-color: pink;
@@ -99,16 +70,6 @@
body{ body{
background-color: #1d1e22; background-color: #1d1e22;
} }
.wrapper {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
width: 100%;
display: grid;
grid-auto-rows: 100px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 1em;
}
.diavo { .diavo {
border-radius: 10px; border-radius: 10px;
@@ -126,4 +87,32 @@ body{
.diavo:nth-child(even) { .diavo:nth-child(even) {
background-color: #afbe29; background-color: #afbe29;
} }
.card {
cursor: pointer;
padding-bottom: 85%;
width: 100%;
background: rgba(50, 114, 210, 0.5);
border-radius: 10px;
margin: 3px;
}
#card-row {
width: 100%;
margin: 3px;
}
#test-group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
#wrapper {
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
max-width: 800px;
}