AI game creator

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

No:34665

←

Prev Next

→

Snake Game
Developer User16297｜Date and time 24/1/11 7:04:01
Build time 17.99 sec｜Game capacity 4.704KB｜

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 black;
            background: #f5f5f5;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Obtener el elemento canvas y su contexto
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Definir las dimensiones de cada cuadro y la velocidad del juego
        const boxSize = 20;
        const gameSpeed = 150;

// Inicializar la serpiente y la fruta
        let snake = [{ x: 9, y: 9 }]; // Posición inicial de la serpiente
        let fruit = { x: 5, y: 5 }; // Posición inicial de la fruta

// Inicializar la dirección de movimiento
        let direction = null;

// Función para actualizar la posición de la serpiente
        function updateSnake() {
            const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
            snake.unshift(head);

// Verificar si la serpiente alcanza la fruta
            if (head.x === fruit.x && head.y === fruit.y) {
                // Generar una nueva fruta en una posición aleatoria
                fruit = {
                    x: Math.floor(Math.random() * (canvas.width / boxSize)),
                    y: Math.floor(Math.random() * (canvas.height / boxSize))
                };
            } else {
                // Remover la última parte de la serpiente si no alcanza la fruta
                snake.pop();
            }
        }

// Función para dibujar la serpiente y la fruta en el canvas
        function draw() {
            // Limpiar el canvas en cada frame
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar la serpiente
            snake.forEach(part => {
                context.fillStyle = "#2ecc71"; // Color verde
                context.fillRect(part.x * boxSize, part.y * boxSize, boxSize, boxSize);
            });

// Dibujar la fruta
            context.fillStyle = "#e74c3c"; // Color rojo
            context.fillRect(fruit.x * boxSize, fruit.y * boxSize, boxSize, boxSize);
        }

// Función para controlar el movimiento de la serpiente
        function handleKeyPress(event) {
            const keyPressed = event.keyCode;

// Asignar la dirección de movimiento según la tecla presionada
            if (keyPressed === 37 && direction !== { x: 1, y: 0 }) { // Izquierda
                direction = { x: -1, y: 0 };
            } else if (keyPressed === 38 && direction !== { x: 0, y: 1 }) { // Arriba
                direction = { x: 0, y: -1 };
            } else if (keyPressed === 39 && direction !== { x: -1, y: 0 }) { // Derecha
                direction = { x: 1, y: 0 };
            } else if (keyPressed === 40 && direction !== { x: 0, y: -1 }) { // Abajo
                direction = { x: 0, y: 1 };
            }
        }

// Función principal que ejecuta el juego
        function gameLoop() {
            // Actualizar la posición de la serpiente
            updateSnake();

// Dibujar la serpiente y la fruta
            draw();

// Verificar si el juego ha terminado
            if (gameOver()) {
                alert("Game Over! Tu puntuación fue: " + (snake.length - 1));
                resetGame();
            } else {
                // Continuar el bucle del juego
                setTimeout(gameLoop, gameSpeed);
            }
        }

// Función para verificar si el juego ha terminado
        function gameOver() {
            const head = snake[0];

// Verificar si la serpiente ha chocado contra los bordes del canvas o contra sí misma
            return (
                head.x < 0 ||
                head.x >= canvas.width / boxSize ||
                head.y < 0 ||
                head.y >= canvas.height / boxSize ||
                snake.slice(1).some(part => part.x === head.x && part.y === head.y)
            );
        }

// Función para reiniciar el juego
        function resetGame() {
            snake = [{ x: 9, y: 9 }];
            fruit = {
                x: Math.floor(Math.random() * (canvas.width / boxSize)),
                y: Math.floor(Math.random() * (canvas.height / boxSize))
            };
            direction = null;
        }

// Evento para capturar las teclas presionadas
        document.addEventListener("keydown", handleKeyPress);

// Iniciar el bucle del juego
        gameLoop();
    </script>
</body>
</html>