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

جزئیات محصول

دانلود پروژه **بازی حافظه (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
   
   
    بازی حافظه
   
   
       

بازی حافظه

       
       
       
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}
 
.container {
    text-align: center;
}
 
.board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
    margin: 20px auto;
}
 
.card {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
}
 
.card.flipped {
    background-color: #fff;
    color: #007bff;
}
 
.result {
    margin-top: 20px;
    font-size: 20px;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const board = document.getElementById('board');
const restartBtn = document.getElementById('restartBtn');
const resultDisplay = document.getElementById('result');
 
const cardImages = [
    '🍎', '🍌', '🍊', '🍇',
    '🍎', '🍌', '🍊', '🍇',
    '🍉', '🍒', '🍍', '🍓',
    '🍉', '🍒', '🍍', '🍓'
];
 
let cardElements = [];
let flippedCards = [];
let matchedCards = [];
let isGameOver = false;
 
// تابع برای ایجاد کارت‌ها
function createBoard() {
    shuffle(cardImages);
    cardImages.forEach(image => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.image = image;
 
        card.addEventListener('click', flipCard);
        board.appendChild(card);
        cardElements.push(card);
    });
}
 
// تابع برای شفل کردن کارت‌ها
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]];
    }
}
 
// تابع برای چرخاندن کارت‌ها
function flipCard() {
    if (isGameOver) return;
 
    const currentCard = this;
    if (flippedCards.length < 2 && !currentCard.classList.contains('flipped')) {
        currentCard.classList.add('flipped');
        currentCard.textContent = currentCard.dataset.image;
        flippedCards.push(currentCard);
 
        if (flippedCards.length === 2) {
            checkForMatch();
        }
    }
}
 
// تابع برای بررسی تطابق کارت‌ها
function checkForMatch() {
    const [firstCard, secondCard] = flippedCards;
 
    if (firstCard.dataset.image === secondCard.dataset.image) {
        matchedCards.push(firstCard, secondCard);
        flippedCards = [];
        if (matchedCards.length === cardElements.length) {
            isGameOver = true;
            resultDisplay.textContent = 'تبریک! شما برنده شدید!';
        }
    } else {
        setTimeout(() => {
            firstCard.classList.remove('flipped');
            secondCard.classList.remove('flipped');
            firstCard.textContent = '';
            secondCard.textContent = '';
            flippedCards = [];
        }, 1000);
    }
}
 
// تابع برای شروع مجدد بازی
function restartGame() {
    cardElements = [];
    flippedCards = [];
    matchedCards = [];
    isGameOver = false;
    resultDisplay.textContent = '';
    board.innerHTML = '';
    createBoard();
}
 
// راه‌اندازی بازی
createBoard();
restartBtn.addEventListener('click', restartGame);
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان بازی، یک بورد برای کارت‌ها، یک دکمه برای شروع مجدد و یک بخش برای نمایش نتیجه است.
 
2. **CSS**:
   - طراحی ساده برای بورد بازی و کارت‌ها، با استفاده از گرید CSS برای چینش کارت‌ها.
 
3. **JavaScript**:
   - **کارت‌ها**: یک آرایه از ایموجی‌ها به عنوان تصاویر کارت‌ها.
   - **تابع `createBoard`**: برای ایجاد کارت‌ها و اضافه کردن رویداد کلیک به آن‌ها.
   - **تابع `shuffle`**: برای شفل کردن کارت‌ها به صورت تصادفی.
   - **تابع `flipCard`**: برای چرخاندن کارت‌ها و بررسی تطابق.
   - **تابع `checkForMatch`**: برای بررسی اینکه آیا دو کارت flipped مشابه هستند.
   - **تابع `restartGame`**: برای شروع مجدد بازی.
   - **حلقه راه‌اندازی بازی**: در ابتدا کارت‌ها ایجاد می‌شوند و رویداد کلیک برای دکمه آغاز مجدد تنظیم می‌شود.
 
### نتیجه‌گیری
این پروژه **بازی حافظه** یک مثال ساده و جذاب از پیاده‌سازی بازی در JavaScript است. شما می‌توانید ویژگی‌های بیشتری مانند تنظیم زمان برای بازی یا حالت‌های مختلف را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی حافظه (Memory Card Game)** با استفاده از HTML، CSS و JavaScript می‌باشد