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

جزئیات محصول

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

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

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

خرید فایل


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

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


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

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


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

بازی حافظه

       
           
       
       
       
امتیاز: 0
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی حافظه از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.game-container {
    text-align: center;
}
 
.cards-container {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    gap: 10px;
    margin: 20px 0;
}
 
.card {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s;
}
 
.card.flipped {
    background-color: #ffffff;
    color: #000;
    transform: rotateY(180deg);
}
 
.card.matched {
    background-color: #28a745;
    color: #ffffff;
}
 
button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
 
#score {
    margin-top: 20px;
    font-size: 20px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const cardsContainer = document.getElementById('cards-container');
const restartBtn = document.getElementById('restart-btn');
const scoreDisplay = document.getElementById('score');
 
const cardValues = [
    'A', 'A', 'B', 'B', 'C', 'C', 'D', 'D',
    'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H'
];
 
let firstCard = null;
let secondCard = null;
let lockBoard = false;
let score = 0;
 
// تابع برای شروع بازی
function startGame() {
    score = 0;
    scoreDisplay.textContent = `امتیاز: ${score}`;
    cardsContainer.innerHTML = '';
    lockBoard = false;
 
    const shuffledCards = shuffleArray(cardValues);
    shuffledCards.forEach(value => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.value = value;
        card.addEventListener('click', flipCard);
        cardsContainer.appendChild(card);
    });
}
 
// تابع برای شافل کردن آرایه
function shuffleArray(array) {
    return array.sort(() => Math.random() - 0.5);
}
 
// تابع برای برعکس کردن کارت
function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;
 
    this.classList.add('flipped');
    
    if (!firstCard) {
        firstCard = this;
        return;
    }
 
    secondCard = this;
    lockBoard = true;
 
    checkForMatch();
}
 
// تابع برای چک کردن مطابقت
function checkForMatch() {
    const isMatch = firstCard.dataset.value === secondCard.dataset.value;
 
    if (isMatch) {
        disableCards();
        score++;
        scoreDisplay.textContent = `امتیاز: ${score}`;
        if (score === cardValues.length / 2) {
            setTimeout(() => alert('شما برنده شدید!'), 500);
        }
    } else {
        unflipCards();
    }
}
 
// تابع برای غیر فعال کردن کارت‌ها
function disableCards() {
    firstCard.classList.add('matched');
    secondCard.classList.add('matched');
 
    resetBoard();
}
 
// تابع برای برعکس کردن کارت‌ها
function unflipCards() {
    setTimeout(() => {
        firstCard.classList.remove('flipped');
        secondCard.classList.remove('flipped');
        resetBoard();
    }, 1000);
}
 
// تابع برای تنظیم مجدد برد
function resetBoard() {
    [firstCard, secondCard, lockBoard] = [null, null, false];
}
 
// شروع بازی
startGame();
 
// افزودن رویداد کلیک برای دکمه شروع دوباره
restartBtn.addEventListener('click', startGame);
```
 
### توضیحات کد:
1. **HTML**: شامل یک بخش برای نمایش کارت‌ها، یک دکمه برای شروع دوباره بازی و یک بخش برای نمایش امتیاز.
2. **CSS**: طراحی ساده برای ایجاد یک محیط بازی کاربرپسند.
3. **JavaScript**:
   - **آرایه کارت‌ها**: شامل مقادیر کارت‌ها برای بازی.
   - **تابع شروع بازی**: کارت‌ها را شافل کرده و بازی را تنظیم می‌کند.
   - **تابع شافل**: کارت‌ها را به صورت تصادفی مرتب می‌کند.
   - **تابع برعکس کردن کارت**: کارت‌ها را برعکس کرده و بررسی می‌کند که آیا دو کارت مشابه هستند یا خیر.
   - **چک کردن مطابقت**: در صورت مطابقت، کارت‌ها را غیرفعال کرده و امتیاز را افزایش می‌دهد.
 
### نتیجه‌گیری
این پروژه **بازی حافظه** یک مثال عالی برای یادگیری مفاهیم جاوااسکریپت، مانند مدیریت رویدادها و دستکاری DOM است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند زمان‌سنج، تغییر طراحی یا سطوح مختلف دشواری اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی حافظه (Memory Card Game)** با استفاده از HTML، CSS و JavaScript می‌باشد