کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### بازی ماریو ساده با استفاده از ReactJS و کد منبع
این پروژه شامل یک بازی ساده ماریو است که با استفاده از ReactJS ایجاد شده است. در این بازی، کاربر باید شخصیت ماریو را کنترل کند و از موانع عبور کند و امتیاز جمع کند.
#### ویژگی‌ها و عملکرد سیستم:
1. **کنترل شخصیت ماریو**: با استفاده از کلیدهای صفحه‌کلید، ماریو را حرکت دهید و بپرید.
2. **جمع‌آوری سکه**: ماریو می‌تواند سکه‌ها را جمع‌آوری کند و امتیاز کسب کند.
3. **موانع**: موانع مختلفی در طول بازی وجود دارد که ماریو باید از آنها عبور کند.
4. **امتیازدهی**: هر بار که ماریو یک سکه را جمع‌آوری کند، امتیاز او افزایش می‌یابد.
#### ساختار پروژه
```
mario-game/
│
├── public/
│ ├── index.html # فایل اصلی HTML
│ └── favicon.ico
├── src/
│ ├── components/
│ │ ├── Coin.js # کامپوننت سکه
│ │ └── Mario.js # کامپوننت ماریو
│ ├── App.js # فایل اصلی اپلیکیشن
│ ├── index.js # نقطه ورود اپلیکیشن
│ └── App.css # فایل CSS برای استایل‌دهی
├── package.json # فایل پیکربندی پروژه
└── README.md # فایل راهنما
```
#### مراحل پیاده‌سازی
##### 1. فایل `index.html` (در `public`)
```html
بازی ماریو
```
##### 2. فایل `Mario.js` (در `src/components`)
```javascript
// src/components/Mario.js
import React from 'react';
const Mario = ({ position }) => {
const style = {
position: 'absolute',
left: position.x,
bottom: position.y,
width: '50px',
height: '50px',
backgroundColor: 'red',
borderRadius: '5px',
};
};
export default Mario;
```
##### 3. فایل `Coin.js` (در `src/components`)
```javascript
// src/components/Coin.js
import React from 'react';
const Coin = ({ position }) => {
const style = {
position: 'absolute',
left: position.x,
bottom: position.y,
width: '20px',
height: '20px',
backgroundColor: 'gold',
borderRadius: '50%',
};
};
export default Coin;
```
##### 4. فایل `App.js` (در `src`)
```javascript
// src/App.js
import React, { useState, useEffect } from 'react';
import Mario from './components/Mario';
import Coin from './components/Coin';
import './App.css';
const App = () => {
const [marioPosition, setMarioPosition] = useState({ x: 50, y: 50 });
const [coins, setCoins] = useState([]);
const [score, setScore] = useState(0);
const [gravity, setGravity] = useState(0);
const [isJumping, setIsJumping] = useState(false);
useEffect(() => {
const handleKeyDown = (event) => {
if (event.key === 'ArrowRight') {
setMarioPosition((pos) => ({ ...pos, x: pos.x + 10 }));
} else if (event.key === 'ArrowLeft') {
setMarioPosition((pos) => ({ ...pos, x: pos.x - 10 }));
} else if (event.key === 'ArrowUp' && !isJumping) {
setIsJumping(true);
setGravity(-15);
}
};
const spawnCoin = () => {
const newCoin = {
x: Math.random() * window.innerWidth,
y: Math.random() * 100 + 50, // ارتفاع سکه
};
setCoins((prev) => [...prev, newCoin]);
};
const gameLoop = setInterval(() => {
spawnCoin();
setGravity((prev) => prev + 1); // گرانش
setMarioPosition((pos) => ({
x: pos.x,
y: Math.max(pos.y + gravity, 50), // حداقل ارتفاع
}));
if (isJumping && gravity > 0) {
setIsJumping(false);
}
setCoins((prev) =>
prev.filter((coin) => {
if (
Math.abs(coin.x - marioPosition.x) < 50 &&
Math.abs(coin.y - marioPosition.y) < 50
) {
setScore((s) => s + 1); // افزایش امتیاز
return false; // سکه جمع‌آوری شده است
}
return true;
})
);
}, 100);
document.addEventListener('keydown', handleKeyDown);
return () => {
clearInterval(gameLoop);
document.removeEventListener('keydown', handleKeyDown);
};
}, [marioPosition, gravity, isJumping]);
const handleReset = () => {
setMarioPosition({ x: 50, y: 50 });
setCoins([]);
setScore(0);
};
return (
بازی ماریو
امتیاز: {score}
{coins.map((coin, index) => (
))}
);
};
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: 400px;
border: 1px solid #333;
overflow: hidden;
margin: 0 auto;
background-color: #87CEEB; /* آسمان آبی */
}
button {
margin-top: 20px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
}
button:hover {
background-color: #218838;
}
```
##### 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 mario-game
```
3. **وارد شدن به پوشه پروژه**:
```bash
cd mario-game
```
4. **جایگزینی فایل‌ها**: فایل‌های `App.js`, `Mario.js`, `Coin.js`, `App.css`, و `index.js` را با کدهای بالا جایگزین کنید.
5. **اجرای پروژه**: با استفاده از فرمان زیر، پروژه را اجرا کنید:
```bash
npm start
```
### نتیجه‌گیری
این بازی ماریو به کاربران این امکان را می‌دهد که شخصیت ماریو را کنترل کنند و سکه‌ها را جمع‌آوری کنند. با استفاده از این پروژه، شما میتوانید با مفاهیم اساسی ReactJS، JSX و CSS آشنا شوید. میتوانید این پروژه را گسترش دهید و ویژگی‌های جدیدی مانند دشمنان، سطوح مختلف و یا انیمیشن‌های بیشتر را اضافه کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی ماریو ساده با استفاده از ReactJS و کد منبع می‌باشد
