کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک بازی ماریو با استفاده از **Node.js** یکی از پروژه‌های جالب و چالش‌برانگیز است که می‌تواند به شما در یادگیری مفاهیم مختلف توسعه بازی و برنامه‌نویسی وب کمک کند. در این پروژه، ما از Node.js برای راه‌اندازی سرور استفاده خواهیم کرد و از HTML5 و JavaScript برای ساخت بازی استفاده می‌کنیم.
### ویژگی‌های اصلی پروژه
1. **کنترل ماریو**: بازیکن می‌تواند ماریو را به جلو و عقب حرکت دهد و پرش کند.
2. **جمع‌آوری سکه‌ها**: ماریو می‌تواند سکه‌ها را جمع‌آوری کند.
3. **موانع**: بازی دارای موانع و دشمنان است که بازیکن باید از آن‌ها دوری کند.
4. **استفاده از Node.js برای مدیریت سرور**: این پروژه از Node.js برای ایجاد یک سرور بازی استفاده می‌کند.
### مراحل پیاده‌سازی پروژه
#### ۱. نصب Node.js و راه‌اندازی پروژه
ابتدا مطمئن شوید که **Node.js** روی سیستم شما نصب شده است. سپس یک پوشه جدید برای پروژه‌تان ایجاد کرده و به آن پوشه بروید:
```bash
mkdir mario-game
cd mario-game
npm init -y
```
#### ۲. نصب Express
برای ساخت سرور، از **Express** استفاده خواهیم کرد. آن را با دستور زیر نصب کنید:
```bash
npm install express
```
#### ۳. ساختار پروژه
حالا ساختار زیر را برای پروژه‌تان ایجاد کنید:
```
mario-game/
│
├── public/
│ ├── index.html
│ ├── style.css
│ └── game.js
│
└── server.js
```
#### ۴. نوشتن کد سرور (server.js)
فایل `server.js` را با کد زیر پر کنید:
```javascript
const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;
// تنظیم مسیرها
app.use(express.static(path.join(__dirname, 'public')));
// راه‌اندازی سرور
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
```
#### ۵. نوشتن کد HTML (index.html)
فایل `index.html` را با کد زیر پر کنید:
```html
بازی ماریو
```
#### ۶. نوشتن کد CSS (style.css)
فایل `style.css` را با کد زیر پر کنید:
```css
body {
margin: 0;
overflow: hidden;
background-color: #70c5ce;
}
#gameArea {
position: relative;
width: 800px;
height: 400px;
margin: auto;
border: 2px solid #000;
overflow: hidden;
}
#mario {
position: absolute;
width: 50px;
height: 50px;
background-image: url('https://img.icons8.com/color/48/000000/mario.png');
background-size: cover;
bottom: 0;
left: 100px;
}
#coin {
position: absolute;
width: 30px;
height: 30px;
background-image: url('https://img.icons8.com/color/48/000000/coin.png');
background-size: cover;
top: 10px;
left: 300px;
}
```
#### ۷. نوشتن کد بازی (game.js)
فایل `game.js` را با کد زیر پر کنید:
```javascript
const mario = document.getElementById('mario');
const coin = document.getElementById('coin');
const gameArea = document.getElementById('gameArea');
let marioPosition = 100;
let isJumping = false;
let score = 0;
// کنترل ماریو
document.addEventListener('keydown', (event) => {
if (event.code === 'ArrowRight') {
moveMario(10);
} else if (event.code === 'ArrowLeft') {
moveMario(-10);
} else if (event.code === 'Space' && !isJumping) {
jump();
}
});
// حرکت ماریو
function moveMario(step) {
marioPosition += step;
mario.style.left = marioPosition + 'px';
checkCoinCollision();
}
// پرش ماریو
function jump() {
isJumping = true;
let jumpHeight = 0;
const jumpInterval = setInterval(() => {
if (jumpHeight < 100) {
jumpHeight += 5;
mario.style.bottom = jumpHeight + 'px';
} else {
clearInterval(jumpInterval);
const fallInterval = setInterval(() => {
if (jumpHeight > 0) {
jumpHeight -= 5;
mario.style.bottom = jumpHeight + 'px';
} else {
clearInterval(fallInterval);
isJumping = false;
}
}, 20);
}
}, 20);
}
// بررسی برخورد با سکه
function checkCoinCollision() {
const marioRect = mario.getBoundingClientRect();
const coinRect = coin.getBoundingClientRect();
if (
marioRect.x < coinRect.x + coinRect.width &&
marioRect.x + marioRect.width > coinRect.x &&
marioRect.y < coinRect.y + coinRect.height &&
marioRect.y + marioRect.height > coinRect.y
) {
score++;
coin.style.left = Math.random() * (gameArea.clientWidth - 30) + 'px';
coin.style.top = Math.random() * (gameArea.clientHeight - 30) + 'px';
alert('امتیاز: ' + score);
}
}
```
### توضیحات کد
1. **تنظیمات سرور**:
- با استفاده از Express، یک سرور ساده راه‌اندازی می‌شود که فایل‌های استاتیک را از پوشه `public` سرو می‌کند.
2. **کد HTML**:
- در اینجا ساختار اصلی بازی و عناصر بازی (ماریو و سکه) تعریف شده‌اند.
3. **کد CSS**:
- استایل‌های مربوط به بازی، مانند پس‌زمینه، اندازه و موقعیت ماریو و سکه، تعریف شده‌اند.
4. **کد JavaScript**:
- با استفاده از **event listeners**، ورودی‌های کاربر (کلیدهای راست، چپ و اسپیس) برای کنترل ماریو مدیریت می‌شوند.
- ماریو می‌تواند به چپ و راست حرکت کند و بپرد.
- همچنین، وقتی ماریو به سکه برخورد کند، امتیاز بازیکن افزایش می‌یابد و سکه در موقعیت تصادفی جدید قرار می‌گیرد.
### نحوه اجرای پروژه
1. در پوشه پروژه، دستور زیر را برای راه‌اندازی سرور اجرا کنید:
```bash
node server.js
```
2. حالا میتوانید مرورگر خود را باز کنید و به آدرس زیر بروید:
```
http://localhost:3000
```
### نتیجه‌گیری
این پروژه بازی ماریو ساده به شما کمک می‌کند تا با مفاهیم پایه توسعه بازی و برنامه‌نویسی Node.js آشنا شوید. شما میتوانید با افزودن قابلیت‌های بیشتر مانند دشمنان، مراحل مختلف، و سیستم امتیازدهی پیچیدگی بازی را افزایش دهید. Node.js و JavaScript ابزارهای قدرتمندی برای ساخت بازی‌های تعاملی و جالب هستند و با استفاده از این پروژه میتوانید تسلط بیشتری بر آن‌ها پیدا کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی ماریو با استفاده از **Node.js می‌باشد
