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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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


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

بازی مار

   
       
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی مار از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f4f4;
    height: 100vh;
    justify-content: center;
    margin: 0;
}
 
h1 {
    margin-bottom: 20px;
}
 
.game-container {
    border: 2px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این کد، منطق حرکت مار، برخوردها و تولید غذا را مدیریت می‌کند.
 
```javascript
window.onload = function () {
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
 
    const box = 20; // اندازه هر مربع از مار و غذا
    let snake = []; // آرایه‌ای که مار را نشان می‌دهد
    snake[0] = { x: 9 * box, y: 10 * box }; // شروع مار
 
    let food = {
        x: Math.floor(Math.random() * 19) * box,
        y: Math.floor(Math.random() * 19) * box
    }; // موقعیت تصادفی غذا
 
    let score = 0;
 
    let direction;
 
    // کنترل جهت حرکت مار
    document.addEventListener("keydown", directionControl);
 
    function directionControl(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 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;
    }
 
    function draw() {
        // پاک‌سازی بوم
        ctx.fillStyle = "#f4f4f4";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
        // کشیدن مار
        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 = "white";
            ctx.strokeRect(snake[i].x, snake[i].y, box, box);
        }
 
        // کشیدن غذا
        ctx.fillStyle = "red";
        ctx.fillRect(food.x, food.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 = {
                x: Math.floor(Math.random() * 19) * box,
                y: Math.floor(Math.random() * 19) * 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);
    }
 
    let game = setInterval(draw, 100);
};
```
 
### توضیحات کد:
1. **HTML**: شامل یک بوم (`canvas`) برای نمایش بازی و عنوان.
2. **CSS**: طراحی ساده برای مرکزیت دادن بازی و رابط کاربری.
3. **JavaScript**:
   - **تعریف مار و غذا**: مار به صورت یک آرایه از نقاط و غذا به صورت یک نقطه تصادفی تعریف شده است.
   - **کنترل جهت‌ها**: از رویداد `keydown` برای کنترل جهت حرکت مار استفاده شده است.
   - **کشیدن بازی**: مار و غذا در بوم کشیده می‌شوند. سر مار به رنگ سبز و بقیه قسمت‌ها به رنگ سبز روشن هستند.
   - **حرکت مار**: در هر حرکت، سر مار جابجا شده و بخش جدید اضافه می‌شود.
   - **برخورد و اتمام بازی**: اگر مار با دیواره یا خودش برخورد کند، بازی متوقف شده و پیغام امتیاز نمایش داده می‌شود.
 
### نتیجه‌گیری
این پروژه **بازی مار** یک مثال خوب برای یادگیری اصول اولیه JavaScript مانند استفاده از `canvas`، مدیریت رویدادها و حرکت در بازی است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزایش سرعت با گذشت زمان یا اضافه کردن مانع‌ها به بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **مار (The Snake Game)** با استفاده از HTML، CSS و JavaScript می‌باشد