کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد بازی **ماز (Maze)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به بازیکن اجازه می‌دهد که از نقطه شروع به نقطه پایان یک ماز حرکت کند.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ماز ایجاد می‌کنیم.
```html
بازی ماز
بازی ماز
```
### 2. **CSS**
برای طراحی ظاهری بازی ماز از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
margin-top: 20px;
}
.maze-container {
display: grid;
grid-template-columns: repeat(10, 40px);
grid-template-rows: repeat(10, 40px);
gap: 2px;
margin-top: 20px;
}
.cell {
width: 40px;
height: 40px;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
.wall {
background-color: #000;
}
.start {
background-color: #28a745;
}
.end {
background-color: #dc3545;
}
.player {
background-color: #ffc107;
}
```
### 3. **JavaScript**
در نهایت منطق بازی ماز را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
document.addEventListener('DOMContentLoaded', () => {
const mazeContainer = document.getElementById('maze-container');
const width = 10;
const height = 10;
let playerPosition = { x: 0, y: 0 };
// ایجاد ماز
function createMaze() {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const cell = document.createElement('div');
cell.classList.add('cell');
if (x === 0 && y === 0) {
cell.classList.add('start', 'player');
} else if (x === width - 1 && y === height - 1) {
cell.classList.add('end');
} else if (Math.random() > 0.7) {
cell.classList.add('wall');
}
mazeContainer.appendChild(cell);
}
}
}
// بازنشانی ماز
function resetMaze() {
mazeContainer.innerHTML = '';
playerPosition = { x: 0, y: 0 };
createMaze();
}
// حرکت بازیکن
function movePlayer(direction) {
const currentIndex = playerPosition.y * width + playerPosition.x;
let newIndex;
switch (direction) {
case 'ArrowUp':
if (playerPosition.y > 0) {
newIndex = (playerPosition.y - 1) * width + playerPosition.x;
}
break;
case 'ArrowDown':
if (playerPosition.y < height - 1) {
newIndex = (playerPosition.y + 1) * width + playerPosition.x;
}
break;
case 'ArrowLeft':
if (playerPosition.x > 0) {
newIndex = playerPosition.y * width + (playerPosition.x - 1);
}
break;
case 'ArrowRight':
if (playerPosition.x < width - 1) {
newIndex = playerPosition.y * width + (playerPosition.x + 1);
}
break;
}
if (newIndex !== undefined) {
const cells = document.querySelectorAll('.cell');
if (!cells[newIndex].classList.contains('wall')) {
cells[currentIndex].classList.remove('player');
cells[newIndex].classList.add('player');
playerPosition = {
x: newIndex % width,
y: Math.floor(newIndex / width)
};
// بررسی رسیدن به پایان
if (cells[newIndex].classList.contains('end')) {
setTimeout(() => {
alert('تبریک! شما به مقصد رسیدید!');
resetMaze();
}, 100);
}
}
}
}
// کنترل کلیدهای جهت
function control(e) {
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
movePlayer(e.key);
}
}
document.addEventListener('keyup', control);
// رویداد دکمه بازنشانی
document.getElementById('resetBtn').addEventListener('click', resetMaze);
createMaze();
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، ماز و دکمه شروع دوباره است.
2. **CSS**: طراحی برای ماز و سلول‌ها. سلول‌های ماز شامل کلاس‌هایی مانند `wall` برای دیوار، `start` برای نقطه شروع، `end` برای مقصد و `player` برای نشان دادن موقعیت بازیکن هستند.
3. **JavaScript**:
- **ایجاد ماز**: یک شبکه 10x10 ایجاد می‌کند و به‌طور تصادفی دیوارها را قرار می‌دهد.
- **بازنشانی ماز**: ماز را پاک کرده و از نو ایجاد می‌کند.
- **حرکت بازیکن**: بازیکن می‌تواند با کلیدهای جهت (`ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight`) حرکت کند.
- **کنترل پایان بازی**: اگر بازیکن به سلولی با کلاس `end` برسد، بازی تمام می‌شود و پیامی نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **بازی ماز** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، مدیریت رویدادهای صفحه‌کلید و منطق بازی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند طراحی پیچیده‌تر ماز یا زمان‌بندی برای رسیدن به مقصد اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه بازی **ماز (Maze)** با استفاده از HTML، CSS و JavaScript می‌باشد
