Coloca um montão de círculo batendo, e um chat pra controlar, comandos: !replaceform Square/circle/triangule/Octagon/Rectangle, !document getById id, !re e !reset, !ping e !p, !config e !Adjusts's game

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

No:41801

←

Prev Next

→

Coloca um montão de círculo batendo, e um chat pra..ALL
Developer User18751｜Date and time 24/2/10 1:44:16
Build time 19.866 sec｜Game capacity 5.95KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Batendo Círculos</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
        #controls {
            text-align: center;
            margin: 20px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <div id="controls">
        <input type="text" id="commandInput" placeholder="Digite um comando...">
        <button id="sendButton">Enviar</button>
    </div>

// Função para criar um círculo
        function createCircle(x, y) {
            shapes.push({ type: "circle", x, y, radius: 20 });
        }

// Função para criar um quadrado
        function createSquare(x, y) {
            shapes.push({ type: "square", x, y, side: 40 });
        }

// Função para criar um triângulo
        function createTriangle(x, y) {
            shapes.push({ type: "triangle", x, y, side: 40 });
        }

// Função para criar um octógono
        function createOctagon(x, y) {
            shapes.push({ type: "octagon", x, y, side: 30 });
        }

// Função para criar um retângulo
        function createRectangle(x, y) {
            shapes.push({ type: "rectangle", x, y, width: 60, height: 30 });
        }

// Função para desenhar as formas na tela
        function drawShapes() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            shapes.forEach(shape => {
                ctx.beginPath();
                if (shape.type === "circle") {
                    ctx.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
                } else if (shape.type === "square") {
                    ctx.rect(shape.x, shape.y, shape.side, shape.side);
                } else if (shape.type === "triangle") {
                    ctx.moveTo(shape.x, shape.y);
                    ctx.lineTo(shape.x + shape.side, shape.y);
                    ctx.lineTo(shape.x + shape.side / 2, shape.y - shape.side);
                } else if (shape.type === "octagon") {
                    const angle = 2 * Math.PI / 8;
                    ctx.moveTo(shape.x + shape.side * Math.cos(0), shape.y + shape.side * Math.sin(0));
                    for (let i = 1; i < 8; i++) {
                        ctx.lineTo(shape.x + shape.side * Math.cos(angle * i), shape.y + shape.side * Math.sin(angle * i));
                    }
                } else if (shape.type === "rectangle") {
                    ctx.rect(shape.x, shape.y, shape.width, shape.height);
                }
                ctx.closePath();
                ctx.stroke();
                ctx.fillStyle = "black";
                ctx.fill();
            });
        }

// Função para animar as formas na tela
        function animateShapes() {
            drawShapes();
            shapes.forEach(shape => {
                shape.x += Math.random() * 6 - 3;
                shape.y += Math.random() * 6 - 3;
            });
            animationFrame = requestAnimationFrame(animateShapes);
        }

// Função para parar a animação
        function stopAnimation() {
            cancelAnimationFrame(animationFrame);
        }

// Funções para manipular o chat
        function processCommand(command) {
            const [action, shape] = command.split(" ");
            if (action === "!replaceform" && shape) {
                replaceForm(shape.toLowerCase());
            } else if (action === "!document" && shape) {
                documentById(shape);
            } else if (action === "!re" || action === "!reset") {
                resetGame();
            } else if (action === "!ping" || action === "!p") {
                ping();
            } else if (action === "!config" || action === "!adjusts") {
                openConfig();
            }
        }

function documentById(id) {
            const element = document.getElementById(id);
            console.log(element);
        }

function resetGame() {
            shapes = [];
            cancelAnimationFrame(animationFrame);
            drawShapes();
        }

function ping() {
            console.log("Pong!");
        }

function openConfig() {
            console.log("Abrindo configurações...");
        }

// Eventos do chat
        const commandInput = document.getElementById("commandInput");
        const sendButton = document.getElementById("sendButton");

sendButton.addEventListener("click", () => {
            const command = commandInput.value;
            processCommand(command);
            commandInput.value = "";
        });

commandInput.addEventListener("keyup", event => {
            if (event.key === "Enter") {
                const command = commandInput.value;
                processCommand(command);
                commandInput.value = "";
            }
        });

// Iniciar o jogo
        replaceForm("circle");
        animateShapes();
    </script>
</body>
</html>