مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه **بازی حافظه (Memory Minder) با JavaScript**

دانلود پروژه **بازی حافظه (Memory Minder) با JavaScript**

قیمت: 80,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



 ### پروژه **بازی حافظه (Memory Minder) با 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: 80%;
    max-width: 600px;
    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;
    padding: 20px;
    border-radius: 5px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
}
 
.card.flipped {
    background-color: #28a745;
}
 
.result {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
 
#restartBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این کد شامل منطق برای شناسایی کارت‌های مشابه و مدیریت وضعیت بازی است.
 
```javascript
const cardsArray = [
    'A', 'A',
    'B', 'B',
    'C', 'C',
    'D', 'D',
    'E', 'E',
    'F', 'F',
    'G', 'G',
    'H', 'H'
];
 
let cardElements = [];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
let matchedCards = 0;
 
// راه اندازی بازی
function setupGame() {
    const gameBoard = document.getElementById('game-board');
    gameBoard.innerHTML = '';
    matchedCards = 0;
 
    // Shuffle cards
    const shuffledCards = shuffle(cardsArray);
 
    // ایجاد کارت‌ها
    shuffledCards.forEach(card => {
        const cardElement = document.createElement('div');
        cardElement.classList.add('card');
        cardElement.setAttribute('data-card', card);
        cardElement.addEventListener('click', flipCard);
        gameBoard.appendChild(cardElement);
        cardElements.push(cardElement);
    });
 
    document.getElementById('result').textContent = '';
}
 
// Shuffle cards
function shuffle(array) {
    return array.sort(() => Math.random() - 0.5);
}
 
// Flip card
function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;
 
    this.classList.add('flipped');
    this.textContent = this.getAttribute('data-card');
 
    if (!firstCard) {
        firstCard = this;
        return;
    }
 
    secondCard = this;
    lockBoard = true;
 
    checkForMatch();
}
 
// Check for match
function checkForMatch() {
    const isMatch = firstCard.getAttribute('data-card') === secondCard.getAttribute('data-card');
 
    if (isMatch) {
        matchedCards += 2;
        resetCards();
        if (matchedCards === cardsArray.length) {
            document.getElementById('result').textContent = 'شما برنده شدید!';
        }
    } else {
        setTimeout(() => {
            firstCard.classList.remove('flipped');
            secondCard.classList.remove('flipped');
            firstCard.textContent = '';
            secondCard.textContent = '';
            resetCards();
        }, 1000);
    }
}
 
// Reset cards
function resetCards() {
    [firstCard, secondCard] = [null, null];
    lockBoard = false;
}
 
// Restart game
document.getElementById('restartBtn').addEventListener('click', setupGame);
 
// شروع بازی
setupGame();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، تخته بازی برای نمایش کارت‌ها و دکمه‌ای برای شروع دوباره.
2. **CSS**: طراحی زیبا برای کارت‌ها و تخته بازی.
3. **JavaScript**:
   - **آرایه کارت‌ها**: شامل کارت‌های مشابه برای بازی.
   - **شناسایی کارت‌ها**: منطق برای شناسایی کارت‌های مشابه و مدیریت وضعیت بازی.
   - **تابع‌های کمکی**: شامل توابعی برای راه‌اندازی بازی، مخلوط کردن کارت‌ها، بررسی تطابق و ریست کردن کارت‌ها.
 
### نتیجه‌گیری
این پروژه **بازی حافظه** یک مثال خوب برای یادگیری کار با DOM، رویدادها و منطق بازی است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند زمان‌سنج، ثبت امتیاز و غیره را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی حافظه (Memory Minder) با JavaScript** می‌باشد