Un juego de flapi bird pero mounstroso's game

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

No:20113

←

Prev Next

→

Un juego de flapi bird pero mounstroso
Developer User8959｜Date and time 23/10/8 12:06:38
Build time 20.207 sec｜Game capacity 3.801KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Flapi Bird Monstruoso</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // Variables de juego
        var canvas, ctx;
        var bird;
        var monsters;
        var gameLoop;

// Clase Bird
        function Bird() {
            this.x = 50;
            this.y = canvas.height / 2;
            
            // Dibujar el pájaro
            this.draw = function() {
                ctx.fillStyle = "yellow";
                ctx.fillRect(this.x, this.y, 30, 20);
            }
            
            // Actualizar la posición del pájaro
            this.updatePosition = function() {
                this.y += 2;
            }            
            
            // Función para hacer que el pájaro salte
            this.jump = function() {
                this.y -= 60;
            }
        }

// Clase Monster
        function Monster(x) {
            this.x = x;
            this.y = Math.floor(Math.random() * 400) + 100;
            this.speed = Math.floor(Math.random() * 5) + 2;
            this.width = 40;
            this.height = 40;
            
            // Dibujar el monstruo
            this.draw = function() {
                ctx.fillStyle = "green";
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
            
            // Actualizar la posición del monstruo
            this.updatePosition = function() {
                this.x -= this.speed;
                
                // Si el monstruo sale de la pantalla, lo volvemos a ubicar al final
                if (this.x + this.width < 0) {
                    this.x = canvas.width;
                    this.y = Math.floor(Math.random() * 400) + 100;
                    this.speed = Math.floor(Math.random() * 5) + 2;
                }
                
                // Verificar si el pájaro colisiona con el monstruo
                if (bird.x + 30 >= this.x && bird.x <= this.x + this.width &&
                    bird.y + 20 >= this.y && bird.y <= this.y + this.height) {
                    stopGame();
                }
            }
        }

// Función para iniciar el juego
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");
            bird = new Bird();
            monsters = [
                new Monster(canvas.width),
                new Monster(canvas.width + 200),
                new Monster(canvas.width + 400)
            ];
            
            // Agregar eventos de salto al pájaro
            canvas.addEventListener("touchstart", function() {
                bird.jump();
            });
            
            // Iniciar el bucle principal del juego
            gameLoop = setInterval(updateGame, 20);
        }

// Función para detener el juego
        function stopGame() {
            clearInterval(gameLoop);
            alert("¡Perdiste! Intenta nuevamente.");
            startGame(); // Reiniciar el juego
        }

// Función para actualizar el estado del juego
        function updateGame() {
            // Limpiar el canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Actualizar y dibujar el pájaro
            bird.updatePosition();
            bird.draw();
            
            // Actualizar y dibujar los monstruos
            for (var i = 0; i < monsters.length; i++) {
                monsters[i].updatePosition();
                monsters[i].draw();
            }
        }

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