کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی مار (Snake Game) با JavaScript**
در این پروژه، یک بازی مار ساده با استفاده از 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 {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
canvas {
border: 1px solid #000;
background-color: #e0e0e0;
}
#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');
const box = 20; // اندازه هر مربع
let snake = [{ x: 9 * box, y: 9 * box }];
let direction = null;
let food = generateFood();
let score = 0;
// شروع بازی
function startGame() {
document.addEventListener('keydown', changeDirection);
setInterval(draw, 100); // تغییر وضعیت هر 100 میلی‌ثانیه
}
// تغییر جهت مار
function changeDirection(event) {
if (event.keyCode === 37 && direction !== 'RIGHT') {
direction = 'LEFT';
} else if (event.keyCode === 38 && direction !== 'DOWN') {
direction = 'UP';
} else if (event.keyCode === 39 && direction !== 'LEFT') {
direction = 'RIGHT';
} else if (event.keyCode === 40 && direction !== 'UP') {
direction = 'DOWN';
}
}
// ایجاد غذا
function generateFood() {
const x = Math.floor(Math.random() * (canvas.width / box)) * box;
const y = Math.floor(Math.random() * (canvas.height / box)) * box;
return { x, y };
}
// کشیدن مار و غذا
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// کشیدن غذا
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
// کشیدن مار
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = (i === 0) ? 'green' : 'lightgreen';
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = 'darkgreen';
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
// موقعیت جدید مار
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
// برخورد با غذا
if (snakeX === food.x && snakeY === food.y) {
score++;
food = generateFood(); // تولید غذا جدید
} else {
snake.pop(); // حذف آخرین بخش مار
}
// اضافه کردن موقعیت جدید به سر مار
const newHead = { x: snakeX, y: snakeY };
// بررسی برخورد با دیوار یا خود مار
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(startGame);
alert('بازی تمام شد! امتیاز: ' + score);
document.getElementById('score').textContent = 'امتیاز: ' + score;
return;
}
snake.unshift(newHead); // اضافه کردن سر جدید مار
document.getElementById('score').textContent = 'امتیاز: ' + score; // نمایش امتیاز
}
// بررسی برخورد با خود مار
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
// دکمه شروع دوباره
document.getElementById('restartBtn').addEventListener('click', () => {
snake = [{ x: 9 * box, y: 9 * box }];
direction = null;
food = generateFood();
score = 0;
document.getElementById('score').textContent = 'امتیاز: 0';
startGame();
});
// شروع بازی
startGame();
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، بوم بازی برای نمایش مار و غذا، و دکمه‌ای برای شروع دوباره.
2. **CSS**: طراحی زیبا برای بوم بازی و رابط کاربری.
3. **JavaScript**:
- **متغیرها**: برای ذخیره وضعیت بازی، شامل مار، غذا و امتیاز.
- **تغییر جهت**: با استفاده از رویدادهای کلید.
- **کشیدن مار و غذا**: با استفاده از متدهای بوم.
- **بررسی برخورد**: با دیوارها و خود مار.
### نتیجه‌گیری
این پروژه **بازی مار** یک مثال عالی برای یادگیری نحوه کار با HTML5 Canvas و منطق بازی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند حالت‌های مختلف بازی، تنظیمات دشواری و یا افزودن جلوه‌های صوتی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی مار (Snake Game) با JavaScript** می‌باشد
