s444391/flip-game
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add more cards

Browse Source
This commit is contained in:
Aleksandra Jonas 2023-02-20 02:33:00 +01:00
parent 388947c485
commit e68de8d07d
3 changed files with 116 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
index.html
View File

@ -9,7 +9,11 @@
<title>Memory FlipCard Game</title> <title>Memory FlipCard Game</title>
</head> </head>
<body> <body>
<!-- <div class="wrapper">
<div class="level">
Medium lvl
</div>
</div> -->
<div class="wrapper"> <div class="wrapper">
<ul class="cards"> <ul class="cards">
<li class="card"> <li class="card">
@ -17,7 +21,7 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-instagram' ></i> <i class='bx bxl-linkedin'></i>
</div> </div>
</li> </li>
<li class="card"> <li class="card">
@ -25,7 +29,7 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-instagram' ></i> <i class='bx bxl-linkedin'></i>
</div> </div>
</li> </li>
<li class="card"> <li class="card">
@ -33,7 +37,7 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-twitter' ></i> <i class='bx bxs-file-css'></i>
</div> </div>
</li> </li>
<li class="card"> <li class="card">
@ -41,7 +45,7 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-twitter' ></i> <i class='bx bxs-file-css'></i>
</div> </div>
</li> </li>
<li class="card"> <li class="card">
@ -49,7 +53,7 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-youtube' ></i> <i class='bx bxl-php' ></i>
</div> </div>
</li> </li>
<li class="card"> <li class="card">
@ -57,7 +61,7 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-youtube' ></i> <i class='bx bxl-php' ></i>
</div> </div>
</li> </li>
<li class="card"> <li class="card">
@ -65,7 +69,7 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-tiktok' ></i> <i class='bx bxl-unity' ></i>
</div> </div>
</li> </li>
<li class="card"> <li class="card">
@ -73,7 +77,103 @@
<i class='bx bx-question-mark'></i> <i class='bx bx-question-mark'></i>
</div> </div>
<div class="view back-view"> <div class="view back-view">
<i class='bx bxl-tiktok' ></i> <i class='bx bxl-unity' ></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-visual-studio'></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-visual-studio'></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-steam' ></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-steam' ></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-aws' ></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-aws' ></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bx-qr' ></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bx-qr' ></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-docker'></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-docker'></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-heroku'></i>
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-heroku'></i>
</div> </div>
</li> </li>

6
script.js
View File

@ -3,7 +3,7 @@ timeTag = document.querySelector(".time b"),
flipsTag = document.querySelector(".flips b"), flipsTag = document.querySelector(".flips b"),
refreshBtn = document.querySelector(".details button"); refreshBtn = document.querySelector(".details button");
let maxTime = 30; let maxTime = 90;
let timeLeft = maxTime; let timeLeft = maxTime;
let flips = 0; let flips = 0;
let matchedCards = 0; let matchedCards = 0;
@ -42,7 +42,7 @@ function flipCard({target: clickedCard}){
function matchCards(icon1, icon2){ function matchCards(icon1, icon2){
if(icon1 === icon2){ if(icon1 === icon2){
matchedCards++; matchedCards++;
if(matchedCards == 6 && timeLeft > 0){ if(matchedCards == 10 && timeLeft > 0){
return clearInterval(timer); return clearInterval(timer);
} }
cardOne.removeEventListener("click", flipCard); cardOne.removeEventListener("click", flipCard);
@ -74,7 +74,7 @@ function shuffleCards(){
flipsTag.innerText = flips; flipsTag.innerText = flips;
disableDeck = isPlaying = false; disableDeck = isPlaying = false;
let arr = ["bxl-tiktok", "bxl-instagram-alt", "bxl-twitter", "bxl-youtube", "bxl-tiktok", "bxl-instagram-alt", "bxl-twitter", "bxl-youtube"]; let arr = ["bxl-linkedin", "bxs-file-css", "bxl-php", "bxl-unity", "bxl-visual-studio", "bxl-steam", "bxl-aws", "bx-qr", "bxl-docker", "bxl-heroku", "bxl-linkedin", "bxs-file-css", "bxl-php", "bxl-unity", "bxl-visual-studio", "bxl-steam", "bxl-aws", "bx-qr", "bxl-docker", "bxl-heroku"];
arr.sort(() => Math.random() > 0.5 ? 1 : -1); arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, index) =>{ cards.forEach((card, index) =>{

8
style.css
View File

@ -24,7 +24,7 @@ body{
box-shadow: 0 10px 30px rgba(0,0,0,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
} }
.cards, .card, .view, .details, p{ .cards, .card, .view, .details, .level, p{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -42,12 +42,12 @@ body{
position: relative; position: relative;
perspective: 1000px; perspective: 1000px;
transform-style: preserve-3d; transform-style: preserve-3d;
height: calc(100% / 4 - 10px); height: calc(100% / 6 - 10px);
width: calc(100% / 4 - 10px); width: calc(100% / 5 - 10px);
} }
.card.shake{ .card.shake{
animation: shake 0.35s ease-in-out; animation: shake 0.20s ease-in-out;
} }
@keyframes shake{ @keyframes shake{