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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



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

بازی حافظه کارتی

       
           
       
       
       
   
   
```
 
### 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;
}
 
.container {
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    gap: 10px;
    margin-bottom: 20px;
}
 
.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;
    position: relative;
}
 
.card.flipped {
    background-color: #fff;
    color: #333;
}
 
.card.matched {
    background-color: #28a745;
    color: white;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
}
 
.result {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
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 matchedCards = 0;
 
// انتخاب عناصر DOM
const gameBoard = document.getElementById('game-board');
const resetBtn = document.getElementById('resetBtn');
const resultDiv = document.getElementById('result');
 
// تابع ساخت کارت‌ها
function createCard(value) {
    const card = document.createElement('div');
    card.classList.add('card');
    card.setAttribute('data-value', value);
    card.addEventListener('click', flipCard);
    gameBoard.appendChild(card);
}
 
// تابع چرخاندن کارت
function flipCard() {
    if (lockBoard || this === firstCard) return;
 
    this.classList.add('flipped');
    this.textContent = this.getAttribute('data-value');
 
    if (!firstCard) {
        firstCard = this;
    } else {
        secondCard = this;
        lockBoard = true;
 
        checkForMatch();
    }
}
 
// تابع بررسی تطابق
function checkForMatch() {
    const isMatch = firstCard.getAttribute('data-value') === secondCard.getAttribute('data-value');
 
    isMatch ? disableCards() : unflipCards();
}
 
// تابع غیرفعال کردن کارت‌های مطابقت یافته
function disableCards() {
    firstCard.classList.add('matched');
    secondCard.classList.add('matched');
    matchedCards += 2;
    resetBoard();
    checkWin();
}
 
// تابع برگرداندن کارت‌ها
function unflipCards() {
    setTimeout(() => {
        firstCard.classList.remove('flipped');
        firstCard.textContent = '';
        secondCard.classList.remove('flipped');
        secondCard.textContent = '';
        resetBoard();
    }, 1000);
}
 
// تابع بازنشانی متغیرها
function resetBoard() {
    [firstCard, secondCard, lockBoard] = [null, null, false];
}
 
// تابع بررسی پیروزی
function checkWin() {
    if (matchedCards === cardValues.length) {
        resultDiv.textContent = 'تبریک! شما برنده شدید!';
    }
}
 
// تابع شروع بازی
function startGame() {
    matchedCards = 0;
    gameBoard.innerHTML = '';
    resultDiv.textContent = '';
 
    // مخلوط کردن کارت‌ها
    const shuffledValues = cardValues.sort(() => 0.5 - Math.random());
    shuffledValues.forEach(value => createCard(value));
}
 
// افزودن رویداد به دکمه دوباره شروع
resetBtn.addEventListener('click', startGame);
 
// شروع بازی هنگام بارگذاری صفحه
startGame();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، یک بخش برای نمایش کارت‌ها، دکمه‌ای برای شروع دوباره بازی و بخشی برای نمایش نتیجه است.
2. **CSS**: طراحی ساده برای بازی حافظه کارتی، شامل کارت‌ها و دکمه.
3. **JavaScript**:
   - **کارت‌ها**: کارت‌ها به صورت تصادفی ساخته می‌شوند و روی صفحه نمایش داده می‌شوند.
   - **چرخاندن کارت**: کاربر می‌تواند کارت‌ها را چرخانده و با هم مقایسه کند.
   - **تطابق**: اگر دو کارت مطابقت داشته باشند، آن‌ها غیرفعال می‌شوند و در غیر این صورت، بعد از یک ثانیه برگردانده می‌شوند.
   - **پیروزی**: اگر تمام کارت‌ها مطابقت یابند، پیروزی اعلام می‌شود.
 
### نتیجه‌گیری
این پروژه **بازی حافظه کارتی** یک مثال عالی برای استفاده از مفاهیم JavaScript، HTML و CSS است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند زمان‌سنج، امتیازدهی یا سطوح سختی مختلف اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی حافظه کارتی** (Card Memory Game) با استفاده از HTML، CSS و JavaScript می‌باشد