A protoyype of snake's game

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

No:15597

110

←

Prev Next

→

A protoyype of snake
Developer User5586｜Date and time 23/9/10 3:24:39
Build time 30.93 sec｜Game capacity 3.734KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            background: #ddd;
        }
    </style>
</head>
<body>
    <canvas id="snakeCanvas" width="400" height="400"></canvas>

let score = 0;
        let gameOver = false;

// Creamos la serpiente
        const snake = {
            x: 0,
            y: 0,
            dx: scale,
            dy: 0,
            tail: []
        };

// Comida para la serpiente
        let food = {
            x: Math.floor(Math.random() * canvas.width / scale) * scale,
            y: Math.floor(Math.random() * canvas.height / scale) * scale
        };

// Escuchamos los eventos de teclado para mover la serpiente
        document.addEventListener("keydown", direction);

// Función para dibujar la serpiente y comida
        function draw() {
            if (gameOver) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujamos la comida
            ctx.fillStyle = "red";
            ctx.fillRect(food.x, food.y, scale, scale);

// Movemos la serpiente
            snake.x += snake.dx;
            snake.y += snake.dy;

// Si la serpiente choca contra la pared, se termina el juego
            if (snake.x < 0 || snake.y < 0 || snake.x >= canvas.width || snake.y >= canvas.height) {
                gameOver = true;
            }

// Añadimos nueva posición de la cabeza al inicio de la cola
            snake.tail.unshift({ x: snake.x, y: snake.y });

// Si la cabeza choca contra el cuerpo, se termina el juego
            for (let i = 1; i < snake.tail.length; i++) {
                if (snake.tail[i].x === snake.x && snake.tail[i].y === snake.y) {
                    gameOver = true;
                }
            }

// Si la serpiente come, se incrementa el puntaje y se genera nueva posición para la comida
            if (snake.x === food.x && snake.y === food.y) {
                score++;
                food = {
                    x: Math.floor(Math.random() * canvas.width / scale) * scale,
                    y: Math.floor(Math.random() * canvas.height / scale) * scale
                };
            } else {
                // Removemos la última posición de la cola si no come
                snake.tail.pop();
            }

// Dibujamos la serpiente
            ctx.fillStyle = "green";
            snake.tail.forEach(snakePart => {
                ctx.fillRect(snakePart.x, snakePart.y, scale, scale);
            });

// Dibujamos el puntaje
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Puntaje: " + score, 10, 30);

// Realizamos la llamada recursiva para seguir dibujando
            requestAnimationFrame(draw);
        }

// Iniciamos el juego
        draw();
    </script>
</body>
</html>