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

جزئیات محصول

دانلود پروژه **بازی حافظه (Memory Game)** با استفاده از HTML، CSS و JavaScript

دانلود پروژه **بازی حافظه (Memory Game)** با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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



 در اینجا یک پروژه ساده برای ایجاد یک **بازی حافظه (Memory Game)** با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، بازیکن باید کارت‌های مشابه را پیدا کند و با کمترین تعداد تلاش آن‌ها را جفت کند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی حافظه ایجاد می‌کنیم.
 
```html
   
   
    بازی حافظه
   
   
       

بازی حافظه

       
       
       
امتیاز: 0
   
   
```
 
### 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;
}
 
.game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
    margin: 0 auto;
}
 
.card {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}
 
.card.flipped {
    background-color: #fff;
    color: #333;
}
 
.score {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}
 
button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل ساخت کارت‌ها، مدیریت کلیک‌ها و بررسی جفت‌ها است.
 
```javascript
const gameBoard = document.getElementById('gameBoard');
const resetBtn = document.getElementById('resetBtn');
const scoreDiv = document.getElementById('score');
 
let cardValues = ['🍎', '🍌', '🍇', '🍍', '🍓', '🍒', '🍉', '🍊'];
let cards = [...cardValues, ...cardValues]; // دو برابر کردن کارت‌ها برای جفت‌ها
let score = 0;
let flippedCards = [];
let matchedCards = 0;
 
// تابع برای شاف کردن کارت‌ها
function shuffleCards() {
    for (let i = cards.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cards[i], cards[j]] = [cards[j], cards[i]];
    }
}
 
// تابع برای ایجاد کارت‌ها
function createCards() {
    gameBoard.innerHTML = ''; // خالی کردن صفحه بازی
    cards.forEach((value, index) => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.setAttribute('data-value', value);
        card.setAttribute('data-index', index);
        card.addEventListener('click', flipCard);
        gameBoard.appendChild(card);
    });
}
 
// تابع برای برگرداندن کارت
function flipCard() {
    if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
        this.classList.add('flipped');
        this.textContent = this.getAttribute('data-value');
        flippedCards.push(this);
 
        if (flippedCards.length === 2) {
            setTimeout(checkMatch, 1000);
        }
    }
}
 
// تابع برای بررسی جفت‌ها
function checkMatch() {
    const [firstCard, secondCard] = flippedCards;
 
    if (firstCard.getAttribute('data-value') === secondCard.getAttribute('data-value')) {
        matchedCards += 2;
        score++;
        scoreDiv.textContent = `امتیاز: ${score}`;
    } else {
        firstCard.classList.remove('flipped');
        firstCard.textContent = '';
        secondCard.classList.remove('flipped');
        secondCard.textContent = '';
    }
    flippedCards = [];
 
    // بررسی اتمام بازی
    if (matchedCards === cards.length) {
        setTimeout(() => {
            alert('بازی تمام شد! امتیاز شما: ' + score);
        }, 500);
    }
}
 
// تابع برای راه‌اندازی بازی
function startGame() {
    shuffleCards();
    createCards();
    score = 0;
    matchedCards = 0;
    scoreDiv.textContent = 'امتیاز: 0';
}
 
// افزودن رویداد کلیک برای دکمه بازی دوباره
resetBtn.addEventListener('click', startGame);
 
// شروع بازی
startGame();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، ناحیه بازی و دکمه بازی دوباره است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری جذاب و کاربرپسند.
3. **JavaScript**:
   - **شاف کردن کارت‌ها**: تابع `shuffleCards` کارت‌ها را به صورت تصادفی شاف می‌کند.
   - **ایجاد کارت‌ها**: تابع `createCards` کارت‌ها را به DOM اضافه می‌کند و به هر کارت یک رویداد کلیک می‌دهد.
   - **برگرداندن کارت**: تابع `flipCard` کارت را برمی‌گرداند و متن آن را نمایش می‌دهد. اگر دو کارت برگردانده شده باشد، تابع `checkMatch` برای بررسی جفت بودن آن‌ها فراخوانی می‌شود.
   - **بررسی جفت‌ها**: تابع `checkMatch` دو کارت را بررسی کرده و در صورت تطابق، آن‌ها را ثابت می‌کند و در غیر این صورت، دوباره آن‌ها را برمی‌گرداند.
   - **شروع بازی**: تابع `startGame` بازی را راه‌اندازی می‌کند و کارت‌ها را ایجاد می‌کند.
 
### نتیجه‌گیری
این پروژه **بازی حافظه** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، مدیریت رویدادها و انیمیشن‌ها است. شما می‌توانید این بازی را گسترش دهید و ویژگی‌های بیشتری مانند زمان محدود، سطوح مختلف یا تعداد بیشتری کارت اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی حافظه (Memory Game)** با استفاده از HTML، CSS و JavaScript می‌باشد