AI game creator

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

No:36536

←

Prev Next

→

Snake Game
Developer User16822｜Date and time 24/1/17 22:46:09
Build time 20.26 sec｜Game capacity 4.821KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de la Serpiente</title>
    <style>
        #game-container {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid black;
            position: relative;
        }
        
        .cell {
            width: 20px;
            height: 20px;
            display: inline-block;
        }
        
        #snake, #fruit {
            position: absolute;
            width: 20px;
            height: 20px;
        }
        
        #fruit {
            background-image: url(fruit.png);
        }
    </style>
</head>
<body>
    <div id="game-container"></div>
    <script>
        // Constantes del juego
        const GRID_SIZE = 15;
        const CELL_SIZE = 20;
        const GAME_SPEED = 100;

// Directorio de las direcciones
        const directions = {
            37: { x: -1, y:  0 }, // Left
            38: { x:  0, y: -1 }, // Up
            39: { x:  1, y:  0 }, // Right
            40: { x:  0, y:  1 }  // Down
        };

// Estado del juego
        let snake = [{ x: 10, y: 10 }];
        let fruit = null;
        let direction = directions[39];
        let intervalId = null;

// Función para generar una fruta aleatoriamente
        function generateFruit() {
            const x = Math.floor(Math.random() * GRID_SIZE);
            const y = Math.floor(Math.random() * GRID_SIZE);
            return { x, y };
        }

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

if (head.x === fruit.x && head.y === fruit.y) {
                fruit = generateFruit();
            } else {
                snake.pop();
            }
        }

// Función para dibujar el juego
        function drawGame() {
            const gameContainer = document.getElementById("game-container");

// Limpiar el contenedor del juego
            while (gameContainer.firstChild) {
                gameContainer.firstChild.remove();
            }

// Dibujar la serpiente
            snake.forEach(segment => {
                const snakeSegment = document.createElement("div");
                snakeSegment.classList.add("cell");
                snakeSegment.id = "snake";
                snakeSegment.style.top = segment.y * CELL_SIZE + "px";
                snakeSegment.style.left = segment.x * CELL_SIZE + "px";
                gameContainer.appendChild(snakeSegment);
            });

// Dibujar la fruta
            const fruitElement = document.createElement("div");
            fruitElement.classList.add("cell");
            fruitElement.id = "fruit";
            fruitElement.style.top = fruit.y * CELL_SIZE + "px";
            fruitElement.style.left = fruit.x * CELL_SIZE + "px";
            gameContainer.appendChild(fruitElement);
        }

// Función para manejar el cambio de dirección
        function changeDirection(event) {
            const newDirection = directions[event.keyCode];
            if (newDirection) {
                const oppositeDirection = { x: -direction.x, y: -direction.y };
                if (
                    newDirection.x !== oppositeDirection.x ||
                    newDirection.y !== oppositeDirection.y
                ) {
                    direction = newDirection;
                }
            }
        }

// Función para verificar si la serpiente choca con ella misma
        function isSnakeCollision() {
            const head = snake[0];
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

// Función para verificar si la serpiente choca con los bordes
        function isBorderCollision() {
            const head = snake[0];
            return (
                head.x < 0 || head.x >= GRID_SIZE ||
                head.y < 0 || head.y >= GRID_SIZE
            );
        }

// Función principal del juego
        function gameLoop() {
            moveSnake();
            drawGame();

if (isSnakeCollision() || isBorderCollision()) {
                clearInterval(intervalId);
                alert("¡Juego terminado!");
                location.reload();
            }
        }

// Inicializar el juego
        function init() {
            fruit = generateFruit();
            intervalId = setInterval(gameLoop, GAME_SPEED);
            window.addEventListener("keydown", changeDirection);
        }

// Iniciar el juego
        window.onload = init;
    </script>
</body>
</html>