کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **بازی مسابقه ماشین** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به کاربران اجازه می‌دهد تا ماشین خود را در یک پیست مسابقه کنترل کنند و از برخورد با موانع جلوگیری کنند.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی مسابقه ماشین ایجاد می‌کنیم.
```html
بازی مسابقه ماشین
```
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
#gameArea {
width: 300px;
height: 600px;
background-color: #ddd;
position: relative;
overflow: hidden;
border: 2px solid #333;
}
#car {
width: 40px;
height: 80px;
background-color: red;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
```
### 3. **JavaScript**
منطق بازی با استفاده از JavaScript پیاده‌سازی شده است. این بخش شامل حرکت ماشین و ایجاد موانع تصادفی است.
```javascript
const car = document.getElementById('car');
const gameArea = document.getElementById('gameArea');
let carPosition = gameArea.clientWidth / 2 - 20;
let obstacleArray = [];
let gameInterval;
let score = 0;
// حرکت ماشین
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') {
carPosition -= 15;
if (carPosition < 0) carPosition = 0;
} else if (event.key === 'ArrowRight') {
carPosition += 15;
if (carPosition > gameArea.clientWidth - 40) carPosition = gameArea.clientWidth - 40;
}
car.style.left = carPosition + 'px';
});
// تولید موانع
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.classList.add('obstacle');
obstacle.style.width = Math.random() * 100 + 20 + 'px';
obstacle.style.height = '20px';
obstacle.style.backgroundColor = 'black';
obstacle.style.position = 'absolute';
obstacle.style.left = Math.random() * (gameArea.clientWidth - 20) + 'px';
obstacle.style.top = '0px';
gameArea.appendChild(obstacle);
obstacleArray.push(obstacle);
}
// حرکت موانع
function moveObstacles() {
for (let i = 0; i < obstacleArray.length; i++) {
const obstacle = obstacleArray[i];
let obstacleTop = parseInt(obstacle.style.top);
obstacleTop += 5;
obstacle.style.top = obstacleTop + 'px';
// برخورد با ماشین
if (obstacleTop > 600) {
obstacleArray.splice(i, 1);
gameArea.removeChild(obstacle);
score++;
} else if (obstacleTop + 20 >= gameArea.clientHeight - 10 &&
parseInt(obstacle.style.left) > carPosition &&
parseInt(obstacle.style.left) < carPosition + 40) {
alert(`بازی تمام شد! امتیاز شما: ${score}`);
clearInterval(gameInterval);
document.location.reload();
}
}
}
// شروع بازی
function startGame() {
gameInterval = setInterval(() => {
createObstacle();
moveObstacles();
}, 1000);
}
startGame();
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان بازی و ناحیه بازی (`gameArea`) است که ماشین و موانع در آن قرار می‌گیرند.
- یک ماشین به شکل یک `div` ایجاد شده است.
2. **CSS**:
- طراحی ساده برای ایجاد ناحیه بازی و مشخص کردن اندازه ماشین.
- رنگ پس‌زمینه و رنگ ماشین نیز مشخص شده است.
3. **JavaScript**:
- با استفاده از رویداد `keydown`، کاربر می‌تواند ماشین را به چپ و راست حرکت دهد.
- تابع `createObstacle` برای تولید موانع تصادفی استفاده می‌شود.
- تابع `moveObstacles` مسئول حرکت موانع به سمت پایین و بررسی برخورد آن‌ها با ماشین است.
- با برخورد ماشین به موانع، بازی تمام می‌شود و امتیاز کاربر نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **بازی مسابقه ماشین** یک مثال عالی از استفاده از JavaScript برای ایجاد یک بازی تعاملی است. شما میتوانید این بازی را گسترش دهید و ویژگی‌های بیشتری مانند امتیازدهی، زمان‌سنج، یا افزایش سرعت موانع اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی مسابقه ماشین** با استفاده از HTML، CSS و JavaScript می‌باشد
