A platformer game, with some platformer, spikes that if you touch it, the level restarts. And a exit that if you touch it you win's game

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

No:30803

←

Prev Next

→

A platformer game, with some platformer, spikes th..ALL
Developer User14891｜Date and time 23/12/24 6:45:59
Build time 13.239 sec｜Game capacity 3.453KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Plataformero Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Definir las propiedades del jugador y la salida
        var player = {
            x: 50,
            y: canvas.height - 50,
            width: 30,
            height: 30,
            speed: 5
        };

var exit = {
            x: canvas.width - 50,
            y: 0,
            width: 50,
            height: 50
        };

// Definir los obstáculos (púas)
        var spikes = [
            { x: 150, y: canvas.height - 50, width: 20, height: 20 },
            { x: 250, y: canvas.height - 50, width: 20, height: 20 }
        ];

// Variable para controlar si el jugador ha ganado o perdido
        var gameOver = false;
        var hasWon = false;

// Función para dibujar el jugador, la salida y las púas
        function drawObjects() {
            // Limpiar el lienzo
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar al jugador
            context.fillStyle = "blue";
            context.fillRect(player.x, player.y, player.width, player.height);

// Dibujar la salida
            context.fillStyle = "green";
            context.fillRect(exit.x, exit.y, exit.width, exit.height);

// Dibujar las púas
            context.fillStyle = "red";
            for (var i = 0; i < spikes.length; i++) {
                var spike = spikes[i];
                context.fillRect(spike.x, spike.y, spike.width, spike.height);
            }
        }

// Función para actualizar la posición del jugador
        function updatePlayer() {
            // Mover al jugador hacia la derecha
            player.x += player.speed;

// Verificar si el jugador ha alcanzado la salida
            if (player.x + player.width > exit.x && player.y < exit.y + exit.height) {
                gameOver = true;
                hasWon = true;
            }

// Verificar si el jugador ha tocado una púa
            for (var i = 0; i < spikes.length; i++) {
                var spike = spikes[i];
                if (player.x < spike.x + spike.width && player.x + player.width > spike.x && player.y < spike.y + spike.height) {
                    gameOver = true;
                }
            }
        }

// Función principal del juego
        function gameLoop() {
            if (!gameOver) {
                // Actualizar la posición del jugador
                updatePlayer();

// Dibujar los objetos en el lienzo
                drawObjects();

// Hacer que la función gameLoop se llame a sí misma para crear un bucle de juego continuo
                requestAnimationFrame(gameLoop);
            } else {
                // El juego ha terminado, mostrar mensaje de victoria o derrota
                if (hasWon) {
                    alert("¡Has ganado!");
                } else {
                    alert("Has perdido. Inténtalo de nuevo.");
                }
            }
        }

// Iniciar el juego cuando la página se haya cargado completamente
        window.onload = function () {
            gameLoop();
        };
    </script>
</body>
</html>