کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک بازی **همسان‌سازی حافظه (Memory Matching Game)** با استفاده از 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 {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.card {
background-color: #007bff;
color: white;
border-radius: 5px;
padding: 20px;
font-size: 24px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}
.card.flipped {
background-color: #28a745;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
}
.message {
margin-top: 20px;
color: #007bff;
}
```
### 3. **JavaScript**
سپس منطق بازی همسان‌سازی حافظه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const cardValues = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'];
let cardDeck = [];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
let matchedCards = 0;
// انتخاب و مخلوط کردن کارت‌ها
function shuffleCards() {
cardDeck = cardValues.sort(() => 0.5 - Math.random());
}
// ایجاد کارت‌ها
function createCards() {
const gameBoard = document.getElementById('game-board');
gameBoard.innerHTML = '';
cardDeck.forEach((value, index) => {
const card = document.createElement('div');
card.classList.add('card');
card.setAttribute('data-value', value);
card.setAttribute('data-id', index);
card.addEventListener('click', flipCard);
gameBoard.appendChild(card);
});
}
// چرخاندن کارت
function flipCard() {
if (lockBoard) return;
const card = this;
card.textContent = card.getAttribute('data-value');
card.classList.add('flipped');
if (!firstCard) {
firstCard = card;
return;
}
secondCard = card;
lockBoard = true;
checkForMatch();
}
// بررسی همسان بودن کارت‌ها
function checkForMatch() {
const isMatch = firstCard.getAttribute('data-value') === secondCard.getAttribute('data-value');
if (isMatch) {
matchedCards += 2;
resetBoard();
if (matchedCards === cardDeck.length) {
document.getElementById('message').textContent = 'تبریک! شما برنده شدید!';
}
} else {
setTimeout(() => {
firstCard.textContent = '';
secondCard.textContent = '';
resetBoard();
}, 1000);
}
}
// ریست کردن وضعیت کارت‌ها
function resetBoard() {
[firstCard, secondCard] = [null, null];
lockBoard = false;
}
// دوباره شروع کردن بازی
document.getElementById('restartBtn').addEventListener('click', () => {
matchedCards = 0;
shuffleCards();
createCards();
document.getElementById('message').textContent = '';
});
// آغاز بازی
shuffleCards();
createCards();
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، تخته بازی، دکمه برای شروع دوباره بازی و نمایش پیام‌ها است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **آرایه مقادیر کارت‌ها**: شامل مقادیر مختلف برای کارت‌ها.
- **تابع مخلوط کردن کارت‌ها**: کارت‌ها را به صورت تصادفی مخلوط می‌کند.
- **تابع ایجاد کارت‌ها**: کارت‌ها را به تخته بازی اضافه می‌کند.
- **تابع چرخاندن کارت**: کارت را هنگام کلیک چرخانده و مقدار آن را نمایش می‌دهد.
- **تابع بررسی همسان بودن**: وضعیت کارت‌ها را بررسی می‌کند و در صورت برنده شدن پیام نشان می‌دهد.
- **تابع ریست کردن وضعیت**: وضعیت کارت‌ها را به حالت اولیه بازمی‌گرداند.
- **تابع دوباره شروع کردن بازی**: بازی را از ابتدا راه‌اندازی می‌کند.
### نتیجه‌گیری
این پروژه **بازی همسان‌سازی حافظه** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند دستکاری DOM و مدیریت رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند زمان‌سنج یا امتیازدهی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه بازی **همسان‌سازی حافظه (Memory Matching Game)** با استفاده از HTML، CSS و JavaScript می‌باشد
