AI game creator

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

No:30799

←

Prev Next

→

A platformer
Developer User14891｜Date and time 23/12/24 6:42:25
Build time 15.594 sec｜Game capacity 3.815KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Plataformero</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

canvas {
            background: #f0f0f0;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Define las propiedades del jugador
        var player = {
            x: 50,
            y: 350,
            width: 50,
            height: 50,
            speed: 5,
            VelX: 0,
            VelY: 0,
            jumping: false
        };

// Define las propiedades de la plataforma
        var platform = {
            x: 0,
            y: 400,
            width: 800,
            height: 20
        };

// Detecta las teclas pulsadas para mover al jugador
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowRight" || event.key === "Right") {
                player.VelX = player.speed;
            }
            
            if (event.key === "ArrowLeft" || event.key === "Left") {
                player.VelX = -player.speed;
            }
            
            if ((event.key === "ArrowUp" || event.key === "Up") && !player.jumping) {
                player.jumping = true;
                player.VelY = -player.speed * 2;
            }
        });

// Detecta las teclas soltadas para detener al jugador
        document.addEventListener("keyup", function (event) {
            if (
                event.key === "ArrowRight" || event.key === "Right" ||
                event.key === "ArrowLeft" || event.key === "Left"
            ) {
                player.VelX = 0;
            }
        });

// Actualiza la posición y estado del jugador en cada fotograma
        function update() {
            // Actualiza la posición del jugador (eje X)
            player.x += player.VelX;
            
            // Verifica las colisiones del jugador con la plataforma
            if (
                player.x < platform.x + platform.width && 
                player.x + player.width > platform.x && 
                player.y + player.height === platform.y
            ) {
                player.jumping = false;
                player.VelY = 0;
            }
            
            // Actualiza la posición del jugador (eje Y)
            player.VelY += 0.5; // Gravedad simulada
            player.y += player.VelY;
            
            // Verifica si el jugador está fuera del límite inferior del canvas
            if (player.y + player.height > canvas.height) {
                player.y = canvas.height - player.height;
                player.jumping = false;
                player.VelY = 0;
            }

// Dibuja el juego en cada fotograma
            draw();
            
            // Repite el proceso de actualización en el siguiente fotograma
            requestAnimationFrame(update);
        }

// Dibuja el jugador y la plataforma en el canvas
        function draw() {
            // Borra el contenido previo del canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // Dibuja el jugador
            context.fillStyle = "#0000ff"; // color azul
            context.fillRect(player.x, player.y, player.width, player.height);
            
            // Dibuja la plataforma
            context.fillStyle = "#00ff00"; // color verde
            context.fillRect(platform.x, platform.y, platform.width, platform.height);
        }

// Inicia el juego
        update();
    </script>
</body>
</html>