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

جزئیات محصول

دانلود پروژه بازی

دانلود پروژه بازی "تمرکز" (Concentration Game) در JavaScript

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

خرید فایل


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

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

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

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



ایجاد یک بازی "تمرکز" (Concentration Game) در JavaScript یک پروژه جالب و آموزشی است که به شما کمک می‌کند مفاهیم برنامه‌نویسی را در عمل پیاده‌سازی کنید. در این بازی، هدف این است که کارت‌ها را دو به دو پیدا کنید.
 
### مراحل پیاده‌سازی پروژه
 
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `concentration-game` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.
 
#### ۲. ایجاد فایل HTML
**index.html**:
 
```html
   
   
    بازی تمرکز
   
   
       

بازی تمرکز

       
       
       
   
   
```
 
#### ۳. ایجاد فایل CSS
**styles.css**:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    text-align: center;
}
 
.container {
    max-width: 600px;
    margin: auto;
}
 
.game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px 0;
}
 
.card {
    width: 100%;
    height: 100px;
    background-color: #007BFF;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.2s;
}
 
.card.flipped {
    background-color: #28a745;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
```
 
#### ۴. پیاده‌سازی منطق بازی در JavaScript
**script.js**:
 
```javascript
const gameBoard = document.getElementById('game-board');
const restartBtn = document.getElementById('restart-btn');
const statusDisplay = document.getElementById('status');
 
let cards = [];
let cardValues = [];
let firstCard, secondCard;
let hasFlippedCard = false;
let lockBoard = false;
let matches = 0;
 
// تولید کارت‌ها
function createCards() {
    cardValues = [];
    for (let i = 1; i <= 8; i++) {
        cardValues.push(i, i); // هر عدد دو بار برای ایجاد جفت
    }
    cardValues = shuffle(cardValues);
    renderCards();
}
 
// شافل کردن کارت‌ها
function shuffle(array) {
    return array.sort(() => Math.random() - 0.5);
}
 
// رسم کارت‌ها
function renderCards() {
    gameBoard.innerHTML = '';
    cardValues.forEach((value, index) => {
        const card = document.createElement('div');
        card.className = 'card';
        card.setAttribute('data-index', index);
        card.addEventListener('click', flipCard);
        gameBoard.appendChild(card);
        cards.push(card);
    });
}
 
// برگرداندن کارت
function flipCard() {
    if (lockBoard || this.classList.contains('flipped')) return;
 
    this.classList.add('flipped');
    this.textContent = cardValues[this.getAttribute('data-index')];
 
    if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this;
        return;
    }
 
    secondCard = this;
    lockBoard = true;
    checkForMatch();
}
 
// بررسی برای تطابق
function checkForMatch() {
    const isMatch = firstCard.textContent === secondCard.textContent;
 
    if (isMatch) {
        matches++;
        resetBoard();
        if (matches === cardValues.length / 2) {
            statusDisplay.textContent = 'تبریک! همه جفت‌ها را پیدا کردید!';
        }
    } else {
        setTimeout(() => {
            firstCard.classList.remove('flipped');
            firstCard.textContent = '';
            secondCard.classList.remove('flipped');
            secondCard.textContent = '';
            resetBoard();
        }, 1000);
    }
}
 
// تنظیم مجدد وضعیت
function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    firstCard = null;
    secondCard = null;
}
 
// راه‌اندازی مجدد بازی
restartBtn.addEventListener('click', () => {
    cards = [];
    matches = 0;
    statusDisplay.textContent = '';
    createCards();
});
 
// شروع بازی اولیه
createCards();
```
 
### توضیحات کد
1. **HTML**:
   - شامل عنوان، زمین بازی و دکمه‌ای برای شروع دوباره است.
 
2. **CSS**:
   - طراحی زیبا و سازماندهی کارت‌ها.
 
3. **JavaScript**:
   - **تولید کارت‌ها**: تابع `createCards` کارت‌ها را تولید و در صفحه نمایش می‌دهد.
   - **شافل کردن کارت‌ها**: تابع `shuffle` ترتیب کارت‌ها را تصادفی می‌کند.
   - **برگرداندن کارت**: با کلیک روی هر کارت، کارت برگردانده می‌شود و بررسی می‌شود که آیا جفت کارت‌ها مشابه هستند یا خیر.
   - **بررسی تطابق**: اگر کارت‌ها مشابه باشند، آن‌ها ثابت می‌مانند، در غیر این صورت پس از یک ثانیه برمی‌گردند.
   - **راه‌اندازی مجدد بازی**: با کلیک بر روی دکمه "شروع دوباره"، بازی از نو آغاز می‌شود.
 
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. با کلیک بر روی کارت‌ها، جفت‌های مشابه را پیدا کنید و از بازی لذت ببرید!
 
### نتیجه‌گیری
این پروژه به شما کمک می‌کند تا یک بازی تمرکز ساده را با استفاده از JavaScript پیاده‌سازی کنید. شما می‌توانید این بازی را با افزودن ویژگی‌های بیشتر، مانند انتخاب سطح سختی، زمان‌بندی و یا طراحی‌های جدید گسترش دهید. این پروژه به شما در یادگیری مفاهیم اولیه توسعه وب و مدیریت رویدادها در JavaScript کمک خواهد کرد.
| صفحه قابل مشاهده: دانلود پروژه بازی "تمرکز" (Concentration Game) در JavaScript می‌باشد