Skip to content

Commit

Permalink
complete game
Browse files Browse the repository at this point in the history
  • Loading branch information
@bermarte
bermarte committed Sep 28, 2019
1 parent dff38e0 commit a23294f
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 37 deletions.
59 changes: 58 additions & 1 deletion tmp/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,63 @@ span,
align-items: center;
justify-content: center;
font-size: 30px;
min-height: 49px;
height: 0px;
}
.animate-message{
animation: end 0.5s forwards;
-webkit-animation: end 0.5s forwards;
}
#message p{
align-self: flex-start;
opacity: 0;
}
.animate-message-p{
animation: reveal 1s;
-webkit-animation: reveal 2s 1;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes end {
from {
min-height: 0;

}
to {
min-height: 49px;

}
}

@keyframes end {
from {
min-height: 0;
height: 0;
}
to {
min-height: 49px;
}
}

@-webkit-keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes reveal {
from {
opacity: 0;

}
to {
opacity: 1;

}
}
.disable{
pointer-events:none;
Expand Down Expand Up @@ -121,6 +174,10 @@ so I made a copy of the images I have used
background: #fff url(../imgs/gentleman_icon-icons.com_55044.png) no-repeat center /contain;
}

/* covers */
.cover{
background: #fff url(../imgs/question.png) no-repeat center /contain;
}
/* Smartphones ----------- */

@media only screen and (max-width : 226px){
Expand Down
Binary file added tmp/assets/imgs/question.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 43 additions & 14 deletions tmp/assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
//let url = "https://cdn.jsdelivr.net/gh/bermarte/js-games/tmp/assets/js/url.json";
const url = "http:https://localhost:63342/Js-games/git/js-games/tmp/assets/js/url.json";
const n_items = 10;
let lives = 8;
let lives = 14;
let points = 0;
const gridItem = document.querySelectorAll(".grid-item");

fetch(url)
.then(function (response) {
return response.json();
Expand All @@ -22,13 +23,15 @@ fetch(url)
new_seq = randomSequence(seq, n_items*2);
console.log("sequence",new_seq);

//add an image and an event to each card
gridItem.forEach( (element, index) => {
json_css = data.imgs[new_seq[index]].css;
element.classList.add(json_css);
element.setAttribute('data-img', json_css);
element.addEventListener("click", function myclick() {
console.log("this", this);
this.removeEventListener("click", myclick);
this.classList.remove("cover");

check(this.getAttribute('data-img'), this, this.id, myclick );

Expand All @@ -54,61 +57,87 @@ function check(attr, div, id, fun){
play.push(attr);
play_id.push(id);

//let sel = document.querySelectorAll("."+attr);
let coupleFound;

if (play.length > 1)
//found couple
if (play[play.length - 2] === attr){

console.log("previous:", play[play.length - 2]);
console.log("same");
console.log("play", play[play.length - 2])

points++;
document.getElementById("points").textContent = points;
coupleFound = true;

play[play.length - 2]
document.getElementById("points").textContent = points;
console.log("attr",attr);

//console.log("sel", sel);

//you win
if (points === n_items){
console.log("you win")
console.log("you win");
document.querySelector("#message").classList.add("animate-message");
document.querySelector("#message p").textContent = "you win";
document.querySelector("#message p").classList.add("animate-message-p");
stop();
}
console.log("points:", points);

}
//wrong couple
else{

console.log("previous:", play[play.length - 2]);
console.log("different");

//add event listener back if the two are not equal
//add event listener back if the two cards selected are not equal
document.getElementById(play_id[0]).addEventListener("click",fun);
document.getElementById(play_id[1]).addEventListener("click", fun);

lives--;
coupleFound = false;
document.getElementById("lives").textContent = lives;

//you loose
if (lives === 0){
console.log("game over");
document.querySelector("#message").classList.add("animate-message");
document.querySelector("#message p").textContent = "game over";
document.querySelector("#message p").classList.add("animate-message-p");
stop();
showAll();
}
console.log("lives:",lives);
}
console.log(play);
//empty arrays once each couple is chosen
if (play.length === 2) clear(play);
if (play_id.length === 2) clear(play_id);
//empty arrays once each couple is made, be ready for the next step
if (play.length === 2) {
clear(play, play_id, coupleFound);
}

}
function clear(arr){
async function clear(arr, arr2, bool){
//empty arrays of cards and ids
el_1 = arr2[0];
el_2 = arr2[1];
arr.length = 0;
arr2.length = 0;
//add covers if the game is not finished and if the player didn't find a couple
if (lives > 0 && bool===false){
await delay(800);
document.getElementById(el_1).classList.add("cover");
document.getElementById(el_2).classList.add("cover");
}
}
//disable all the events once the game is finished
function stop(){
gridItem.forEach(element =>
element.classList.add("disable")
);
}

const delay = ms => new Promise(res => setTimeout(res, ms));
//show all combinations once the game ends
function showAll(){
gridItem.forEach(element =>
element.classList.remove("cover")
);
}
43 changes: 21 additions & 22 deletions tmp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
<body>
<!--
https://cdn.icon-icons.com/ https://icon-icons.com/pack/Free-people-icons/582
colors: #f18909, #F6A406, #F28A08, lost: #1640A5, #4A64A0, won: #56AB5F, #438949
https://paletton.com/#uid=70X0J0kveuSj9tZohtH-xrgH1oK
-->

Expand All @@ -22,33 +21,33 @@
<div class="player-interface">
<!-- player interface -->
<div class="span"><span>points: </span><span id="points">0</span></div>
<div class="span"><span>lives: </span><span id="lives">8</span></div>
<div class="span"><span>lives: </span><span id="lives">14</span></div>

</div>
<div class="grid-container">
<div class="grid-item" id="fig_1"></div>
<div class="grid-item" id="fig_2"></div>
<div class="grid-item" id="fig_3"></div>
<div class="grid-item" id="fig_4"></div>
<div class="grid-item" id="fig_5"></div>
<div class="grid-item cover" id="fig_1"></div>
<div class="grid-item cover" id="fig_2"></div>
<div class="grid-item cover" id="fig_3"></div>
<div class="grid-item cover" id="fig_4"></div>
<div class="grid-item cover" id="fig_5"></div>

<div class="grid-item" id="fig_6"></div>
<div class="grid-item" id="fig_7"></div>
<div class="grid-item" id="fig_8"></div>
<div class="grid-item" id="fig_9"></div>
<div class="grid-item" id="fig_10"></div>
<div class="grid-item cover" id="fig_6"></div>
<div class="grid-item cover" id="fig_7"></div>
<div class="grid-item cover" id="fig_8"></div>
<div class="grid-item cover" id="fig_9"></div>
<div class="grid-item cover" id="fig_10"></div>

<div class="grid-item" id="fig_11"></div>
<div class="grid-item" id="fig_12"></div>
<div class="grid-item" id="fig_13"></div>
<div class="grid-item" id="fig_14"></div>
<div class="grid-item" id="fig_15"></div>
<div class="grid-item cover" id="fig_11"></div>
<div class="grid-item cover" id="fig_12"></div>
<div class="grid-item cover" id="fig_13"></div>
<div class="grid-item cover" id="fig_14"></div>
<div class="grid-item cover" id="fig_15"></div>

<div class="grid-item" id="fig_16"></div>
<div class="grid-item" id="fig_17"></div>
<div class="grid-item" id="fig_18"></div>
<div class="grid-item" id="fig_19"></div>
<div class="grid-item" id="fig_20"></div>
<div class="grid-item cover" id="fig_16"></div>
<div class="grid-item cover" id="fig_17"></div>
<div class="grid-item cover" id="fig_18"></div>
<div class="grid-item cover" id="fig_19"></div>
<div class="grid-item cover" id="fig_20"></div>
</div>
</div>

Expand Down

0 comments on commit a23294f

Please sign in to comment.