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

New/gameboard #2

Merged
Myxelium merged 2 commits from new/gameboard into master 2020-03-09 21:59:35 +00:00
Conversation 0 Commits 2 Files Changed 9 +223 -95
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>
<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; right: 300px;" onclick="clear_playground()">Clear</button>
<div id="alerted"></div>

15
index.php
View File

@@ -4,7 +4,8 @@
<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="style.css"> -->
<link rel="stylesheet" href="cards.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@@ -21,12 +22,16 @@
</div>
<!--- <div loaded="template/window_settings.html"></div> --->
<div class="flexwrap">
<div id="wrapper"></div>
<div id="wrapper">
<div id="test-group"></div>
</div>
<button type="button" style="position:fixed" onclick="initiate()">Start</button>
<button type="button" style="position:fixed; right: 300px;" onclick="clear_playground()">Clear</button>
</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>
</body>
</html>

129
scripts/gameboard.js
View File

@@ -2,18 +2,21 @@
var viewspeed = 500; // time the player can see the answers MS
var timeout = 1000; // Time after all cards showed
var health = 5;
var level = 9;
var difficulty = 3;
var showcontent = false; // show numbers inside the cards
var newPlayground = 3; // replaces the level variable
var level = newPlayground*newPlayground;
var difficulty = -1;
var showcontent = true; // show numbers inside the cards
// Game settings end
var allow_click = 0;
var play_array = [];
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
prep();
calc_difficulty();
console.log(level);
make_playground();
@@ -21,20 +24,20 @@ function initiate(){ // Call all the functions
animation();
console.log(difficulty);
}
// function animation(){
// for(anim = 0; play_array.length > anim; anim++){
// // document.getElementById(play_array[anim]).style.border = "3px solid green";
// console.log(anim);
// // $("#"+play_array[anim]).addClass('animations');
// // setTimeout(function () {
// // $("#"+play_array[anim]).removeClass('animations');
// // }, 2000);
// }
// }
function animation () {
function nextRound(){
clear_playground();
clear_values()
calc_difficulty();
console.log(level);
make_playground();
randomized();
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 animation () { //Animations, shows what cards you click on
setTimeout(function () {
$("#"+play_array[anim]).addClass('animations')
anim++;
@@ -42,20 +45,37 @@ function animation () {
animation();
}else{
basic_timeout();
allow_click = 1;
}
}, viewspeed)
}
function basic_timeout () {
function basic_timeout () { // small timeout before you can click and the shown cards disapear.
setTimeout(function () {
$(".card").removeClass('animations');
}, timeout)
}
function clear_values(){
function clear_values(){ // Resets the values for next round.
newPlayground = newPlayground + 0.3;
difficulty = -1;
level = newPlayground * newPlayground;
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(){
if (level < 9){ // The level value cannot be lower than 9.
if (level <= 9){ // The level value cannot be lower than 9.
level = 9;
} else{
level = level + 1;
@@ -65,47 +85,69 @@ function calc_difficulty(){
}
function make_playground(){
//Loop out cards on the playground
var i;
for (i = 1; i < level; i++) { //Creates a new div for each loop wth the attributes and content set below.
var i = 0;
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');
if(showcontent == true){
div.textContent = i;
}
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()
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
document.getElementById("wrapper").innerHTML = "";
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){
var randoms = Math.floor(Math.random() * level) + 1;
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
// 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";
avoid_repeat.push(clicked_id);
correct_answers++;
if(play_array.length == correct_answers)
{
alert("You survived this round!");
nextRound();
}
}
}
}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";
avoid_repeat.push(clicked_id);
health--;
console.log("Liv: " + health);
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!");
}
}
}
}
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 {
background-color: #1d1e22;
}
/*
#wrapper {
/* max-width: 1200px; */
max-width: 741px;
margin: 30px auto;
padding: 0 20px;
width: 100%;
display: grid;
grid-auto-rows: 100px;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 1em;
}
} */
.flexwrap{
display: flex;
align-items: 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{
border: 1px solid pink;
background-color: pink;
@@ -76,16 +70,6 @@
body{
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 {
border-radius: 10px;
@@ -103,4 +87,32 @@ body{
.diavo:nth-child(even) {
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;
}