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

جزئیات محصول

دانلود پروژه بازی ساده حافظه با جاوا اسکریپت و کد منبع

دانلود پروژه بازی ساده حافظه با جاوا اسکریپت و کد منبع

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

خرید فایل


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

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

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

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


### بازی ساده حافظه با جاوا اسکریپت و کد منبع
 
این پروژه یک **بازی ساده حافظه** است که با استفاده از HTML، CSS و JavaScript ایجاد شده است. این بازی به کاربر کمک می‌کند تا حافظه خود را به چالش بکشد، با تطبیق کارت‌های مشابه. این پروژه برای یادگیری مفاهیم پایه‌ای مانند دستکاری DOM، مدیریت رویدادها و زمان‌بندی مناسب است.
 
### ۱. **HTML**
ابتدا ساختار HTML را برای بازی حافظه ایجاد می‌کنیم.
 
```html
   
   
    بازی حافظه
   
   

بازی حافظه

   
       
   
   
```
 
### ۲. **CSS**
طراحی ظاهری بازی حافظه با استفاده از CSS.
 
```css
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
}
 
h1 {
    margin-bottom: 20px;
}
 
.memory-game {
    width: 640px;
    height: 640px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 2px solid #333;
    padding: 10px;
    border-radius: 10px;
}
 
.memory-card {
    width: calc(25% - 10px);
    height: calc(25% - 10px);
    position: relative;
    transform: scale(1);
    transition: transform 0.5s;
    cursor: pointer;
}
 
.memory-card:active {
    transform: scale(0.95);
    transition: transform 0.2s;
}
 
.memory-card.flip {
    transform: rotateY(180deg);
}
 
.front-face,
.back-face {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 5px;
}
 
.front-face {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #333;
}
 
.back-face {
    background: #333;
}
```
 
### ۳. **JavaScript**
منطق بازی حافظه را با استفاده از JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
document.addEventListener('DOMContentLoaded', () => {
    const cardsArray = [
        { name: 'apple', img: '🍎' },
        { name: 'banana', img: '🍌' },
        { name: 'grape', img: '🍇' },
        { name: 'orange', img: '🍊' },
        { name: 'pear', img: '🍐' },
        { name: 'cherry', img: '🍒' },
        { name: 'apple', img: '🍎' },
        { name: 'banana', img: '🍌' },
        { name: 'grape', img: '🍇' },
        { name: 'orange', img: '🍊' },
        { name: 'pear', img: '🍐' },
        { name: 'cherry', img: '🍒' },
    ];
 
    // شافل کردن کارت‌ها
    cardsArray.sort(() => 0.5 - Math.random());
 
    const memoryGame = document.getElementById('memory-game');
    let firstCard, secondCard;
    let hasFlippedCard = false;
    let lockBoard = false;
 
    // ایجاد کارت‌ها
    function createBoard() {
        cardsArray.forEach(card => {
            const memoryCard = document.createElement('div');
            memoryCard.classList.add('memory-card');
            memoryCard.dataset.name = card.name;
 
            memoryCard.innerHTML = `
               
${card.img}
               
            `;
            memoryGame.appendChild(memoryCard);
        });
    }
 
    // چرخاندن کارت
    function flipCard() {
        if (lockBoard) return;
        if (this === firstCard) return;
 
        this.classList.add('flip');
        if (!hasFlippedCard) {
            hasFlippedCard = true;
            firstCard = this;
            return;
        }
 
        secondCard = this;
        checkForMatch();
    }
 
    // بررسی اینکه کارت‌ها با هم جفت هستند یا خیر
    function checkForMatch() {
        let isMatch = firstCard.dataset.name === secondCard.dataset.name;
        isMatch ? disableCards() : unflipCards();
    }
 
    // غیرفعال کردن کارت‌های جفت شده
    function disableCards() {
        firstCard.removeEventListener('click', flipCard);
        secondCard.removeEventListener('click', flipCard);
        resetBoard();
    }
 
    // برگرداندن کارت‌ها در صورت عدم تطابق
    function unflipCards() {
        lockBoard = true;
        setTimeout(() => {
            firstCard.classList.remove('flip');
            secondCard.classList.remove('flip');
            resetBoard();
        }, 1000);
    }
 
    // بازنشانی متغیرهای برد
    function resetBoard() {
        [hasFlippedCard, lockBoard] = [false, false];
        [firstCard, secondCard] = [null, null];
    }
 
    // افزودن رویداد کلیک به کارت‌ها
    function addCardEvents() {
        const cards = document.querySelectorAll('.memory-card');
        cards.forEach(card => card.addEventListener('click', flipCard));
    }
 
    createBoard();
    addCardEvents();
});
```
 
### توضیحات کد:
 
1. **HTML**:
   - شامل عنوان و بخشی برای نگهداری کارت‌های بازی است.
 
2. **CSS**:
   - **استایل کارت‌ها**: با استفاده از CSS، کارت‌ها به صورت دو رویه طراحی شده‌اند تا وقتی برمی‌گردند، یک انیمیشن چرخشی داشته باشند.
 
3. **JavaScript**:
   - **ایجاد کارت‌ها**: ابتدا کارت‌ها با استفاده از داده‌های موجود ایجاد می‌شوند و سپس شافل می‌شوند تا به صورت تصادفی چیده شوند.
   - **چرخاندن کارت**: وقتی کاربر روی کارت کلیک می‌کند، کارت چرخانده می‌شود و اگر دو کارت با هم جفت باشند، قفل می‌شوند.
   - **غیر همسان بودن کارت‌ها**: اگر دو کارت با هم جفت نبودند، پس از مدتی به حالت اولیه باز می‌گردند.
 
### نتیجه‌گیری
این بازی ساده حافظه به شما کمک می‌کند تا با استفاده از جاوا اسکریپت مفاهیمی مانند مدیریت رویدادها، انیمیشن‌ها، و عملیات مربوط به عناصر DOM را به خوبی یاد بگیرید. شما می‌توانید این پروژه را گسترش داده و ویژگی‌هایی مانند تایمر یا امتیازدهی اضافه کنید تا بازی جذاب‌تر شود. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی ساده حافظه با جاوا اسکریپت و کد منبع می‌باشد