Click here for free DL of the app version that can save data.

No:48026

←

Prev Next

→

Snake Maze Game
Developer User20657｜Date and time 24/3/1 7:37:35
Build time 7.169 sec｜Game capacity 2.365KB｜

Script

Игра Змейка Лабиринт

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
        background-color: #f0f0f0;
    }

h1 {
        color: #333333;
    }

canvas {
        border: 1px solid black;
        margin: 20px auto;
    }
</style>
</head>
<body>
    <h1>Игра Змейка Лабиринт</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const blockSize = 20; // размер блока
        let snake = [{ x: 10, y: 10 }]; // начальное положение змейки
        let direction = "right"; // начальное направление движения

function drawSnake() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "green";
            snake.forEach((segment) => {
                ctx.fillRect(segment.x * blockSize, segment.y * blockSize, blockSize, blockSize);
            });
        }

function moveSnake() {
            const head = { x: snake[0].x, y: snake[0].y };

switch (direction) {
                case "up":
                    head.y -= 1;
                    break;
                case "down":
                    head.y += 1;
                    break;
                case "left":
                    head.x -= 1;
                    break;
                case "right":
                    head.x += 1;
                    break;
            }

snake.unshift(head);
            snake.pop();
        }

function gameLoop() {
            moveSnake();
            drawSnake();
        }

setInterval(gameLoop, 100); // запуск игрового цикла

document.addEventListener("keydown", (event) => {
            switch (event.key) {
                case "ArrowUp":
                    direction = "up";
                    break;
                case "ArrowDown":
                    direction = "down";
                    break;
                case "ArrowLeft":
                    direction = "left";
                    break;
                case "ArrowRight":
                    direction = "right";
                    break;
            }
        });
    </script>
</body>
</html>