دنیای پروژه

جزئیات محصول

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

دانلود پروژه بازی "سنجاب بازیگوش" (Naughty Squirrel)

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

خرید فایل


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

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

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

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


بازی "سنجاب بازیگوش" (Naughty Squirrel) یک بازی سرگرم‌کننده است که با استفاده از JavaScript، HTML و CSS پیاده‌سازی می‌شود. در این بازی، بازیکن نقش یک سنجاب بازیگوش را دارد که باید آجیل‌ها را جمع‌آوری کند و از موانع عبور کند تا امتیاز بیشتری کسب کند. این بازی از لحاظ مکانیک، مشابه بازی‌های دونده بی‌پایان است که در آن بازیکن باید به سرعت واکنش نشان دهد.
 
### ویژگی‌های بازی "Naughty Squirrel"
1. **کنترل ساده**: با استفاده از کلیدهای کیبورد، بازیکن می‌تواند سنجاب را حرکت داده و پرش کند.
2. **جمع‌آوری آیتم‌ها**: جمع‌آوری آجیل‌ها برای کسب امتیاز بیشتر.
3. **موانع چالش‌برانگیز**: وجود موانعی که سنجاب باید از آنها بپرد یا به سرعت واکنش نشان دهد.
4. **افزایش سختی بازی**: با گذشت زمان، بازی سریع‌تر و چالش‌برانگیزتر می‌شود.
 
### ساختار فایل‌های پروژه
برای ساخت این بازی، سه فایل اصلی نیاز داریم:
1. `index.html` - برای نمایش ساختار صفحه.
2. `style.css` - برای استایل‌دهی صفحه.
3. `script.js` - برای منطق و تعاملات بازی با استفاده از JavaScript.
 
### ۱. فایل HTML (`index.html`)
این فایل صفحه بازی را با اجزای اصلی مانند سنجاب، آجیل و موانع ایجاد می‌کند:
 
```html
   
   
    بازی سنجاب بازیگوش
   
   
       
       
       
   
   

امتیاز: 0

   
   
```
 
### ۲. فایل CSS (`style.css`)
فایل CSS برای استایل‌دهی اجزای بازی مانند سنجاب، آجیل و موانع استفاده می‌شود:
 
```css
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}
 
#gameContainer {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 20px auto;
    background-color: #87CEEB;
    overflow: hidden;
    border: 2px solid #000;
}
 
#squirrel {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: brown;
    border-radius: 50%;
}
 
#nut {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: orange;
    border-radius: 50%;
}
 
#obstacle {
    position: absolute;
    bottom: 0;
    right: -50px;
    width: 50px;
    height: 50px;
    background-color: green;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
 
#score {
    font-size: 20px;
    margin: 10px;
}
```
 
### ۳. فایل JavaScript (`script.js`)
این فایل برای منطق و عملکرد بازی، شامل حرکت سنجاب، جمع‌آوری آجیل‌ها، و اجتناب از موانع استفاده می‌شود:
 
```javascript
let squirrel = document.getElementById("squirrel");
let obstacle = document.getElementById("obstacle");
let nut = document.getElementById("nut");
let scoreElement = document.getElementById("score");
let gameContainer = document.getElementById("gameContainer");
 
let isJumping = false;
let score = 0;
let gameInterval;
 
function startGame() {
    score = 0;
    scoreElement.textContent = "امتیاز: " + score;
 
    obstacle.style.right = '-50px';
    obstacle.style.animation = 'none';
    nut.style.animation = 'none';
    requestAnimationFrame(() => {
        obstacle.style.animation = 'obstacleMove 2s linear infinite';
        nut.style.animation = 'nutMove 4s linear infinite';
    });
 
    gameInterval = setInterval(() => {
        const squirrelBottom = parseInt(window.getComputedStyle(squirrel).bottom);
        const obstacleRight = parseInt(window.getComputedStyle(obstacle).right);
        const nutRight = parseInt(window.getComputedStyle(nut).right);
        const squirrelLeft = parseInt(window.getComputedStyle(squirrel).left);
 
        // برخورد با مانع
        if (
            obstacleRight > gameContainer.offsetWidth - squirrelLeft - 50 &&
            obstacleRight < gameContainer.offsetWidth &&
            squirrelBottom <= 50
        ) {
            alert("بازی تمام شد! امتیاز شما: " + score);
            clearInterval(gameInterval);
            obstacle.style.animation = 'none';
            nut.style.animation = 'none';
        }
 
        // جمع‌آوری آجیل
        if (
            nutRight > gameContainer.offsetWidth - squirrelLeft - 50 &&
            nutRight < gameContainer.offsetWidth &&
            squirrelBottom > 50
        ) {
            score++;
            scoreElement.textContent = "امتیاز: " + score;
        }
    }, 20);
}
 
document.addEventListener('keydown', (event) => {
    if (event.code === 'Space' && !isJumping) {
        jump();
    }
});
 
function jump() {
    if (isJumping) return;
    isJumping = true;
    let upInterval = setInterval(() => {
        let squirrelBottom = parseInt(window.getComputedStyle(squirrel).bottom);
        if (squirrelBottom >= 150) {
            clearInterval(upInterval);
            let downInterval = setInterval(() => {
                squirrelBottom = parseInt(window.getComputedStyle(squirrel).bottom);
                if (squirrelBottom <= 0) {
                    clearInterval(downInterval);
                    isJumping = false;
                }
                squirrel.style.bottom = (squirrelBottom - 5) + "px";
            }, 20);
        } else {
            squirrel.style.bottom = (squirrelBottom + 5) + "px";
        }
    }, 20);
}
 
@keyframes obstacleMove {
    0% {
        right: -50px;
    }
    100% {
        right: 650px;
    }
}
 
@keyframes nutMove {
    0% {
        right: -30px;
        top: 50px;
    }
    100% {
        right: 650px;
        top: 150px;
    }
}
```
 
### نحوه اجرای پروژه
1. سه فایل `index.html`، `style.css` و `script.js` را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
3. دکمه "شروع بازی" را کلیک کنید و با استفاده از کلید Space سنجاب را برای جمع‌آوری آجیل‌ها و پرش از روی موانع کنترل کنید.
 
### نتیجه‌گیری
این بازی ساده "سنجاب بازیگوش" به شما کمک می‌کند تا مهارت‌های برنامه‌نویسی خود را با JavaScript، HTML و CSS بهبود ببخشید. همچنین می‌توانید این بازی را با افزودن ویژگی‌های جدید مانند موانع بیشتر، سرعت‌های مختلف، و اضافه کردن گرافیک‌های بهتر گسترش دهید. این پروژه می‌تواند به عنوان یک پایه برای یادگیری نحوه ساخت بازی‌های سرگرم‌کننده و تعامل‌پذیر استفاده شود.


| صفحه قابل مشاهده: دانلود پروژه بازی "سنجاب بازیگوش" (Naughty Squirrel) می‌باشد