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.
This commit is contained in:
BIN
assets/textures/crate.png
Normal file
BIN
assets/textures/crate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
assets/textures/crate_bad.png
Normal file
BIN
assets/textures/crate_bad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
assets/textures/crate_blown.png
Normal file
BIN
assets/textures/crate_blown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
assets/textures/heart.png
Normal file
BIN
assets/textures/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 B |
76
cards.css
Normal file
76
cards.css
Normal 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;
|
||||
|
||||
}
|
||||
@@ -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
15
index.php
@@ -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>
|
||||
</div>
|
||||
<button type="button" style="position:fixed" onclick="initiate()">Start</button>
|
||||
<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="start-the-game" onclick="initiate()">
|
||||
Start
|
||||
</div>
|
||||
<script src="scripts/gameboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,19 +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*4;
|
||||
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();
|
||||
@@ -22,41 +24,58 @@ 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++;
|
||||
if (play_array.length > anim) {
|
||||
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(){
|
||||
play_array = [];
|
||||
randoms = null;
|
||||
function clear_values(){ // Resets the values for next round.
|
||||
newPlayground = newPlayground + 0.3;
|
||||
difficulty = -1;
|
||||
level = newPlayground * newPlayground;
|
||||
play_array = [];
|
||||
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;
|
||||
@@ -66,28 +85,38 @@ 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 div = document.createElement('div');
|
||||
if(showcontent == true){
|
||||
div.textContent = i;
|
||||
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');
|
||||
div.setAttribute('class', 'card');
|
||||
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){
|
||||
document.getElementById(card_ids).classList.add("printid");
|
||||
}
|
||||
}
|
||||
div.setAttribute('class', 'card');
|
||||
div.setAttribute('id', i);
|
||||
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);
|
||||
}
|
||||
}
|
||||
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;
|
||||
if(play_array.indexOf(randoms) === -1){
|
||||
play_array.push(randoms);
|
||||
randoms = Math.floor(Math.random() * level);
|
||||
if(randoms != 0){
|
||||
if(play_array.indexOf(randoms) === -1){
|
||||
play_array.push(randoms);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -97,43 +126,37 @@ function reply_click(clicked_id){ // Grabs the value from the id on the div/card
|
||||
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.backgroundColor = "green";
|
||||
correct_answers++;
|
||||
if(play_array.length == correct_answers)
|
||||
{
|
||||
alert("You survived this round!");
|
||||
// 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{
|
||||
//Avoid repeat fix
|
||||
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)
|
||||
{
|
||||
alert("Game over!");
|
||||
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)
|
||||
{
|
||||
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
|
||||
*/
|
||||
71
style.css
71
style.css
@@ -13,41 +13,12 @@
|
||||
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{
|
||||
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;
|
||||
height: 30vh;
|
||||
width: 30vh;
|
||||
min-width: 60px;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.animations{
|
||||
border: 1px solid pink;
|
||||
background-color: pink;
|
||||
@@ -99,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;
|
||||
@@ -126,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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user