کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در این پروژه، یک **بازی ماشین‌سواری** ساده با استفاده از HTML، CSS و JavaScript پیاده‌سازی شده است. این بازی به شما امکان می‌دهد که یک ماشین را در جاده‌ای پر از موانع حرکت دهید و سعی کنید برخوردی با ماشین‌های دیگر نداشته باشید. این نوع پروژه‌ها مناسب برای تمرین استفاده از انیمیشن‌ها، مدیریت رویدادها و تعامل با صفحه از طریق جاوا اسکریپت هستند.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ماشین‌سواری ایجاد می‌کنیم.
```html
بازی ماشین‌سواری
```
### 2. **CSS**
برای طراحی ظاهری بازی و ایجاد یک جاده با ماشین‌های در حال حرکت، از CSS استفاده می‌کنیم.
```css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
}
.game-area {
position: relative;
width: 400px;
height: 600px;
background: linear-gradient(#737373, #4a4a4a);
overflow: hidden;
border: 5px solid #fff;
}
.car {
position: absolute;
width: 50px;
height: 100px;
background-color: red;
bottom: 10px;
left: 175px;
}
.obstacle {
position: absolute;
width: 50px;
height: 100px;
background-color: blue;
}
```
### 3. **JavaScript**
منطق بازی و حرکت ماشین را با استفاده از جاوا اسکریپت پیاده‌سازی می‌کنیم.
```javascript
const gameArea = document.querySelector('.game-area');
const playerCar = document.getElementById('playerCar');
let isGameRunning = true;
let playerPosition = 175;
// تابع کنترل حرکت ماشین
function moveCar(event) {
if (event.key === 'ArrowLeft' && playerPosition > 0) {
playerPosition -= 25; // حرکت به سمت چپ
} else if (event.key === 'ArrowRight' && playerPosition < 350) {
playerPosition += 25; // حرکت به سمت راست
}
playerCar.style.left = playerPosition + 'px';
}
// اضافه کردن رویداد برای حرکت ماشین
document.addEventListener('keydown', moveCar);
// ایجاد موانع در بازی
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.classList.add('obstacle');
obstacle.style.top = '0px';
obstacle.style.left = Math.floor(Math.random() * 350) + 'px';
gameArea.appendChild(obstacle);
moveObstacle(obstacle);
}
// حرکت موانع به سمت پایین
function moveObstacle(obstacle) {
let obstaclePosition = 0;
function fall() {
if (obstaclePosition < 600 && isGameRunning) {
obstaclePosition += 5;
obstacle.style.top = obstaclePosition + 'px';
requestAnimationFrame(fall);
} else {
obstacle.remove();
}
// چک کردن برخورد با ماشین
if (
obstaclePosition > 500 &&
playerPosition < parseInt(obstacle.style.left) + 50 &&
playerPosition + 50 > parseInt(obstacle.style.left)
) {
alert('بازی تمام شد!');
isGameRunning = false;
}
}
requestAnimationFrame(fall);
}
// ایجاد موانع به صورت مداوم
setInterval(() => {
if (isGameRunning) {
createObstacle();
}
}, 2000);
```
### توضیحات کد:
1. **HTML**:
- **منطقه بازی**: جایی که بازی در آن انجام می‌شود و ماشین و موانع در این منطقه نمایش داده می‌شوند.
- **ماشین بازیکن**: با یک عنصر div که با CSS طراحی شده است، نمایش داده می‌شود.
2. **CSS**:
- **ظاهر بازی**: جاده با رنگ خاکستری و حاشیه سفید به عنوان منطقه بازی طراحی شده است.
- **ماشین و موانع**: ماشین بازیکن به رنگ قرمز و موانع به رنگ آبی طراحی شده‌اند.
3. **JavaScript**:
- **حرکت ماشین بازیکن**: با استفاده از رویداد کلیدهای چپ و راست، ماشین بازیکن به چپ و راست حرکت می‌کند.
- **ایجاد و حرکت موانع**: موانع به صورت تصادفی در بالای منطقه بازی ایجاد می‌شوند و به سمت پایین حرکت می‌کنند.
- **برخورد ماشین با موانع**: هنگامی که ماشین بازیکن با یکی از موانع برخورد می‌کند، پیام "بازی تمام شد!" نمایش داده شده و بازی متوقف می‌شود.
### نتیجه‌گیری
این پروژه **بازی ماشین‌سواری** یک مثال عالی برای یادگیری استفاده از انیمیشن‌ها، رویدادها و منطق بازی با استفاده از جاوا اسکریپت است. شما میتوانید این بازی را گسترش دهید و ویژگی‌های بیشتری مانند افزایش سرعت موانع، ثبت امتیازات و طراحی گرافیکی پیشرفته‌تر اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی ماشین‌سواری** ساده با استفاده از HTML، CSS و JavaScript می‌باشد
