کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### بازی آستروئیدز با استفاده از ReactJS و کد منبع
این پروژه شامل یک بازی آستروئیدز است که با استفاده از ReactJS ساخته شده است. در این بازی، کاربر یک سفینه فضایی را کنترل می‌کند و باید از برخورد با آستروئیدها جلوگیری کند.
#### ویژگی‌ها و عملکرد سیستم:
1. **کنترل سفینه فضایی**: با استفاده از کلیدهای صفحه‌کلید، سفینه را حرکت دهید و بچرخانید.
2. **آستروئیدهای متحرک**: آستروئیدها به طور تصادفی در صفحه ظاهر می‌شوند و به سمت کاربر حرکت می‌کنند.
3. **امتیازدهی**: هر بار که سفینه یک آستروئید را از بین ببرد، امتیاز کسب می‌کند.
4. **بازنشانی بازی**: امکان بازنشانی بازی بعد از اتمام آن.
#### ساختار پروژه
```
asteroids-game/
│
├── public/
│ ├── index.html # فایل اصلی HTML
│ └── favicon.ico
├── src/
│ ├── components/
│ │ ├── Asteroid.js # کامپوننت آستروئید
│ │ └── Ship.js # کامپوننت سفینه فضایی
│ ├── App.js # فایل اصلی اپلیکیشن
│ ├── index.js # نقطه ورود اپلیکیشن
│ └── App.css # فایل CSS برای استایل‌دهی
├── package.json # فایل پیکربندی پروژه
└── README.md # فایل راهنما
```
#### مراحل پیاده‌سازی
##### 1. فایل `index.html` (در `public`)
```html
بازی آستروئیدز
```
##### 2. فایل `Ship.js` (در `src/components`)
```javascript
// src/components/Ship.js
import React from 'react';
const Ship = ({ position }) => {
const style = {
position: 'absolute',
left: position.x,
top: position.y,
width: '50px',
height: '50px',
backgroundColor: 'blue',
transform: 'rotate(90deg)', // سفینه به سمت بالا باشد
};
};
export default Ship;
```
##### 3. فایل `Asteroid.js` (در `src/components`)
```javascript
// src/components/Asteroid.js
import React from 'react';
const Asteroid = ({ position }) => {
const style = {
position: 'absolute',
left: position.x,
top: position.y,
width: '30px',
height: '30px',
backgroundColor: 'gray',
borderRadius: '50%',
};
};
export default Asteroid;
```
##### 4. فایل `App.js` (در `src`)
```javascript
// src/App.js
import React, { useState, useEffect } from 'react';
import Ship from './components/Ship';
import Asteroid from './components/Asteroid';
import './App.css';
const App = () => {
const [shipPosition, setShipPosition] = useState({ x: 250, y: 250 });
const [asteroids, setAsteroids] = useState([]);
const [score, setScore] = useState(0);
const [isGameOver, setIsGameOver] = useState(false);
useEffect(() => {
const handleKeyDown = (event) => {
if (isGameOver) return;
switch (event.key) {
case 'ArrowUp':
setShipPosition((pos) => ({ ...pos, y: pos.y - 10 }));
break;
case 'ArrowDown':
setShipPosition((pos) => ({ ...pos, y: pos.y + 10 }));
break;
case 'ArrowLeft':
setShipPosition((pos) => ({ ...pos, x: pos.x - 10 }));
break;
case 'ArrowRight':
setShipPosition((pos) => ({ ...pos, x: pos.x + 10 }));
break;
default:
break;
}
};
const spawnAsteroid = () => {
const newAsteroid = {
x: Math.random() * window.innerWidth,
y: 0,
};
setAsteroids((prev) => [...prev, newAsteroid]);
};
const gameLoop = setInterval(() => {
spawnAsteroid();
setAsteroids((prev) =>
prev.map((asteroid) => ({
...asteroid,
y: asteroid.y + 5,
})).filter((asteroid) => asteroid.y < window.innerHeight)
);
// بررسی برخورد با آستروئیدها
prevAsteroids.forEach((asteroid) => {
if (
asteroid.x < shipPosition.x + 50 &&
asteroid.x + 30 > shipPosition.x &&
asteroid.y < shipPosition.y + 50 &&
asteroid.y + 30 > shipPosition.y
) {
setIsGameOver(true);
}
});
setScore((prev) => prev + 1);
}, 1000);
document.addEventListener('keydown', handleKeyDown);
return () => {
clearInterval(gameLoop);
document.removeEventListener('keydown', handleKeyDown);
};
}, [shipPosition, isGameOver]);
const handleReset = () => {
setShipPosition({ x: 250, y: 250 });
setAsteroids([]);
setScore(0);
setIsGameOver(false);
};
return (
بازی آستروئیدز
امتیاز: {score}
{asteroids.map((asteroid, index) => (
))}
{isGameOver && (
بازی تمام شد!
)}
);
};
export default App;
```
##### 5. فایل `App.css` (در `src`)
```css
/* src/App.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
.game-container {
text-align: center;
}
.game-area {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #333;
overflow: hidden;
margin: 0 auto;
background-color: black;
}
.game-over {
margin-top: 20px;
color: red;
}
```
##### 6. فایل `index.js` (در `src`)
```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
, document.getElementById('root'));
```
### نحوه راه‌اندازی پروژه
1. **نصب Node.js**: اطمینان حاصل کنید که Node.js روی سیستم شما نصب شده است.
2. **ایجاد پروژه**: در ترمینال، با استفاده از فرمان زیر یک پروژه جدید ایجاد کنید:
```bash
npx create-react-app asteroids-game
```
3. **وارد شدن به پوشه پروژه**:
```bash
cd asteroids-game
```
4. **جایگزینی فایل‌ها**: فایل‌های `App.js`, `Ship.js`, `Asteroid.js`, `App.css`, و `index.js` را با کد‌های بالا جایگزین کنید.
5. **اجرای پروژه**: با استفاده از فرمان زیر، پروژه را اجرا کنید:
```bash
npm start
```
### نتیجه‌گیری
این بازی آستروئیدز به کاربران این امکان را می‌دهد که سفینه فضایی را کنترل کنند و از برخورد با آستروئیدها جلوگیری کنند. با استفاده از این پروژه، شما میتوانید با مفاهیم اساسی ReactJS، JSX و CSS آشنا شوید. میتوانید این پروژه را گسترش دهید و ویژگی‌های جدیدی مانند افزودن سلاح، آستروئیدهای مختلف و یا حالت‌های مختلف بازی را اضافه کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی آستروئیدز با استفاده از ReactJS و کد منبع می‌باشد
