Hazme el juego de la serpiente's game

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

No:37117

←

Prev Next

→

Hazme el juego de la serpiente
Developer User16957｜Date and time 24/1/20 7:44:53
Build time 16.111 sec｜Game capacity 5.664KB｜

Script

¡Claro! Aquí tienes el código HTML para el juego de la serpiente:

Este código crea un juego de la serpiente en el que debes controlar una serpiente para que coma la comida y crezca. Puedes controlar la serpiente usando las teclas de dirección del teclado. Cuando la serpiente choca consigo misma o con los bordes del tablero, se mostrará una alerta indicando que has perdido y te dará la opción de empezar un nuevo juego. Espero que disfrutes el juego. ¡Buena suerte!

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

¡Claro! Aquí tienes el código HTML para el juego de la serpiente:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Juego de la Serpiente</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>

// Definir el tamaño de los bloques y el tamaño del tablero de juego
            var blockSize = 20;
            var width = canvas.width / blockSize;
            var height = canvas.height / blockSize;

// Inicializar la serpiente
            var snake = {
                body: [
                    {x: 4, y: 2},
                    {x: 3, y: 2},
                    {x: 2, y: 2}
                ],
                direction: 'right'
            };

// Inicializar la comida
            var food = { x: 10, y: 10 };

// Función para dibujar un bloque en el canvas
            function drawBlock(x, y) {
                context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
            }

// Función para dibujar el tablero de juego
            function drawBoard() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = 'black';

snake.body.forEach(function(block) {
                    drawBlock(block.x, block.y);
                });

context.fillStyle = 'red';
                drawBlock(food.x, food.y);
            }

// Función para mover la serpiente
            function moveSnake() {
                var headX = snake.body[0].x;
                var headY = snake.body[0].y;

// Determinar las nuevas coordenadas de la cabeza en base a la dirección de la serpiente
                if (snake.direction === 'right') {
                    headX++;
                } else if (snake.direction === 'left') {
                    headX--;
                } else if (snake.direction === 'up') {
                    headY--;
                } else if (snake.direction === 'down') {
                    headY++;
                }

// Crear una nueva cabeza para la serpiente
                var newHead = { x: headX, y: headY };

// Insertar la nueva cabeza al inicio del cuerpo
                snake.body.unshift(newHead);

// Verificar si la serpiente ha comido la comida
                if (headX === food.x && headY === food.y) {
                    // Generar una nueva posición para la comida de forma aleatoria
                    food = {
                        x: Math.floor(Math.random() * width),
                        y: Math.floor(Math.random() * height)
                    };
                } else {
                    // Eliminar la última parte del cuerpo de la serpiente
                    snake.body.pop();
                }
            }

// Función para cambiar la dirección de la serpiente
            function changeDirection(event) {
                var key = event.keyCode;

if (key === 37 && snake.direction !== 'right') {
                    snake.direction = 'left';
                } else if (key === 38 && snake.direction !== 'down') {
                    snake.direction = 'up';
                } else if (key === 39 && snake.direction !== 'left') {
                    snake.direction ='right';
                } else if (key === 40 && snake.direction !== 'up') {
                    snake.direction = 'down';
                }
            }

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

// Verificar si la serpiente ha chocado consigo misma
                var head = snake.body[0];
                for (var i = 1; i < snake.body.length; i++) {
                    var block = snake.body[i];
                    if (block.x === head.x && block.y === head.y) {
                        alert('¡Has perdido!');
                        newGame();
                    }
                }

// Verificar si la serpiente ha chocado con los bordes del tablero
                if (head.x < 0 || head.x >= width || head.y < 0 || head.y >= height) {
                    alert('¡Has perdido!');
                    newGame();
                }

// Llamar a la función gameLoop nuevamente después de un intervalo de tiempo
                setTimeout(gameLoop, 100);
            }

// Función para reiniciar el juego
            function newGame() {
                snake.body = [
                    {x: 4, y: 2},
                    {x: 3, y: 2},
                    {x: 2, y: 2}
                ];

snake.direction = 'right';
                food = { x: 10, y: 10 };
            }

// Iniciar el juego
            newGame();
            document.addEventListener('keydown', changeDirection);
            gameLoop();
        });
    </script>
</body>
</html>
```

Espero que disfrutes el juego. ¡Buena suerte!