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

جزئیات محصول

دانلود پروژه بازی Piano Tiles در JavaScript با کد منبع

دانلود پروژه بازی Piano Tiles در JavaScript با کد منبع

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

خرید فایل


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

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

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

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


### پروژه: بازی Piano Tiles در JavaScript با کد منبع
 
**بازی Piano Tiles** یک بازی سرگرم‌کننده و اعتیادآور است که با استفاده از **JavaScript**، **HTML** و **CSS** ساخته شده است. در این بازی، بازیکنان باید روی کاشی‌های سیاه ضربه بزنند و از روی کاشی‌های سفید بپرند تا امتیاز کسب کنند. این بازی به سرعت عمل و دقت نیاز دارد و می‌تواند برای هر سنی جذاب باشد.
 
### ویژگی‌های بازی:
1. **رابط کاربری جذاب**: طراحی زیبا و کاربرپسند که باعث جذب بازیکن می‌شود.
2. **موسیقی پس‌زمینه**: بازی دارای موسیقی متن و افکت‌های صوتی است که تجربه بازی را جذاب‌تر می‌کند.
3. **چالش‌های متنوع**: با گذشت زمان، سرعت بازی افزایش می‌یابد و چالش‌ها سخت‌تر می‌شوند.
 
### نحوه اجرای پروژه:
1. **دانلود پروژه**: فایل‌های پروژه را دانلود کنید.
2. **اجرای بازی**: فایل `index.html` را با مرورگر خود باز کنید. برای بهترین تجربه، از مرورگرهای مدرن مانند **Google Chrome** یا **Mozilla Firefox** استفاده کنید.
 
### کد منبع:
 
#### HTML (index.html)
```html
   
   
    بازی Piano Tiles
   
   

بازی Piano Tiles

   
       
امتیاز: 0
       
   
   
   
```
 
#### CSS (style.css)
```css
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
 
h1 {
    color: #333;
}
 
#game-container {
    position: relative;
    width: 400px;
    height: 600px;
    overflow: hidden;
    border: 2px solid #333;
    background-color: #fff;
}
 
.tile {
    width: 100%;
    height: 25%;
    background-color: black;
    border: 1px solid #333;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
}
 
.tile.white {
    background-color: white;
}
 
#score {
    font-size: 24px;
    margin: 10px;
}
 
button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
}
```
 
#### JavaScript (script.js)
```javascript
const gameContainer = document.getElementById('tiles-container');
const scoreDisplay = document.getElementById('score');
const startButton = document.getElementById('start-button');
 
let score = 0;
let gameInterval;
let tiles = [];
 
// تابع برای ایجاد کاشی‌ها
function createTile() {
    const tile = document.createElement('div');
    tile.classList.add('tile');
 
    // تعیین نوع کاشی (سفید یا سیاه)
    if (Math.random() < 0.75) {
        tile.classList.add('white');
    }
 
    gameContainer.appendChild(tile);
    tiles.push(tile);
 
    // موقعیت کاشی
    tile.style.top = '0px';
 
    // حرکت کاشی‌ها به سمت پایین
    let dropInterval = setInterval(() => {
        let topPosition = parseInt(tile.style.top);
        if (topPosition >= gameContainer.offsetHeight) {
            clearInterval(dropInterval);
            tile.remove();
            tiles.shift();
            // اگر کاشی سفید به زمین برسد، بازی تمام می‌شود
            if (!tile.classList.contains('white')) {
                endGame();
            }
        } else {
            tile.style.top = `${topPosition + 5}px`;
        }
    }, 50);
 
    // رویداد کلیک روی کاشی
    tile.addEventListener('click', () => {
        if (tile.classList.contains('white')) {
            score++;
            scoreDisplay.innerText = `امتیاز: ${score}`;
            tile.remove();
            clearInterval(dropInterval);
            tiles.shift();
        } else {
            endGame();
        }
    });
}
 
// تابع برای شروع بازی
function startGame() {
    score = 0;
    scoreDisplay.innerText = `امتیاز: ${score}`;
    gameInterval = setInterval(createTile, 1000);
}
 
// تابع برای پایان بازی
function endGame() {
    clearInterval(gameInterval);
    alert(`بازی تمام شد! امتیاز شما: ${score}`);
    tiles.forEach(tile => tile.remove());
    tiles = [];
}
 
// رویداد کلیک روی دکمه شروع بازی
startButton.addEventListener('click', startGame);
```
 
### توضیحات اضافی:
- **چگونگی بازی**: بازیکن باید فقط بر روی کاشی‌های سفید کلیک کند و از کاشی‌های سیاه اجتناب کند. اگر بازیکن بر روی یک کاشی سیاه کلیک کند، بازی به پایان می‌رسد.
- **گرافیک و صدا**: برای بهبود تجربه بازی می‌توانید صداهایی به بازی اضافه کنید و یا طراحی گرافیکی را تغییر دهید.
- **امتیازدهی**: امتیاز بازیکن با هر کلیک بر روی کاشی سفید افزایش می‌یابد.
 
### نتیجه‌گیری:
**بازی Piano Tiles** یک پروژه عالی برای یادگیری نحوه کار با رویدادها و انیمیشن‌ها در JavaScript است. این بازی نه تنها سرگرم‌کننده است بلکه می‌تواند به شما در توسعه مهارت‌های برنامه‌نویسی و طراحی وب کمک کند. شما می‌توانید ویژگی‌های جدیدی مانند **چالش‌های زمانی**، **سطوح مختلف** و **امتیازدهی آنلاین** را به بازی اضافه کنید تا تجربه کاربری بهتری ارائه دهید.
| صفحه قابل مشاهده: دانلود پروژه بازی Piano Tiles در JavaScript با کد منبع می‌باشد