残りターン: 10
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>顔文字の神経衰弱</title>
<style>
@keyframes flip {
0% { transform: rotateY(0); }
100% { transform: rotateY(180deg); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes celebrate {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.5); }
100% { opacity: 1; transform: scale(1); }
}
.animate-flip {
animation: flip 0.6s forwards;
}
.animate-shake {
animation: shake 0.5s;
}
.animate-celebrate {
animation: celebrate 0.6s infinite;
}
</style>
</head>
<body>
<div style="background-color: green; width: 400px; height: 400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start;">
<div style="width: 100%; text-align: left; font-size: 20px; font-weight: bold; color: white; margin: 10px;">
残りターン: <span id="turns">10</span>
</div>
<div style="width: calc(100% - 20px); display: flex; flex-wrap: wrap; margin: 0 auto;">
<script>
const faceEmoji = ['😊', '😁', '😂', '😍', '😎', '😜', '🤩', '🤗'];
const cards = [...faceEmoji, ...faceEmoji].sort(() => Math.random() - 0.5);
let openedCards = [];
let turns = 10;
function handleClick(card, index) {
if (openedCards.length < 2 && !card.classList.contains('matched')) {
card.innerHTML = cards[index];
card.classList.add('animate-flip');
openedCards.push({ card, index });
if (openedCards.length === 2) {
if (cards[openedCards[0].index] === cards[openedCards[1].index]) {
openedCards[0].card.classList.add('matched', 'animate-celebrate');
openedCards[1].card.classList.add('matched', 'animate-celebrate');
openedCards = [];
} else {
turns--;
document.getElementById('turns').innerText = turns;
setTimeout(() => {
openedCards[0].card.innerHTML = '';
openedCards[1].card.innerHTML = '';
openedCards[0].card.classList.remove('animate-flip');
openedCards[1].card.classList.remove('animate-flip');
openedCards = [];
if (turns <= 0) {
alert('ゲームオーバー 🥺 リトライしてね！');
showToast("再読み込みしてください");
}
}, 1000);
}
}
if (document.querySelectorAll('.matched').length === 16) {
alert('クリアおめでとう！ 🥳');
showToast("再読み込みしてください");
}
}
}
document.addEventListener("DOMContentLoaded", () => {
const container = document.querySelector('div[style*="display: flex; flex-wrap: wrap; margin: 0 auto;"]');
cards.forEach((_, index) => {
const card = document.createElement('div');
card.style = 'width: 22%; height: 22%; margin: 2%; background-color: white; border: 2px solid red; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer;';
card.addEventListener('click', () => handleClick(card, index));
container.appendChild(card);
});
});
</script>
</div>
</div>
</body>
</html>
```