Click here for free DL of the app version that can save data.

No:50509

180

←

Prev Next

→

Leaderboard
Developer User21309｜Date and time 24/3/8 16:42:20
Build time 9.311 sec｜Game capacity 2.358KB｜

Script

Игра "Pictogram Puzzle"

🌞

🌊

🌳

🌸

🍎

🍕

🚗

🎈

📚

🔑

🔨

📱

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Игра "Pictogram Puzzle"</title>
<style>
   #game-board {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       grid-gap: 10px;
       margin: 20px;
   }

.pictogram {
       width: 100px;
       height: 100px;
       background-color: #f0f0f0;
       text-align: center;
       line-height: 100px;
       cursor: pointer;
   }
</style>
</head>
<body>
<h1>Игра "Pictogram Puzzle"</h1>
<div id="game-board">
   <div class="pictogram">🌞</div>
   <div class="pictogram">🌊</div>
   <div class="pictogram">🌳</div>
   <div class="pictogram">🌸</div>
   <div class="pictogram">🍎</div>
   <div class="pictogram">🍕</div>
   <div class="pictogram">🚗</div>
   <div class="pictogram">🎈</div>
   <div class="pictogram">📚</div>
   <div class="pictogram">🔑</div>
   <div class="pictogram">🔨</div>
   <div class="pictogram">📱</div>
</div>

function flipCard() {
       if (lockBoard) return;
       if (this === firstCard) return;

this.classList.add('flip');

if (!hasFlippedCard) {
           hasFlippedCard = true;
           firstCard = this;
           return;
       }

secondCard = this;
       checkForMatch();
   }

function checkForMatch() {
       let isMatch = firstCard.innerHTML === secondCard.innerHTML;

isMatch ? disableCards() : unflipCards();
   }

function disableCards() {
       firstCard.removeEventListener('click', flipCard);
       secondCard.removeEventListener('click', flipCard);

resetBoard();
   }

function unflipCards() {
       lockBoard = true;

setTimeout(() => {
           firstCard.classList.remove('flip');
           secondCard.classList.remove('flip');

resetBoard();
       }, 1000);
   }

function resetBoard() {
       [hasFlippedCard, lockBoard] = [false, false];
       [firstCard, secondCard] = [null, null];
   }

(function shuffle() {
       pictograms.forEach(card => {
           let randomPos = Math.floor(Math.random() * 12);
           card.style.order = randomPos;
       });
   })();

pictograms.forEach(card => card.addEventListener('click', flipCard));
</script>
</body>
</html>