Una pelotita negra con rastro arcoiris se va por los bordes y se choca,y cada vez que choque con uno de los bordes, se haga más grande la pelotita, cuando ocupé todo el espacio la pelotita, se reinicia,cada vez que choque la pelotita suena un sonido.'s game

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

No:40826

←

Prev Next

→

Una pelotita negra con rastro arcoiris se va por l..ALL
Developer User18058｜Date and time 24/2/4 7:28:53
Build time 8.58 sec｜Game capacity 3.047KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>

<head>
    <title>¡Juego de la pelotita! 🌈</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

canvas {
            background-color: #FFFFFF;
            display: block;
        }
    </style>
</head>

var context = canvas.getContext("2d");

// Variables del juego
        var ballSize = 20;
        var ballX = Math.floor(Math.random() * (canvas.width - ballSize));
        var ballY = Math.floor(Math.random() * (canvas.height - ballSize));
        var ballSpeedX = 2;
        var ballSpeedY = 2;

// Función para reproducir el sonido al chocar
        function playCollisionSound() {
            var audio = new Audio('collision_sound.mp3');
            audio.play();
        }

// Función para redimensionar la pelotita al chocar con los bordes
        function resizeBall() {
            ballSize += 5;
            ballX = Math.floor(Math.random() * (canvas.width - ballSize));
            ballY = Math.floor(Math.random() * (canvas.height - ballSize));
        }

// Función para reiniciar el juego al ocupar todo el espacio
        function resetGame() {
            ballSize = 20;
            ballX = Math.floor(Math.random() * (canvas.width - ballSize));
            ballY = Math.floor(Math.random() * (canvas.height - ballSize));
        }

// Función principal del juego
        function gameLoop() {
            // Limpiar el canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar la pelotita
            context.beginPath();
            context.arc(ballX, ballY, ballSize, 0, 2 * Math.PI, false);
            context.fillStyle = "#000000";
            context.fill();
            context.closePath();

// Mover la pelotita
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Comprobar los límites del canvas
            if (ballX < 0 || ballX > canvas.width - ballSize) {
                ballSpeedX = -ballSpeedX;
                playCollisionSound();
                resizeBall();
            }
            if (ballY < 0 || ballY > canvas.height - ballSize) {
                ballSpeedY = -ballSpeedY;
                playCollisionSound();
                resizeBall();
            }

// Comprobar si la pelotita ha ocupado todo el espacio
            if (ballSize >= Math.min(canvas.width, canvas.height)) {
                resetGame();
            }

// Volver a llamar a la función para crear un bucle del juego
            requestAnimationFrame(gameLoop);
        }

// Iniciar el juego al cargar la página
        window.onload = function () {
            gameLoop();
        };
    </script>
</body>

</html>