کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک بازی با دو ماشین (Two Cars Game) با استفاده از JavaScript یک پروژه جالب و سرگرم‌کننده است که به شما کمک می‌کند تا با مفاهیم برنامه‌نویسی مانند کار با رویدادها، انیمیشن‌ها و مدیریت بازی آشنا شوید. در این بازی، بازیکن باید با استفاده از کلیدهای جهت‌دار، دو ماشین را در یک جاده هدایت کند و از موانع بگذرد.
### ویژگی‌های اصلی پروژه
1. **کنترل دو ماشین**: بازیکن می‌تواند دو ماشین را به صورت همزمان کنترل کند.
2. **موانع تصادفی**: موانع به صورت تصادفی بر روی جاده ظاهر می‌شوند.
3. **امتیازدهی**: بازیکن با عبور از موانع، امتیاز کسب می‌کند.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کرده و کد زیر را در آن قرار دهید:
```html
بازی دو ماشین
بازی دو ماشین
```
#### ۲. استایل‌دهی با CSS
سپس یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
}
.game-container {
text-align: center;
}
.game {
position: relative;
width: 400px;
height: 600px;
background-color: #ccc;
overflow: hidden;
border: 2px solid #333;
border-radius: 10px;
}
.car {
position: absolute;
width: 60px;
height: 100px;
border-radius: 5px;
}
#car1 {
background-color: red;
left: 100px; /* ماشین اول در سمت چپ */
}
#car2 {
background-color: blue;
left: 250px; /* ماشین دوم در سمت راست */
}
.obstacle {
position: absolute;
width: 60px;
height: 100px;
background-color: black;
top: -100px; /* موانع از بالای صفحه شروع می‌شوند */
transition: top 0.5s;
}
#reset-button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
#reset-button:hover {
background-color: #45a049;
}
#score {
margin-top: 10px;
font-size: 20px;
}
```
#### ۳. اسکریپت JavaScript
در نهایت، یک فایل JavaScript به نام `script.js` ایجاد کرده و کد زیر را در آن قرار دهید:
```javascript
// انتخاب عناصر DOM
const game = document.getElementById('game');
const scoreValue = document.getElementById('score-value');
const resetButton = document.getElementById('reset-button');
// متغیرهای بازی
let car1, car2;
let score = 0;
let obstacles = [];
let gameInterval;
let obstacleInterval;
// تابع برای راه‌اندازی بازی
function startGame() {
score = 0;
scoreValue.textContent = score;
// ایجاد ماشین‌ها
car1 = createCar('car1', 'red', 100); // ماشین اول
car2 = createCar('car2', 'blue', 250); // ماشین دوم
// شروع ایجاد موانع
obstacleInterval = setInterval(createObstacle, 1500);
// شروع بازی
gameInterval = setInterval(updateGame, 20);
}
// تابع برای ایجاد ماشین
function createCar(id, color, left) {
const car = document.createElement('div');
car.id = id;
car.classList.add('car');
car.style.backgroundColor = color;
car.style.left = left + 'px';
game.appendChild(car);
return car;
}
// تابع برای ایجاد موانع
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.classList.add('obstacle');
obstacle.style.left = Math.random() * (game.clientWidth - 60) + 'px';
game.appendChild(obstacle);
obstacles.push(obstacle);
}
// تابع برای به‌روزرسانی بازی
function updateGame() {
obstacles.forEach((obstacle, index) => {
const obstacleTop = parseInt(obstacle.style.top);
obstacle.style.top = (obstacleTop + 5) + 'px'; // پایین آمدن موانع
// بررسی برخورد با ماشین‌ها
if (obstacleTop > game.clientHeight) {
obstacle.remove();
obstacles.splice(index, 1);
score++;
scoreValue.textContent = score; // افزایش امتیاز
}
if (isCollision(obstacle, car1) || isCollision(obstacle, car2)) {
alert('بازی تمام شد! امتیاز شما: ' + score);
resetGame();
}
});
}
// تابع برای بررسی برخورد
function isCollision(obstacle, car) {
const obstacleRect = obstacle.getBoundingClientRect();
const carRect = car.getBoundingClientRect();
return !(
obstacleRect.top > carRect.bottom ||
obstacleRect.bottom < carRect.top ||
obstacleRect.right < carRect.left ||
obstacleRect.left > carRect.right
);
}
// تابع برای بازنشانی بازی
function resetGame() {
clearInterval(gameInterval);
clearInterval(obstacleInterval);
obstacles.forEach(obstacle => obstacle.remove());
game.innerHTML = '';
startGame();
}
// مدیریت کنترل ماشین‌ها با کلیدهای جهت‌دار
document.addEventListener('keydown', (event) => {
const left = parseInt(car1.style.left);
const right = parseInt(car2.style.left);
if (event.key === 'ArrowLeft' && left > 0) {
car1.style.left = (left - 20) + 'px'; // حرکت ماشین اول به چپ
} else if (event.key === 'ArrowRight' && left < (game.clientWidth - 60)) {
car1.style.left = (left + 20) + 'px'; // حرکت ماشین اول به راست
} else if (event.key === 'a' && right > 0) {
car2.style.left = (right - 20) + 'px'; // حرکت ماشین دوم به چپ
} else if (event.key === 'd' && right < (game.clientWidth - 60)) {
car2.style.left = (right + 20) + 'px'; // حرکت ماشین دوم به راست
}
});
// دکمه بازنشانی
resetButton.addEventListener('click', resetGame);
// راه‌اندازی بازی
startGame();
```
### توضیحات کد
1. **تعریف عناصر بازی**: در این کد، عناصر بازی مانند ماشین‌ها و موانع با استفاده از DOM ایجاد می‌شوند.
2. **ایجاد ماشین**: تابع `createCar` برای ایجاد ماشین‌ها استفاده می‌شود و با توجه به رنگ و موقعیت آن‌ها تعریف می‌شود.
3. **ایجاد موانع**: تابع `createObstacle` موانع را به طور تصادفی در بالای صفحه ایجاد می‌کند.
4. **به‌روزرسانی بازی**: تابع `updateGame` به‌طور مکرر اجرا می‌شود و موقعیت موانع را به‌روزرسانی می‌کند و همچنین برخوردها را بررسی می‌کند.
5. **بررسی برخورد**: تابع `isCollision` برای تشخیص برخورد بین ماشین‌ها و موانع استفاده می‌شود.
6. **مدیریت کنترل ماشین‌ها**: بازیکن می‌تواند ماشین اول را با کلیدهای چپ و راست و ماشین دوم را با کلیدهای 'A' و 'D' کنترل کند.
7. **بازنشانی بازی**: در صورت برخورد، بازی بازنشانی می‌شود و امتیاز نهایی نمایش داده می‌شود.
### نحوه اجرای پروژه
1. تمامی فایل‌ها (`index.html`, `style.css`, `script.js`) را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید تا بازی اجرا شود.
### نتیجه‌گیری
این پروژه "بازی دو ماشین" با استفاده از JavaScript، HTML، و CSS یک تجربه تعاملی و سرگرم‌کننده را برای کاربران ارائه می‌دهد. میتوانید این پروژه را گسترش دهید، مثلاً با افزودن ویژگی‌های بیشتر مانند سطوح مختلف سختی، طراحی‌های جدید
برای ماشین‌ها، یا بهبود منطق امتیازدهی. این پروژه به شما کمک می‌کند تا با اصول برنامه‌نویسی JavaScript و منطق بازی آشنا شوید.
| صفحه قابل مشاهده:
دانلود پروژه بازی با دو ماشین (Two Cars Game) با استفاده از JavaScript می‌باشد
