بازی حافظه با جاوا اسکریپت
بازی حافظه، که به آن "بازی کارت‌های جفت" نیز گفته می‌شود، یک بازی سرگرم‌کننده و آموزشی است که به تقویت حافظه و تمرکز کمک می‌کند. در اینجا، ما به بررسی چگونگی پیاده‌سازی این بازی با استفاده از زبان برنامه‌نویسی جاوا اسکریپت می‌پردازیم.
ساختار بازی
در ابتدا، برای این بازی به تعدادی کارت نیاز داریم که هر کارت شامل یک تصویر است. هدف بازی این است که کارت‌های جفت را پیدا کنیم. هر بازیکن نوبت دارد که دو کارت را برگرداند و اگر تصویر کارت‌ها یکسان باشد، آن‌ها را از بازی حذف می‌کند. اگر یکسان نباشند، کارت‌ها دوباره برگردانده می‌شوند.
پیاده‌سازی اولیه
برای شروع، باید یک HTML ساده برای نمایش کارت‌ها ایجاد کنیم. مثال زیر را بررسی کنید:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>بازی حافظه</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>بازی حافظه</h1>
<div id="game-board"></div>
<script src="script.js"></script>
</body>
</html>
```
طراحی CSS
با استفاده از CSS، می‌توانیم استایل بازی را بهبود ببخشیم. به عنوان مثال:
```css
#game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
}
.card {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
}
```
کد جاوا اسکریپت
اکنون باید منطق بازی را پیاده‌سازی کنیم. در کد زیر، کارت‌ها را تولید و رفتار بازی را کنترل می‌کنیم:
```javascript
const cards = [
'🍏', '🍏', '🍌', '🍌',
'🍒', '🍒', '🍇', '🍇',
// Add more pairs as needed
];
let board = document.getElementById('game-board');
let cardElements = [];
let firstCard, secondCard;
let lockBoard = false;
function shuffle(array) {
array.sort(() => Math.random() -
- 5);
function createCard(card) {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.cardValue = card;
cardElement.addEventListener('click', flipCard);
board.appendChild(cardElement);
cardElements.push(cardElement);
}
function flipCard() {
if (lockBoard) return;
this.textContent = this.dataset.cardValue;
if (!firstCard) {
firstCard = this;
} else {
secondCard = this;
lockBoard = true;
checkForMatch();
}
}
function checkForMatch() {
const isMatch = firstCard.dataset.cardValue === secondCard.dataset.cardValue;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
setTimeout(() => {
firstCard.textContent = '';
secondCard.textContent = '';
resetBoard();
}, 1000);
}
function resetBoard() {
[firstCard, secondCard, lockBoard] = [null, null, false];
}
function startGame() {
shuffle(cards);
cards.forEach(createCard);
}
startGame();
```
نتیجه‌گیری
با این کد، شما یک بازی حافظه ساده ایجاد کرده‌اید. بازی به طور تصادفی کارت‌ها را می‌چینند و به بازیکنان این امکان را می‌دهد که حافظه خود را تقویت کنند.
شما می‌توانید با افزودن ویژگی‌های جدید، مانند شمارش زمان یا امتیاز، این بازی را بهبود ببخشید. این کار می‌تواند جذابیت و چالش بازی را افزایش دهد.
