کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی کارت‌های حافظه (Memory Cards) با JavaScript**
این پروژه یک بازی ساده برای تقویت حافظه است که در آن کاربران باید کارت‌های مشابه را پیدا کنند. این بازی با استفاده از HTML، CSS و JavaScript ساخته شده است.
### 1. **HTML**
ابتدا ساختار HTML بازی را ایجاد می‌کنیم.
```html
بازی کارت‌های حافظه
بازی کارت‌های حافظه
```
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
margin: 20px auto;
}
.card {
width: 100px;
height: 100px;
background-color: #007bff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
cursor: pointer;
position: relative;
}
.card.flipped {
background-color: #fff;
color: #333;
}
.card.matched {
background-color: #28a745;
cursor: default;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر DOM
const gameBoard = document.getElementById('game-board');
const restartBtn = document.getElementById('restartBtn');
const resultDiv = document.getElementById('result');
let cards = [];
let flippedCards = [];
let matchedCards = [];
let moves = 0;
// ایجاد کارت‌ها
function createCards() {
const cardValues = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
cards = cardValues.sort(() => Math.random() - 0.5).map(value => {
return {
value: value,
flipped: false,
matched: false
};
});
}
// ایجاد کارت‌های بازی
function setupGame() {
createCards();
gameBoard.innerHTML = '';
cards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.index = index;
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
resultDiv.textContent = '';
}
// Flip card function
function flipCard() {
const index = this.dataset.index;
const card = cards[index];
if (card.flipped || card.matched) return; // اگر کارت برگردانده شده یا مطابقت دارد، باز نکنید
this.classList.add('flipped');
this.textContent = card.value;
card.flipped = true;
flippedCards.push(card);
if (flippedCards.length === 2) {
checkMatch();
}
}
// بررسی تطابق کارت‌ها
function checkMatch() {
moves++;
const [firstCard, secondCard] = flippedCards;
if (firstCard.value === secondCard.value) {
firstCard.matched = true;
secondCard.matched = true;
matchedCards.push(firstCard, secondCard);
resetFlippedCards();
// بررسی اتمام بازی
if (matchedCards.length === cards.length) {
resultDiv.textContent = `شما بازی را در ${moves} حرکت برنده شدید!`;
}
} else {
setTimeout(() => {
const firstCardElement = gameBoard.children[cards.indexOf(firstCard)];
const secondCardElement = gameBoard.children[cards.indexOf(secondCard)];
firstCardElement.classList.remove('flipped');
firstCardElement.textContent = '';
secondCardElement.classList.remove('flipped');
secondCardElement.textContent = '';
resetFlippedCards();
}, 1000);
}
}
// بازنشانی کارت‌های برگردانده شده
function resetFlippedCards() {
flippedCards = [];
}
// دکمه دوباره بازی
restartBtn.addEventListener('click', setupGame);
// شروع بازی
setupGame();
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، بخش نمایش کارت‌ها و دکمه‌ای برای شروع دوباره بازی است.
2. **CSS**: طراحی ساده برای کارت‌ها و بازی.
3. **JavaScript**:
- **کارت‌ها**: یک آرایه از کارت‌ها با مقادیر تصادفی ایجاد می‌شود.
- **چرخش کارت**: زمانی که کاربر روی یک کارت کلیک می‌کند، کارت برگردانده می‌شود و در صورت وجود دو کارت برگردانده شده، تطابق آنها بررسی می‌شود.
- **برنده شدن**: اگر تمام کارت‌ها مطابقت داشته باشند، پیامی نمایش داده می‌شود.
- **دکمه دوباره بازی**: بازی را از ابتدا آغاز می‌کند.
### نتیجه‌گیری
این پروژه **بازی کارت‌های حافظه** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، رویدادهای کاربر و منطق بازی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند زمان‌بندی و نمره‌دهی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **محاسبه‌گر BMI (شاخص توده بدن) با JavaScript** می‌باشد
