کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک بازی حافظه (Memory Game) با استفاده از JavaScript یک پروژه جالب و آموزشی است که به شما کمک می‌کند تا با مفاهیم برنامه‌نویسی مانند کار با DOM، مدیریت رویدادها و منطق بازی آشنا شوید. در این بازی، هدف بازیکن این است که جفت کارت‌های مشابه را پیدا کند.
### ویژگی‌های اصلی پروژه
1. **کارت‌های تصادفی**: کارت‌ها به صورت تصادفی روی صفحه قرار می‌گیرند.
2. **کشف کارت‌ها**: بازیکن با کلیک بر روی کارت‌ها، آن‌ها را برمی‌گرداند و در صورت تطابق، آن‌ها را از بازی حذف می‌کند.
3. **شمارش زمان و تعداد تلاش‌ها**: زمان بازی و تعداد تلاش‌های انجام شده ثبت می‌شود.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کرده و کد زیر را در آن قرار دهید:
```html
بازی حافظه
```
#### ۲. استایل‌دهی با CSS
سپس یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
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);
grid-template-rows: repeat(4, 100px);
gap: 10px;
margin: 20px auto;
}
.card {
background-color: #61dafb;
border: none;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: transparent;
cursor: pointer;
position: relative;
transition: background-color 0.3s;
}
.card.flipped {
color: black;
background-color: #ff6b6b;
}
#reset-button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
#reset-button:hover {
background-color: #45a049;
}
#score-board {
margin-top: 20px;
}
```
#### ۳. اسکریپت JavaScript
در نهایت، یک فایل JavaScript به نام `script.js` ایجاد کرده و کد زیر را در آن قرار دهید:
```javascript
const cardValues = [
'🍎', '🍌', '🍒', '🍇',
'🍉', '🍍', '🥭', '🥝',
'🍎', '🍌', '🍒', '🍇',
'🍉', '🍍', '🥭', '🥝'
];
let flippedCards = [];
let matchedCards = [];
let attempts = 0;
let timer;
let timeElapsed = 0;
// انتخاب عناصر DOM
const gameBoard = document.getElementById('game-board');
const attemptsDisplay = document.getElementById('attempts');
const timerDisplay = document.getElementById('timer');
const resetButton = document.getElementById('reset-button');
// تابع برای ایجاد تخته بازی
function createGameBoard() {
const shuffledCards = shuffle(cardValues);
shuffledCards.forEach(value => {
const card = document.createElement('div');
card.classList.add('card');
card.setAttribute('data-value', value);
card.addEventListener('click', flipCard);
gameBoard.appendChild(card);
});
}
// تابع برای برگرداندن کارت
function flipCard() {
if (flippedCards.length < 2 && !this.classList.contains('flipped') && !matchedCards.includes(this)) {
this.classList.add('flipped');
this.textContent = this.getAttribute('data-value');
flippedCards.push(this);
if (flippedCards.length === 2) {
checkMatch();
}
}
}
// تابع برای بررسی تطابق کارت‌ها
function checkMatch() {
attempts++;
attemptsDisplay.textContent = attempts;
if (flippedCards[0].getAttribute('data-value') === flippedCards[1].getAttribute('data-value')) {
matchedCards.push(flippedCards[0]);
matchedCards.push(flippedCards[1]);
flippedCards = [];
if (matchedCards.length === cardValues.length) {
clearInterval(timer);
alert('تبریک! شما بازی را بردید.');
}
} else {
setTimeout(() => {
flippedCards.forEach(card => {
card.classList.remove('flipped');
card.textContent = '';
});
flippedCards = [];
}, 1000);
}
}
// تابع برای شروع تایمر
function startTimer() {
timer = setInterval(() => {
timeElapsed++;
timerDisplay.textContent = timeElapsed;
}, 1000);
}
// تابع برای شافل کردن کارت‌ها
function shuffle(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]];
}
return array;
}
// تابع برای بازنشانی بازی
resetButton.addEventListener('click', () => {
gameBoard.innerHTML = '';
attempts = 0;
timeElapsed = 0;
attemptsDisplay.textContent = attempts;
timerDisplay.textContent = timeElapsed;
matchedCards = [];
clearInterval(timer);
startTimer();
createGameBoard();
});
// راه‌اندازی اولیه بازی
startTimer();
createGameBoard();
```
### توضیحات کد
1. **تعریف کارت‌ها**: مقادیر کارت‌ها به صورت آرایه‌ای از اموجی‌ها تعریف شده‌اند که شامل جفت‌های مشابه است.
2. **ایجاد تخته بازی**: تابع `createGameBoard` کارت‌ها را با استفاده از یک تابع شافل در تخته بازی قرار می‌دهد.
3. **مدیریت کارت‌های flipped**: تابع `flipCard` کارت‌ها را برمی‌گرداند و در صورت رسیدن به دو کارت، تابع `checkMatch` فراخوانی می‌شود.
4. **بررسی تطابق کارت‌ها**: در `checkMatch` تعداد تلاش‌ها افزایش می‌یابد و اگر دو کارت مشابه باشند، در آرایه `matchedCards` ذخیره می‌شوند.
5. **شمارش زمان**: تابع `startTimer` زمان بازی را شمارش می‌کند و در صورت برنده شدن، تایمر متوقف می‌شود.
6. **بازنشانی بازی**: با کلیک بر روی دکمه "بازنشانی"، بازی دوباره راه‌اندازی می‌شود و همه متغیرها به حالت اولیه برمی‌گردند.
### نحوه اجرای پروژه
1. تمامی فایل‌ها (`index.html`, `style.css`, `script.js`) را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید تا بازی اجرا شود.
### نتیجه‌گیری
این پروژه "بازی حافظه" با استفاده از JavaScript، HTML، و CSS یک تجربه تعاملی و سرگرم‌کننده را برای کاربران ارائه می‌دهد. میتوانید این پروژه را گسترش دهید، مثلاً با افزودن ویژگی‌های بیشتر مانند تغییرات در طراحی، اضافه کردن سطوح سختی مختلف، یا ذخیره‌سازی بهترین امتیازها. این پروژه به شما کمک می‌کند تا با اصول برنامه‌نویسی JavaScript و منطق بازی آشنا شوید.
| صفحه قابل مشاهده:
دانلود پروژه بازی حافظه (Memory Game) با استفاده از JavaScript می‌باشد
