AI game creator

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

No:30454

←

Prev Next

→

Fallo guys clone
Developer User14794｜Date and time 23/12/21 23:28:37
Build time 31.113 sec｜Game capacity 4.877KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Fallo Guys Clone</title>
    <style>
        #canvas {
            background-color: black;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// Dimensiones del canvas
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Variables del juego
        const playerWidth = 50;
        const playerHeight = 50;
        const playerSpeed = 5;
        const enemyWidth = 30;
        const enemyHeight = 30;
        const enemySpeed = 2;
        let score = 0;
        let gameOver = false;

// Objeto Jugador
        const player = {
            x: canvas.width / 2 - playerWidth / 2,
            y: canvas.height - playerHeight - 5,
            width: playerWidth,
            height: playerHeight,
            color: "red",
            dx: 0
        };

// Objeto Enemigo
        const enemy = {
            x: Math.random() * (canvas.width - enemyWidth),
            y: -enemyHeight,
            width: enemyWidth,
            height: enemyHeight,
            color: "blue",
            dy: enemySpeed
        };

// Dibujar rectángulo
        function drawRectangle(x, y, width, height, color) {
            context.fillStyle = color;
            context.fillRect(x, y, width, height);
        }

// Dibujar texto
        function drawText(text, x, y, color) {
            context.fillStyle = color;
            context.font = "48px Arial";
            context.fillText(text, x, y);
        }

// Actualizar elementos del juego
        function update() {
            if (!gameOver) {
                // Mover jugador
                player.x += player.dx;

// Mover enemigo
                enemy.y += enemy.dy;

// Verificar colisión del jugador con los bordes
                if (player.x < 0) {
                    player.x = 0;
                }
                if (player.x + player.width > canvas.width) {
                    player.x = canvas.width - player.width;
                }

// Verificar colisión del enemigo con los bordes
                if (enemy.y + enemy.height > canvas.height) {
                    enemy.y = -enemy.height;
                    enemy.x = Math.random() * (canvas.width - enemy.width);
                    score++; // Incrementar puntuación
                }

// Verificar colisión del jugador con el enemigo
                if (
                    player.x < enemy.x + enemy.width &&
                    player.x + player.width > enemy.x &&
                    player.y < enemy.y + enemy.height &&
                    player.y + player.height > enemy.y
                ) {
                    gameOver = true; // Fin del juego
                }
            }
        }

// Dibujar elementos en el canvas
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height); // Limpiar canvas

// Dibujar jugador
            drawRectangle(player.x, player.y, player.width, player.height, player.color);

// Dibujar enemigo
            drawRectangle(enemy.x, enemy.y, enemy.width, enemy.height, enemy.color);

// Dibujar puntuación
            drawText("Puntuación: " + score, 10, 50, "white");

// Si el juego ha terminado, mostrar mensaje de fin de juego
            if (gameOver) {
                drawText("Game Over", canvas.width / 2 - 100, canvas.height / 2, "white");
            }
        }

// Evento de tecla pulsada
        function keyDown(event) {
            if (event.key === "ArrowLeft") {
                player.dx = -playerSpeed; // Mover jugador hacia la izquierda
            } else if (event.key === "ArrowRight") {
                player.dx = playerSpeed; // Mover jugador hacia la derecha
            }
        }

// Evento de tecla liberada
        function keyUp(event) {
            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                player.dx = 0; // Detener movimiento del jugador
            }
        }

// Control del juego
        function gameLoop() {
            update(); // Actualizar elementos del juego
            draw(); // Dibujar elementos en el canvas

if (!gameOver) {
                requestAnimationFrame(gameLoop);
            }
        }

// Eventos de teclado
        document.addEventListener("keydown", keyDown);
        document.addEventListener("keyup", keyUp);

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