The chicken wanted to cross the street but he must be careful with the cars that pass at full speed's game

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

No:38205

←

Prev Next

→

The chicken wanted to cross the street but he must..ALL
Developer User17279｜Date and time 24/1/23 12:01:47
Build time 17.776 sec｜Game capacity 4.425KB｜

Script

Puntaje: 0

¡Fin del Juego!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>El Juego del Pollito</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f3f3f3;
            font-family: Arial, sans-serif;
        }
        
        canvas {
            display: block;
        }
        
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            display: none;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <div id="score">Puntaje: 0</div>
    <div id="game-over">¡Fin del Juego!</div>

// Definir las dimensiones del canvas
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Variables del juego
        var playerSize = 50;
        var playerX = canvas.width / 2 - playerSize / 2;
        var playerY = canvas.height - playerSize - 10;
        var playerSpeed = 10;
        var carSize = 80;
        var carSpeed = 5;
        var cars = [];
        var score = 0;
        var gameStarted = false;
        var gameEnded = false;

// Función para dibujar el jugador y los autos
        function draw() {
            // Limpiar el canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar el jugador
            context.fillStyle = "#f00";
            context.fillRect(playerX, playerY, playerSize, playerSize);

// Dibujar los autos
            context.fillStyle = "#000";
            for (var i = 0; i < cars.length; i++) {
                context.fillRect(cars[i].x, cars[i].y, carSize, carSize);
            }

// Actualizar el puntaje
            context.font = "18px Arial";
            context.fillStyle = "#333";
            context.fillText("Puntaje: " + score, 10, 30);

// Verificar las colisiones
            checkCollisions();

// Mover los autos
            for (var i = 0; i < cars.length; i++) {
                cars[i].y += carSpeed;
            }

// Verificar si los autos han salido de la pantalla
            for (var i = 0; i < cars.length; i++) {
                if (cars[i].y > canvas.height) {
                    cars.splice(i, 1);
                    score += 1;
                }
            }

// Animación del juego
            if (!gameEnded) {
                requestAnimationFrame(draw);
            } else {
                document.getElementById("game-over").style.display = "block";
            }
        }

// Función para crear un nuevo auto
        function createCar() {
            var carX = Math.floor(Math.random() * (canvas.width - carSize));
            var carY = -carSize;
            cars.push({ x: carX, y: carY });
        }

// Función para verificar las colisiones
        function checkCollisions() {
            for (var i = 0; i < cars.length; i++) {
                if (playerX < cars[i].x + carSize &&
                    playerX + playerSize > cars[i].x &&
                    playerY < cars[i].y + carSize &&
                    playerY + playerSize > cars[i].y) {
                    endGame();
                }
            }
        }

// Función para terminar el juego
        function endGame() {
            gameEnded = true;
        }

// Evento para mover al jugador
        document.addEventListener("keydown", function (event) {
            if (!gameStarted) {
                gameStarted = true;
                draw();
                setInterval(createCar, 1500);
            }

if (event.key === "ArrowLeft" && playerX > 0) {
                playerX -= playerSpeed;
            } else if (event.key === "ArrowRight" && playerX < canvas.width - playerSize) {
                playerX += playerSpeed;
            }
        });

</script>
</body>
</html>