Adiciona bola vermelha, azul, verde e amarelo, botões: anti-gravidade sim/não, resetar, Preencher espaço, começar a mover e configurações: botão de bola arco-íris, botão de tremer sim/não, Mecânica: Auto móvel (Atual), Clicar para mover e auto móvel (mais rápido)'s game

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

No:29791

←

Prev Next

→

Adiciona bola vermelha, azul, verde e amarelo, bot..ALL
Developer User14630｜Date and time 23/12/19 2:53:34
Build time 28.007 sec｜Game capacity 4.416KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo de Bolas</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <div>
        <button id="antiGravidadeBtn" onclick="toggleAntiGravidade()">Anti-gravidade: Sim</button>
        <button id="resetarBtn" onclick="resetar()">Resetar</button>
        <button id="preencherEspacoBtn" onclick="preencherEspaco()">Preencher Espaço</button>
        <button id="moverBtn" onclick="toggleMovimento()">Começar a Mover</button>
        <button id="bolaArcoIrisBtn" onclick="toggleBolaArcoIris()">Bola Arco-íris: Não</button>
        <button id="tremerBtn" onclick="toggleTremer()">Tremer: Não</button>
    </div>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var ballRadius = 20;
        var x = canvas.width / 2;
        var y = canvas.height - 30;
        var dx = 2;
        var dy = -2;
        var antiGravidade = true;
        var movimentoAuto = true;
        var preencherEspaco = false;
        var bolaArcoIris = false;
        var tremer = false;

function desenharBola(color) {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.closePath();
        }

if (preencherEspaco) {
                ctx.fillStyle = "#f2f2f2";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            } else {
                ctx.clearRect(2, 0, canvas.width, canvas.height);
            }

if (bolaArcoIris) {
                desenharBola(getRandomColor());
            } else {
                desenharBola("red");
            }
            
            if (tremer) {
                x += getRandomNumber(-3, 3);
                y += getRandomNumber(-3, 3);
            } else {
                x += dx;
                y += dy;
            }

if (y + dy < ballRadius || y + dy > canvas.height - ballRadius) {
                dy = -dy;
            }

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }

requestAnimationFrame(desenhar);
        }

function toggleAntiGravidade() {
            antiGravidade = !antiGravidade;
            var btn = document.getElementById("antiGravidadeBtn");
            btn.innerText = "Anti-gravidade: " + (antiGravidade ? "Sim" : "Não");
        }

function resetar() {
            x = canvas.width / 2;
            y = canvas.height - 30;
            dx = 2;
            dy = -2;
        }

function preencherEspaco() {
            preencherEspaco = !preencherEspaco;
            var btn = document.getElementById("preencherEspacoBtn");
            btn.innerText = preencherEspaco ? "Limpar Espaço" : "Preencher Espaço";
        }

function toggleMovimento() {
            movimentoAuto = !movimentoAuto;
            var btn = document.getElementById("moverBtn");
            btn.innerText = movimentoAuto ? "Parar Movimento" : "Começar a Mover";
        }

function toggleBolaArcoIris() {
            bolaArcoIris = !bolaArcoIris;
            var btn = document.getElementById("bolaArcoIrisBtn");
            btn.innerText = "Bola Arco-íris: " + (bolaArcoIris ? "Sim" : "Não");
        }

function toggleTremer() {
            tremer = !tremer;
            var btn = document.getElementById("tremerBtn");
            btn.innerText = "Tremer: " + (tremer ? "Sim" : "Não");
        }

function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

function getRandomNumber(min, max) {
            return Math.random() * (max - min) + min;
        }

desenhar();
    </script>
</body>
</html>