مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه **بازی مار (Snake Game)** با استفاده از HTML، CSS و JavaScript

دانلود پروژه **بازی مار (Snake Game)** با استفاده از HTML، CSS و JavaScript

قیمت: 80,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد


 در اینجا یک پروژه ساده برای ایجاد یک **بازی مار (Snake Game)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به بازیکن اجازه می‌دهد که با کنترل مار، میوه‌ها را بخورد و طول آن را افزایش دهد. هدف بازی، خوردن بیشترین تعداد میوه‌ها و جلوگیری از برخورد با دیواره‌ها یا بدن مار است.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی مار ایجاد می‌کنیم.
 
```html
   
   
    بازی مار
   
   
       

بازی مار

       
       
امتیاز: 0
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.container {
    text-align: center;
}
 
canvas {
    border: 2px solid #333;
    background-color: #fff;
}
 
.score {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}
```
 
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش بازی مار را مدیریت می‌کند و شامل منطق حرکتی، برخوردها و امتیازدهی است.
 
```javascript
const canvas = document.getElementById('snakeGame');
const ctx = canvas.getContext('2d');
const box = 20;
let score = 0;
 
// مار و میوه
let snake = [{ x: 9 * box, y: 9 * box }];
let fruit = {
    x: Math.floor(Math.random() * 19 + 1) * box,
    y: Math.floor(Math.random() * 19 + 1) * box,
};
 
// کنترل حرکات مار
let d;
document.addEventListener('keydown', direction);
function direction(event) {
    if (event.keyCode === 37 && d !== 'RIGHT') {
        d = 'LEFT';
    } else if (event.keyCode === 38 && d !== 'DOWN') {
        d = 'UP';
    } else if (event.keyCode === 39 && d !== 'LEFT') {
        d = 'RIGHT';
    } else if (event.keyCode === 40 && d !== 'UP') {
        d = 'DOWN';
    }
}
 
// تابعی برای رسم بازی
function draw() {
    ctx.fillStyle = 'lightgreen';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    // رسم میوه
    ctx.fillStyle = 'red';
    ctx.fillRect(fruit.x, fruit.y, box, box);
 
    // رسم مار
    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = (i === 0) ? 'green' : 'white';
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
        ctx.strokeStyle = 'black';
        ctx.strokeRect(snake[i].x, snake[i].y, box, box);
    }
 
    // موقعیت جدید مار
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;
 
    if (d === 'LEFT') snakeX -= box;
    if (d === 'UP') snakeY -= box;
    if (d === 'RIGHT') snakeX += box;
    if (d === 'DOWN') snakeY += box;
 
    // خوردن میوه
    if (snakeX === fruit.x && snakeY === fruit.y) {
        score++;
        document.getElementById('score').innerText = score;
        fruit = {
            x: Math.floor(Math.random() * 19 + 1) * box,
            y: Math.floor(Math.random() * 19 + 1) * box,
        };
    } else {
        snake.pop(); // حذف آخرین بخش مار
    }
 
    // اضافه کردن موقعیت جدید مار
    let newHead = { x: snakeX, y: snakeY };
 
    // بررسی برخورد با دیواره‌ها یا بدن مار
    if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
        clearInterval(game);
        alert('بازی تمام شد! امتیاز شما: ' + score);
    }
 
    snake.unshift(newHead); // اضافه کردن بخش جدید به مار
}
 
// بررسی برخورد با بدن مار
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;
}
 
// شروع بازی
let game = setInterval(draw, 100);
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، بوم (canvas) برای رسم بازی و بخشی برای نمایش امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
   - **مار و میوه**: تعریف موقعیت اولیه مار و میوه.
   - **کنترل حرکات**: تنظیم رویدادهای کیبورد برای کنترل جهت حرکت مار.
   - **تابع draw**: رسم بوم، میوه و مار، و بررسی برخوردها.
   - **امتیازدهی**: افزایش امتیاز در صورت خوردن میوه و نمایش آن.
   - **پایان بازی**: بررسی برخورد با دیواره‌ها یا بدن مار و پایان بازی در صورت برخورد.
 
### نتیجه‌گیری
این پروژه **بازی مار** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری بوم (canvas)، مدیریت رویدادها و استفاده از حلقه‌های زمانی است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند سطوح مختلف سختی، صداگذاری یا قابلیت‌های بیشتر برای مار اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی مار (Snake Game)** با استفاده از HTML، CSS و JavaScript می‌باشد