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

جزئیات محصول

دانلود پروژه بازی بازی **مار (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;
    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;
}
 
#gameCanvas {
    border: 1px solid #333;
    background-color: #000;
}
 
#score {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
}
 
#restartBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل مدیریت حرکت مار، تولید غذا و بررسی برخورد با دیوار یا خود مار است.
 
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDiv = document.getElementById('score');
const restartBtn = document.getElementById('restartBtn');
 
let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: 0 };
let food = { x: 0, y: 0 };
let score = 0;
let gameInterval;
 
// شروع بازی
function startGame() {
    resetGame();
    generateFood();
    gameInterval = setInterval(updateGame, 100);
}
 
// بروزرسانی بازی
function updateGame() {
    // حرکت مار
    const newHead = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
 
    // بررسی برخورد با خود یا دیوار
    if (isGameOver(newHead)) {
        clearInterval(gameInterval);
        alert('بازی تمام شد! امتیاز شما: ' + score);
        restartBtn.style.display = 'block';
        return;
    }
 
    // بررسی خوردن غذا
    if (newHead.x === food.x && newHead.y === food.y) {
        score++;
        scoreDiv.textContent = 'امتیاز: ' + score;
        generateFood();
    } else {
        snake.pop(); // حذف آخرین بخش از مار
    }
 
    snake.unshift(newHead); // اضافه کردن سر جدید به مار
    drawGame();
}
 
// بررسی برخورد با خود یا دیوار
function isGameOver(head) {
    if (head.x < 0 || head.x >= canvas.width / 10 || head.y < 0 || head.y >= canvas.height / 10) {
        return true; // برخورد با دیوار
    }
    for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            return true; // برخورد با خود
        }
    }
    return false;
}
 
// تولید غذا
function generateFood() {
    food.x = Math.floor(Math.random() * (canvas.width / 10));
    food.y = Math.floor(Math.random() * (canvas.height / 10));
}
 
// رسم بازی
function drawGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // رسم مار
    snake.forEach((segment, index) => {
        ctx.fillStyle = index === 0 ? 'lime' : 'green'; // رنگ سر و بدنه مار
        ctx.fillRect(segment.x * 10, segment.y * 10, 10, 10);
    });
 
    // رسم غذا
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
}
 
// کنترل حرکت مار
document.addEventListener('keydown', function(event) {
    switch (event.key) {
        case 'ArrowUp':
            if (direction.y === 0) direction = { x: 0, y: -1 };
            break;
        case 'ArrowDown':
            if (direction.y === 0) direction = { x: 0, y: 1 };
            break;
        case 'ArrowLeft':
            if (direction.x === 0) direction = { x: -1, y: 0 };
            break;
        case 'ArrowRight':
            if (direction.x === 0) direction = { x: 1, y: 0 };
            break;
    }
});
 
// راه‌اندازی مجدد بازی
restartBtn.addEventListener('click', startGame);
 
// راه‌اندازی بازی
function resetGame() {
    snake = [{ x: 10, y: 10 }];
    direction = { x: 0, y: 0 };
    score = 0;
    scoreDiv.textContent = 'امتیاز: 0';
    restartBtn.style.display = 'none';
}
 
// شروع بازی
startGame();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، کانواس برای رسم مار و غذا، نمایش امتیاز و دکمه برای بازی دوباره است.
2. **CSS**: طراحی ساده و زیبا برای ایجاد یک رابط کاربری کاربرپسند.
3. **JavaScript**:
   - **مدیریت بازی**: شامل تابع‌هایی برای شروع بازی، بروزرسانی وضعیت بازی، تولید غذا و بررسی برخورد است.
   - **کنترل حرکت مار**: کاربر می‌تواند با استفاده از کلیدهای جهت‌دار مار را کنترل کند.
   - **راهنمایی مجدد**: بازی مجدد با دکمه "بازی دوباره".
 
### نتیجه‌گیری
این پروژه **بازی مار** یک مثال عالی برای استفاده از مفاهیم JavaScript، مانند دستکاری DOM، رویدادهای کاربر و منطق شرطی است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزایش سرعت بازی با جمع‌آوری غذا یا اضافه کردن سطوح دشواری جدید اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی بازی **مار (Snake Game)** با استفاده از HTML، CSS و JavaScript می‌باشد