超好看的网页小游戏——记忆配对游戏
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.game-container {
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #4a5568;
margin-bottom: 1.5rem;
}
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.card {
width: 80px;
height: 80px;
background: #4a5568;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
border-radius: 0.5rem;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.card.flipped {
transform: rotateY(180deg);
background: #48bb78;
}
.card::after {
content: "?";
color: white;
font-size: 2rem;
position: absolute;
backface-visibility: hidden;
}
.card .content {
transform: rotateY(180deg);
backface-visibility: hidden;
}
button {
background: #4299e1;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #3182ce;
}
.stats {
margin-top: 1rem;
font-size: 1.1rem;
color: #4a5568;
}
记忆配对游戏
步数: 0
const emojis = ['🐶', '🐱', '🐰', '🦊', '🐶', '🐱', '🐰', '🦊'];
let flippedCards = [];
let matchedPairs = 0;
let moves = 0;
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function createBoard() {
const gameBoard = document.getElementById('gameBoard');
gameBoard.innerHTML = '';
shuffleArray(emojis);
emojis.forEach((emoji, index) => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `${emoji}`;
card.onclick = () => flipCard(card);
gameBoard.appendChild(card);
});
}
function flipCard(card) {
if (flippedCards.length < 2 && !flippedCards.includes(card) && !card.classList.contains('flipped')) {
card.classList.add('flipped');
flippedCards.push(card);
if (flippedCards.length === 2) {
moves++;
document.getElementById('moves').textContent = moves;
setTimeout(checkMatch, 500);
}
}
}
function checkMatch() {
const [card1, card2] = flippedCards;
const match = card1.innerHTML === card2.innerHTML;
if (match) {
matchedPairs++;
if (matchedPairs === emojis.length / 2) {
setTimeout(() => {
alert(`恭喜你赢了! 总共用了 ${moves} 步。`);
}, 300);
}
} else {
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
}, 1000);
}
flippedCards = [];
}
function restartGame() {
matchedPairs = 0;
moves = 0;
document.getElementById('moves').textContent = moves;
createBoard();
}
createBoard();
扫描二维码分享
评论区
请登录后发表评论。