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

Merge pull request #2 from Azaaxin/new/gameboard

Browse Source 
New/gameboard
This commit was merged in pull request #2.
This commit is contained in:
SocksOnHead
2020-03-09 22:59:34 +01:00
committed by GitHub
parent a190ac0ea5 e41a09195d
commit 75190be991
9 changed files with 223 additions and 95 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>

129
scripts/gameboard.js
View File

@@ -2,18 +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; var newPlayground = 3; // replaces the level variable
var difficulty = 3; var level = newPlayground*newPlayground;
var showcontent = false; // show numbers inside the cards var difficulty = -1;
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 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();
@@ -21,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++;
@@ -42,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;
@@ -65,47 +85,69 @@ 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{
document.getElementById(clicked_id).style.border = "3px solid red"; // Makes the div/cards border red //Avoid repeat fix
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.backgroundColor = "red";
avoid_repeat.push(clicked_id);
health--; health--;
console.log("Liv: " + health); console.log("Liv: " + health);
if(health == 0) if(health == 0)
@@ -113,19 +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
*/

54
style.css
View File

@@ -1,30 +1,24 @@
body { body {
background-color: #1d1e22; background-color: #1d1e22;
} }
/*
#wrapper { #wrapper {
/* max-width: 1200px; */
max-width: 741px; max-width: 741px;
margin: 30px auto; margin: 30px auto;
padding: 0 20px; padding: 0 20px;
width: 100%; width: 100%;
display: grid; display: grid;
grid-auto-rows: 100px; grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 1em; 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;
}
.animations{ .animations{
border: 1px solid pink; border: 1px solid pink;
background-color: pink; background-color: pink;
@@ -76,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;
@@ -103,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;
}