بازی حافظه با جاوا اسکریپت
بازی حافظه، که به آن "بازی کارت‌های جفت" نیز گفته می‌شود، یک بازی سرگرم‌کننده و آموزشی است که به تقویت حافظه و تمرکز کمک می‌کند. در اینجا، ما به بررسی چگونگی پیاده‌سازی این بازی با استفاده از زبان برنامه‌نویسی جاوا اسکریپت می‌پردازیم.
ساختار بازی
در ابتدا، برای این بازی به تعدادی کارت نیاز داریم که هر کارت شامل یک تصویر است. هدف بازی این است که کارت‌های جفت را پیدا کنیم. هر بازیکن نوبت دارد که دو کارت را برگرداند و اگر تصویر کارت‌ها یکسان باشد، آن‌ها را از بازی حذف می‌کند. اگر یکسان نباشند، کارت‌ها دوباره برگردانده می‌شوند.
پیاده‌سازی اولیه
برای شروع، باید یک 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();
```
نتیجه‌گیری
با این کد، شما یک بازی حافظه ساده ایجاد کرده‌اید. بازی به طور تصادفی کارت‌ها را می‌چینند و به بازیکنان این امکان را می‌دهد که حافظه خود را تقویت کنند.
شما می‌توانید با افزودن ویژگی‌های جدید، مانند شمارش زمان یا امتیاز، این بازی را بهبود ببخشید. این کار می‌تواند جذابیت و چالش بازی را افزایش دهد.
بازی حافظه در کد منبع جاوا اسکریپت
بازی حافظه یا "Memory Game" یکی از بازی‌های سرگرم‌کننده و چالش‌برانگیز است که معمولاً برای افزایش تمرکز و بهبود حافظه طراحی شده است. در این بازی، بازیکنان باید جفت‌های مشابه از کارت‌ها را پیدا کنند. در ادامه، یک توضیح کامل و جامع درباره ساختار و کد منبع این بازی در جاوا اسکریپت ارائه می‌شود.
اجزای اصلی بازی
برای طراحی بازی حافظه، نیاز به چند عنصر داریم:
- HTML: برای طراحی رابط کاربری.
- CSS: برای زیباسازی و استایل‌دهی به بازی.
- JavaScript: برای منطق و تعاملات بازی.
ساختار HTML
ابتدا، یک ساختار پایه برای HTML تعریف می‌کنیم:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>بازی حافظه</h1>
<div class="game-board" id="game-board"></div>
<script src="script.js"></script>
</body>
</html>
```
استایل CSS
سپس، با استفاده از CSS، ظاهری جذاب برای کارت‌ها و صفحه بازی ایجاد می‌کنیم:
```css
body {
font-family: Arial, sans-serif;
text-align: center;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
margin: auto;
}
.card {
width: 100px;
height: 100px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
}
```
منطق بازی با JavaScript
اکنون، زمان آن است که منطق بازی را با استفاده از جاوا اسکریپت پیاده‌سازی کنیم:
```javascript
const cards = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
let gameCards = [...cards, ...cards];
let firstCard, secondCard;
let hasFlippedCard = false;
let lockBoard = false;
function shuffle() {
gameCards.sort(() => Math.random() -
- 5);
function createBoard() {
const gameBoard = document.getElementById('game-board');
shuffle();
gameCards.forEach((card) => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.cardValue = card;
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
}
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.textContent = this.dataset.cardValue;
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
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() {
lockBoard = true;
setTimeout(() => {
firstCard.textContent = '';
secondCard.textContent = '';
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
createBoard();
```
نتیجه‌گیری
با اجرای این کد، شما یک بازی حافظه ساده اما جذاب خواهید داشت. این بازی به شما امکان می‌دهد تا با چالش‌های مختلف حافظه‌تان را آزمایش کنید. در نهایت، می‌توانید با اضافه کردن ویژگی‌هایی مانند شمارش‌گر یا زمان‌سنج، بازی را به سطح بالاتری برسانید.
