کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک بازی ساده مشابه Flappy Bird با استفاده از ReactJS یک پروژه هیجان‌انگیز و آموزشی است. در این پروژه، کاربر با کلیک روی صفحه می‌تواند پرنده را بالا ببرد و از موانع عبور کند. در زیر نحوه ساخت این بازی با استفاده از ReactJS و کد منبع آن آورده شده است.
### توضیحات پروژه:
این پروژه یک بازی Flappy Bird ساده است که شامل یک پرنده، موانع و نوار امتیاز است. بازیکن با کلیک روی صفحه می‌تواند پرنده را بالا ببرد و از موانع عبور کند. هر بار که پرنده از بین موانع عبور می‌کند، امتیاز بازیکن افزایش می‌یابد.
### ویژگی‌های اصلی پروژه:
1. **پرنده قابل کنترل**: با کلیک روی صفحه، پرنده به سمت بالا پرواز می‌کند.
2. **موانع**: موانع به طور تصادفی ایجاد می‌شوند و پرنده باید از آنها عبور کند.
3. **نوار امتیاز**: امتیاز بازیکن در بالای صفحه نمایش داده می‌شود.
4. **بازی دوباره**: پس از باخت، کاربر می‌تواند بازی را دوباره شروع کند.
### کد منبع نمونه:
#### ۱. ایجاد پروژه React
ابتدا یک پروژه جدید React با استفاده از Create React App بسازید:
```bash
npx create-react-app flappy-bird
cd flappy-bird
```
#### ۲. کد `App.js`
فایل `App.js` را با کد زیر جایگزین کنید:
```javascript
import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
const [birdY, setBirdY] = useState(250);
const [gravity, setGravity] = useState(0.6);
const [isGameOver, setIsGameOver] = useState(false);
const [pipes, setPipes] = useState([]);
const [score, setScore] = useState(0);
useEffect(() => {
const gameLoop = setInterval(() => {
if (!isGameOver) {
setBirdY((prevY) => prevY + gravity);
}
}, 20);
return () => clearInterval(gameLoop);
}, [gravity, isGameOver]);
useEffect(() => {
const pipeInterval = setInterval(() => {
if (!isGameOver) {
createPipe();
}
}, 2000);
return () => clearInterval(pipeInterval);
}, [isGameOver]);
const createPipe = () => {
const randomHeight = Math.random() * 200 + 100;
const newPipe = {
top: randomHeight,
bottom: window.innerHeight - randomHeight - 150,
};
setPipes((prevPipes) => [...prevPipes, newPipe]);
};
const handleKeyPress = () => {
if (!isGameOver) {
setBirdY((prevY) => prevY - 40);
} else {
resetGame();
}
};
const resetGame = () => {
setBirdY(250);
setGravity(0.6);
setPipes([]);
setScore(0);
setIsGameOver(false);
};
useEffect(() => {
const checkCollision = () => {
const birdRect = {
top: birdY,
bottom: birdY + 30,
left: 50,
right: 80,
};
pipes.forEach((pipe) => {
const topPipeRect = {
top: 0,
bottom: pipe.top,
left: 0,
right: 100,
};
const bottomPipeRect = {
top: window.innerHeight - pipe.bottom,
bottom: window.innerHeight,
left: 0,
right: 100,
};
if (
(birdRect.left < topPipeRect.right &&
birdRect.right > topPipeRect.left &&
birdRect.top < topPipeRect.bottom) ||
(birdRect.left < bottomPipeRect.right &&
birdRect.right > bottomPipeRect.left &&
birdRect.bottom > bottomPipeRect.top)
) {
setIsGameOver(true);
}
});
if (birdY > window.innerHeight) {
setIsGameOver(true);
}
};
const collisionInterval = setInterval(checkCollision, 20);
return () => clearInterval(collisionInterval);
}, [birdY, pipes]);
const updateScore = () => {
setScore((prevScore) => prevScore + 1);
};
useEffect(() => {
if (!isGameOver) {
const scoreInterval = setInterval(() => {
if (pipes.length > 0) {
const lastPipe = pipes[0];
if (lastPipe && lastPipe.top < birdY) {
updateScore();
setPipes((prevPipes) => prevPipes.slice(1));
}
}
}, 100);
return () => clearInterval(scoreInterval);
}
}, [isGameOver, pipes, birdY]);
return (
className="game-container"
onClick={handleKeyPress}
style={{ position: 'relative', overflow: 'hidden', height: '100vh' }}
>
className="bird"
style={{
position: 'absolute',
top: birdY,
left: '50px',
width: '30px',
height: '30px',
backgroundColor: 'yellow',
borderRadius: '50%',
}}
/>
{pipes.map((pipe, index) => (
className="pipe"
style={{
position: 'absolute',
top: 0,
left: `${index * 100 + 300}px`,
width: '100px',
height: pipe.top,
backgroundColor: 'green',
}}
/>
className="pipe"
style={{
position: 'absolute',
bottom: 0,
left: `${index * 100 + 300}px`,
width: '100px',
height: pipe.bottom,
backgroundColor: 'green',
}}
/>
))}
{isGameOver && (
)}
);
}
export default App;
```
#### ۳. کد `App.css`
فایل `App.css` را برای استایل بازی به صورت زیر تنظیم کنید:
```css
.game-container {
background-color: #70c5ce;
overflow: hidden;
position: relative;
}
.bird {
position: absolute;
background-color: yellow;
border-radius: 50%;
}
.pipe {
position: absolute;
background-color: green;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
}
.score {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-size: 24px;
}
```
### نحوه اجرای پروژه:
1. به دایرکتوری پروژه بروید:
```bash
cd flappy-bird
```
2. برنامه را با دستور زیر اجرا کنید:
```bash
npm start
```
### نتیجه‌گیری:
این پروژه یک بازی ساده مشابه Flappy Bird است که به شما کمک می‌کند تا با مفاهیم پایه‌ای React آشنا شوید. شما میتوانید با اضافه کردن ویژگی‌های جدید، مانند صداها، انیمیشن‌ها یا بهبود هوش مصنوعی برای موانع، این بازی را گسترش دهید.
| صفحه قابل مشاهده:
دانلود پروژه بازی ساده مشابه Flappy Bird با استفاده از ReactJS می‌باشد
