کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
**پروژه: بازی پرش فلاپی در HTML5 و جاوا اسکریپت با کد منبع**
این پروژه یک بازی **پرش فلاپی** است که با استفاده از **HTML5** و **جاوا اسکریپت** طراحی شده است. هدف این بازی این است که کاربر با پرش و حرکت پرنده از موانع عبور کند و امتیاز بیشتری کسب کند.
### ویژگی‌های پروژه
1. **گیم‌پلی ساده**: کاربر با فشردن کلید فضا می‌تواند پرنده را به سمت بالا پرش دهد و با موانع برخورد نکند.
2. **گرافیک جذاب**: طراحی بصری جذاب و رنگارنگ که تجربه کاربری خوبی را فراهم می‌کند.
3. **امتیازدهی**: هر بار که کاربر از موانع عبور کند، امتیاز کسب می‌کند و بازی تا زمانی ادامه می‌یابد که پرنده به مانع برخورد کند.
4. **استفاده از HTML5 Canvas**: برای نمایش گرافیک و انیمیشن‌ها استفاده شده است.
### نحوه اجرای پروژه
1. **دانلود پروژه**: ابتدا کد منبع پروژه را دانلود کنید.
2. **اجرای پروژه**:
- کد HTML را در یک مرورگر مدرن مانند Google Chrome یا Mozilla Firefox باز کنید.
- کافی است فایل `index.html` را در مرورگر خود باز کنید تا بازی را مشاهده کنید.
### کد منبع
در زیر کدهای مربوط به پروژه آورده شده است:
#### کد HTML (index.html)
```html
بازی پرش فلاپی
بازی پرش فلاپی
```
#### کد CSS (styles.css)
```css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #70c5ce;
margin: 0;
padding: 0;
}
canvas {
border: 2px solid #000;
background-color: #fff;
}
```
#### کد جاوا اسکریپت (script.js)
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let bird = { x: 50, y: 150, width: 20, height: 20, gravity: 0.6, lift: -15, velocity: 0 };
let pipes = [];
let frame = 0;
let gameRunning = false;
document.getElementById('startButton').onclick = function() {
resetGame();
gameRunning = true;
gameLoop();
};
function resetGame() {
bird.y = 150;
bird.velocity = 0;
pipes = [];
frame = 0;
}
function gameLoop() {
if (gameRunning) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
bird.velocity += bird.gravity;
bird.y += bird.velocity;
if (bird.y > canvas.height) {
gameRunning = false;
}
if (frame % 75 === 0) {
let pipeHeight = Math.random() * (canvas.height / 2);
pipes.push({ x: canvas.width, height: pipeHeight });
}
for (let i = pipes.length - 1; i >= 0; i--) {
let pipe = pipes[i];
pipe.x -= 3;
ctx.fillStyle = '#000';
ctx.fillRect(pipe.x, 0, 40, pipe.height);
ctx.fillRect(pipe.x, pipe.height + 100, 40, canvas.height - pipe.height - 100);
if (pipe.x < 0) {
pipes.splice(i, 1);
}
if (bird.x + bird.width > pipe.x && bird.x < pipe.x + 40) {
if (bird.y < pipe.height || bird.y + bird.height > pipe.height + 100) {
gameRunning = false;
}
}
}
ctx.fillStyle = '#ff0000';
ctx.fillRect(bird.x, bird.y, bird.width, bird.height);
frame++;
requestAnimationFrame(gameLoop);
} else {
ctx.fillStyle = '#000';
ctx.font = '30px Arial';
ctx.fillText('بازی تمام شد!', canvas.width / 4, canvas.height / 2);
ctx.fillText('برای شروع دوباره کلیک کنید', canvas.width / 8, canvas.height / 2 + 40);
}
}
document.addEventListener('keydown', function(event) {
if (event.code === 'Space' && gameRunning) {
bird.velocity += bird.lift;
}
});
```
### جمع‌بندی
این پروژه یک بازی سرگرم‌کننده و چالش‌برانگیز است که به راحتی می‌تواند به نیازهای مختلف کاربران پاسخ دهد. با استفاده از این الگو، شما میتوانید بازی خود را توسعه داده و آن را به نیازهای خاص خود تطبیق دهید. این بازی نه تنها سرگرم‌کننده است بلکه می‌تواند به عنوان یک پروژه آموزشی نیز مورد استفاده قرار گیرد.
| صفحه قابل مشاهده:
دانلود پروژه بازی پرش فلاپی در HTML5 و جاوا اسکریپت با کد منبع می‌باشد
