کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی تیراندازی (Shooting Game) با JavaScript**
در این پروژه، یک بازی تیراندازی ساده با استفاده از HTML، CSS و JavaScript ایجاد می‌کنیم. در این بازی، کاربر می‌تواند با استفاده از ماوس یا کیبورد تیراندازی کند و هدف او هدف قرار دادن دشمنان متحرک است.
### 1. **HTML**
ابتدا ساختار HTML بازی را ایجاد می‌کنیم.
```html
بازی تیراندازی
بازی تیراندازی
```
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #282c34;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: white;
}
.container {
text-align: center;
}
canvas {
border: 2px solid #fff;
background-color: #444;
}
#score {
font-size: 24px;
margin-top: 10px;
}
#restartBtn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این کد شامل منطق برای تیراندازی، هدف قرار دادن و مدیریت وضعیت بازی است.
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let bullets = [];
let enemies = [];
let score = 0;
let gameInterval;
// شلیک گلوله
function shoot(x, y) {
bullets.push({ x: x, y: y });
}
// ایجاد دشمن
function createEnemy() {
const x = Math.random() * canvas.width;
enemies.push({ x: x, y: 0, width: 50, height: 50 });
}
// کشیدن گلوله
function drawBullets() {
ctx.fillStyle = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, 5, 10);
bullet.y -= 5; // حرکت گلوله به سمت بالا
});
}
// کشیدن دشمن
function drawEnemies() {
ctx.fillStyle = 'red';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
enemy.y += 1; // حرکت دشمن به سمت پایین
});
}
// بررسی برخورد
function checkCollision() {
bullets = bullets.filter(bullet => {
return !enemies.some(enemy => {
if (bullet.x >= enemy.x && bullet.x <= enemy.x + enemy.width && bullet.y <= enemy.y + enemy.height) {
score++;
return true; // برخورد
}
return false;
});
});
}
// کشیدن همه اشیاء
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBullets();
drawEnemies();
checkCollision();
// حذف دشمنان خارج از صفحه
enemies = enemies.filter(enemy => enemy.y < canvas.height);
// نمایش امتیاز
document.getElementById('score').textContent = 'امتیاز: ' + score;
}
// شروع بازی
function startGame() {
document.addEventListener('click', function(event) {
const x = event.clientX - canvas.getBoundingClientRect().left;
const y = canvas.height - 10;
shoot(x, y);
});
createEnemy(); // ایجاد اولین دشمن
gameInterval = setInterval(() => {
if (Math.random() < 0.02) {
createEnemy();
}
draw();
}, 100);
}
// دکمه شروع دوباره
document.getElementById('restartBtn').addEventListener('click', () => {
bullets = [];
enemies = [];
score = 0;
document.getElementById('score').textContent = 'امتیاز: 0';
clearInterval(gameInterval);
startGame();
});
// شروع بازی
startGame();
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، بوم بازی برای نمایش تیراندازی و دشمنان، و دکمه‌ای برای شروع دوباره.
2. **CSS**: طراحی زیبا برای بوم بازی و رابط کاربری.
3. **JavaScript**:
- **متغیرها**: برای ذخیره وضعیت بازی، شامل گلوله‌ها، دشمنان و امتیاز.
- **شلیک گلوله**: با کلیک ماوس.
- **کشیدن گلوله و دشمن**: با استفاده از متدهای بوم.
- **بررسی برخورد**: با دشمنان و به‌روزرسانی امتیاز.
- **کشیدن همه اشیاء**: و به‌روزرسانی وضعیت بازی.
### نتیجه‌گیری
این پروژه **بازی تیراندازی** یک مثال عالی برای یادگیری نحوه کار با HTML5 Canvas و منطق بازی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند اضافه کردن انواع مختلف دشمنان، سطح‌های دشواری، و یا افزودن جلوه‌های صوتی به بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی تیراندازی (Shooting Game) با JavaScript** می‌باشد
