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>
</head>
<body>
<!-- <div class="wrapper">
<div class="level">
Medium lvl
</div>
</div> -->
<div class="wrapper">
<ul class="cards">
<li class="card">
@ -17,7 +21,7 @@
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-instagram' ></i>
<i class='bx bxl-linkedin'></i>
</div>
</li>
<li class="card">
@ -25,7 +29,7 @@
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-instagram' ></i>
<i class='bx bxl-linkedin'></i>
</div>
</li>
<li class="card">
@ -33,7 +37,7 @@
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-twitter' ></i>
<i class='bx bxs-file-css'></i>
</div>
</li>
<li class="card">
@ -41,7 +45,7 @@
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-twitter' ></i>
<i class='bx bxs-file-css'></i>
</div>
</li>
<li class="card">
@ -49,7 +53,7 @@
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-youtube' ></i>
<i class='bx bxl-php' ></i>
</div>
</li>
<li class="card">
@ -57,7 +61,7 @@
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-youtube' ></i>
<i class='bx bxl-php' ></i>
</div>
</li>
<li class="card">
@ -65,7 +69,7 @@
<i class='bx bx-question-mark'></i>
</div>
<div class="view back-view">
<i class='bx bxl-tiktok' ></i>
<i class='bx bxl-unity' ></i>
</div>
</li>
<li class="card">
@ -73,7 +77,103 @@
<i class='bx bx-question-mark'></i>
</div>
<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>
</li>

6
script.js
View File

@ -3,7 +3,7 @@ timeTag = document.querySelector(".time b"),
flipsTag = document.querySelector(".flips b"),
refreshBtn = document.querySelector(".details button");
let maxTime = 30;
let maxTime = 90;
let timeLeft = maxTime;
let flips = 0;
let matchedCards = 0;
@ -42,7 +42,7 @@ function flipCard({target: clickedCard}){
function matchCards(icon1, icon2){
if(icon1 === icon2){
matchedCards++;
if(matchedCards == 6 && timeLeft > 0){
if(matchedCards == 10 && timeLeft > 0){
return clearInterval(timer);
}
cardOne.removeEventListener("click", flipCard);
@ -74,7 +74,7 @@ function shuffleCards(){
flipsTag.innerText = flips;
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);
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);
}
.cards, .card, .view, .details, p{
.cards, .card, .view, .details, .level, p{
display: flex;
align-items: center;
justify-content: center;
@ -42,12 +42,12 @@ body{
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
height: calc(100% / 4 - 10px);
width: calc(100% / 4 - 10px);
height: calc(100% / 6 - 10px);
width: calc(100% / 5 - 10px);
}
.card.shake{
animation: shake 0.35s ease-in-out;
animation: shake 0.20s ease-in-out;
}
@keyframes shake{