کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه "بازی ساده شهاب‌سنگ" با استفاده از جاوا اسکریپت
بازی "شهاب‌سنگ" یک بازی سرگرم‌کننده و چالش‌برانگیز است که با استفاده از جاوا اسکریپت و HTML5 Canvas ساخته شده است. در این بازی، بازیکن کنترل یک فضاپیما را بر عهده دارد که باید از برخورد با شهاب‌سنگ‌ها جلوگیری کند و امتیاز جمع‌آوری کند.
#### ویژگی‌های پروژه:
- **گرافیک ساده:** طراحی گرافیک بازی با استفاده از Canvas.
- **حرکت فضاپیما:** فضاپیما می‌تواند به چپ و راست حرکت کند و شلیک کند.
- **شهاب‌سنگ‌ها:** شهاب‌سنگ‌ها از بالای صفحه به پایین حرکت می‌کنند.
- **جمع‌آوری امتیاز:** بازیکن می‌تواند با شلیک به شهاب‌سنگ‌ها امتیاز کسب کند.
- **پایان بازی:** نمایش پیغام پایان بازی زمانی که با شهاب‌سنگ برخورد کند.
### کد منبع:
#### 1. فایل `index.html`
```html
Simple Asteroid Game
```
#### 2. فایل `app.js`
```javascript
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// متغیرهای بازی
let spaceship = {
x: canvas.width / 2 - 25,
y: canvas.height - 60,
width: 50,
height: 50,
speed: 5
};
let asteroids = [];
let bullets = [];
let score = 0;
let gameOver = false;
// تابع برای ایجاد شهاب‌سنگ
function createAsteroid() {
const asteroid = {
x: Math.random() * (canvas.width - 50),
y: -50,
width: 50,
height: 50,
speed: Math.random() * 3 + 1 // سرعت تصادفی
};
asteroids.push(asteroid);
}
// تابع برای رسم فضاپیما
function drawSpaceship() {
ctx.fillStyle = 'blue';
ctx.fillRect(spaceship.x, spaceship.y, spaceship.width, spaceship.height);
}
// تابع برای رسم شهاب‌سنگ‌ها
function drawAsteroids() {
ctx.fillStyle = 'red';
asteroids.forEach(asteroid => {
ctx.fillRect(asteroid.x, asteroid.y, asteroid.width, asteroid.height);
});
}
// تابع برای رسم گلوله‌ها
function drawBullets() {
ctx.fillStyle = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// تابع برای بررسی برخورد
function checkCollision() {
// بررسی برخورد با شهاب‌سنگ‌ها
for (let asteroid of asteroids) {
if (spaceship.x < asteroid.x + asteroid.width &&
spaceship.x + spaceship.width > asteroid.x &&
spaceship.y < asteroid.y + asteroid.height &&
spaceship.y + spaceship.height > asteroid.y) {
gameOver = true; // پایان بازی
}
}
// بررسی برخورد گلوله‌ها با شهاب‌سنگ‌ها
bullets.forEach((bullet, bulletIndex) => {
asteroids.forEach((asteroid, asteroidIndex) => {
if (bullet.x < asteroid.x + asteroid.width &&
bullet.x + bullet.width > asteroid.x &&
bullet.y < asteroid.y + asteroid.height &&
bullet.y + bullet.height > asteroid.y) {
asteroids.splice(asteroidIndex, 1); // حذف شهاب‌سنگ
bullets.splice(bulletIndex, 1); // حذف گلوله
score++; // افزایش امتیاز
}
});
});
}
// تابع برای بروزرسانی وضعیت بازی
function update() {
// حرکت شهاب‌سنگ‌ها
asteroids.forEach(asteroid => {
asteroid.y += asteroid.speed; // حرکت شهاب‌سنگ به پایین
});
// حذف شهاب‌سنگ‌های خارج از صفحه
asteroids = asteroids.filter(asteroid => asteroid.y < canvas.height);
// حرکت گلوله‌ها
bullets.forEach(bullet => {
bullet.y -= bullet.speed; // حرکت گلوله به بالا
});
// حذف گلوله‌های خارج از صفحه
bullets = bullets.filter(bullet => bullet.y > 0);
}
// تابع برای حلقه بازی
function gameLoop() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText("Game Over!", canvas.width / 2 - 70, canvas.height / 2);
ctx.font = '20px Arial';
ctx.fillText("Final Score: " + score, canvas.width / 2 - 70, canvas.height / 2 + 30);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSpaceship();
drawAsteroids();
drawBullets();
checkCollision();
update();
requestAnimationFrame(gameLoop);
}
// مدیریت رویدادها برای حرکت و شلیک
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft" && spaceship.x > 0) {
spaceship.x -= spaceship.speed; // حرکت به چپ
} else if (e.key === "ArrowRight" && spaceship.x < canvas.width - spaceship.width) {
spaceship.x += spaceship.speed; // حرکت به راست
} else if (e.key === " ") {
bullets.push({ x: spaceship.x + spaceship.width / 2 - 2, y: spaceship.y, width: 5, height: 10, speed: 5 }); // شلیک گلوله
}
});
// ایجاد شهاب‌سنگ‌ها هر چند ثانیه
setInterval(() => {
createAsteroid();
}, 1000);
// شروع حلقه بازی
gameLoop();
```
### توضیحات پروژه:
1. **HTML:** ساختار اصلی بازی را تشکیل می‌دهد و شامل یک عنصر `
2. **JavaScript:** منطق بازی را پیاده‌سازی می‌کند. شامل ویژگی‌های فضاپیما، شهاب‌سنگ‌ها، گلوله‌ها، سیستم امتیازدهی و حلقه بازی است.
3. **CSS:** برای زیباسازی ظاهر بازی استفاده می‌شود.
### نتیجه‌گیری:
این پروژه "بازی ساده شهاب‌سنگ" به شما این امکان را می‌دهد که با اصول برنامه‌نویسی بازی با استفاده از جاوا اسکریپت و HTML5 Canvas آشنا شوید. میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری به آن اضافه کنید، مانند سطوح مختلف، افزایش سرعت شهاب‌سنگ‌ها، یا طراحی گرافیک بهتر. این پروژه یک نقطه شروع عالی برای یادگیری توسعه بازی است.
