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

جزئیات محصول

دانلود پروژه بازی **Stack** (بازی چیدن اشیا) با استفاده از **JavaScript**، **HTML** و **CSS*

دانلود پروژه بازی **Stack** (بازی چیدن اشیا) با استفاده از **JavaScript**، **HTML** و **CSS*

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

خرید فایل


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

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

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

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



 ایجاد یک بازی **Stack** (بازی چیدن اشیا) با استفاده از **JavaScript**، **HTML** و **CSS** یک پروژه جالب و آموزشی است. در این بازی، بازیکن باید بلوک‌ها را روی یکدیگر بچیند و سعی کند تا بالاترین امتیاز را کسب کند.
 
در ادامه، کد منبع این بازی را به همراه توضیحات ارائه می‌دهم.
 
### ساختار پروژه
ابتدا یک پوشه جدید به نام `stack-game` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `style.css` و `script.js` بسازید.
 
### 1. کد HTML (`index.html`)
```html
   
   
    بازی Stack
   
   
       

بازی Stack

       
       
امتیاز: 0
       
   
   
```
 
### 2. کد CSS (`style.css`)
```css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
 
.container {
    text-align: center;
}
 
#game-board {
    width: 300px;
    height: 500px;
    border: 2px solid #333;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
 
.block {
    width: 100%;
    height: 30px;
    background-color: #4CAF50;
    position: absolute;
    bottom: 0;
    transition: all 0.2s ease;
}
 
.score {
    margin: 20px;
    font-size: 24px;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
```
 
### 3. کد JavaScript (`script.js`)
```javascript
const gameBoard = document.getElementById('game-board');
const scoreDisplay = document.getElementById('score');
const restartBtn = document.getElementById('restart-btn');
 
let score = 0;
let blockWidth = 300; // عرض بلوک
let blockHeight = 30; // ارتفاع بلوک
let currentPosition = 0; // موقعیت بلوک جاری
let blocks = []; // آرایه بلوک‌ها
let isGameOver = false; // وضعیت بازی
 
function startGame() {
    score = 0;
    currentPosition = 0;
    blocks = [];
    isGameOver = false;
    scoreDisplay.textContent = score;
    gameBoard.innerHTML = '';
    createBlock();
}
 
function createBlock() {
    const block = document.createElement('div');
    block.className = 'block';
    block.style.width = `${Math.random() * (blockWidth - 50) + 50}px`;
    block.style.left = `${Math.random() * (blockWidth - parseFloat(block.style.width))}px`;
    gameBoard.appendChild(block);
    
    blocks.push(block);
    currentPosition += blockHeight;
 
    if (currentPosition >= gameBoard.clientHeight) {
        gameOver();
    } else {
        setTimeout(createBlock, 1000); // ایجاد بلوک جدید هر ثانیه
    }
}
 
function gameOver() {
    isGameOver = true;
    alert(`بازی تمام شد! امتیاز شما: ${score}`);
}
 
gameBoard.addEventListener('click', () => {
    if (isGameOver) return;
 
    const lastBlock = blocks[blocks.length - 1];
    const newBlock = document.createElement('div');
    newBlock.className = 'block';
    newBlock.style.width = `${Math.random() * (blockWidth - 50) + 50}px`;
    newBlock.style.left = `${Math.random() * (blockWidth - parseFloat(newBlock.style.width))}px`;
 
    // چک کردن اینکه آیا بلوک جدید با بلوک قبلی هماهنگ است یا خیر
    if (Math.abs(parseFloat(lastBlock.style.left) - parseFloat(newBlock.style.left)) < 50) {
        score++;
        scoreDisplay.textContent = score;
        currentPosition += blockHeight; // افزایش موقعیت
        gameBoard.appendChild(newBlock);
        blocks.push(newBlock);
    } else {
        gameOver();
    }
});
 
restartBtn.addEventListener('click', startGame);
startGame();
```
 
### توضیحات کد
 
1. **HTML**:
   - شامل ساختار اصلی بازی است، شامل عنوان، تخته بازی، نمایش امتیاز و دکمه‌ای برای شروع دوباره.
 
2. **CSS**:
   - شامل استایل برای طراحی بازی، بلوک‌ها و دیگر عناصر است.
 
3. **JavaScript**:
   - **شروع بازی**: تابع `startGame` بازی را ریست کرده و امتیاز را به 0 می‌برد.
   - **ایجاد بلوک**: با تابع `createBlock`، هر ثانیه یک بلوک جدید ایجاد می‌شود و به تخته اضافه می‌شود.
   - **بررسی وضعیت بازی**: با کلیک روی تخته، بررسی می‌شود که آیا موقعیت بلوک جدید با بلوک قبلی هماهنگ است یا خیر. اگر هماهنگ نباشد، بازی تمام می‌شود.
   - **دکمه شروع دوباره**: با کلیک روی دکمه، بازی دوباره شروع می‌شود.
 
### نحوه اجرای پروژه
1. فایل‌های `index.html`، `style.css` و `script.js` را ایجاد کرده و کدهای مربوطه را در آنها قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
3. بازی را شروع کرده و سعی کنید تا بیشترین امتیاز را کسب کنید.
 
با این کدها می‌توانید یک بازی Stack ساده بسازید و از آن لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **Stack** (بازی چیدن اشیا) با استفاده از **JavaScript**، **HTML** و **CSS* می‌باشد