Adiciona uma tela e uma bola, a bola move sozinho, botões: adicionar 5, bolas coloridas sim/não, fundo normal/malha, começar ronda, configurações de paleta de cores botões: original, Gawotzi, inverno, kubul e nabun's game

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

No:30577

119

←

Prev Next

→

Adiciona uma tela e uma bola, a bola move sozinho,..ALL
Developer User14867｜Date and time 23/12/23 2:15:15
Build time 36.222 sec｜Game capacity 6.054KB｜

Script

Arcptanballs Bem vindo a Arcptanballs, aqui você pode mudar a paletas de cores, adicionar mais bolas e mais

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
  </h1>Arcptanballs</h1>
 Bem vindo a Arcptanballs, aqui você pode mudar a paletas de cores, adicionar mais bolas e mais
<html>
  <head>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      
      const ball = {
        x: 320,
        y: 240,
        dx: 2,
        dy: 2,
        radius: 10,
        color: "black"
      };
      
      const buttonsContainer = document.createElement("div");
      buttonsContainer.style.display = "flex";
      buttonsContainer.style.justifyContent = "space-between";
      
      const addFiveButton = document.createElement("button");
      addFiveButton.innerText = "Adicionar 5";
      addFiveButton.addEventListener("click", () => {
        for (let i = 0; i < 5; i++) {
          addBall();
        }
      });
      buttonsContainer.appendChild(addFiveButton);
      
      const coloredBallsButton = document.createElement("button");
      coloredBallsButton.innerText = "Bolas coloridas sim";
      coloredBallsButton.addEventListener("click", () => {
        if (coloredBallsButton.innerText === "Bolas coloridas sim") {
          coloredBallsButton.innerText = "Bolas coloridas não";
          ball.color = getRandomColor();
        } else {
          coloredBallsButton.innerText = "Bolas coloridas sim";
          ball.color = "black";
        }
      });
      buttonsContainer.appendChild(coloredBallsButton);
      
      const backgroundButton = document.createElement("button");
      backgroundButton.innerText = "Fundo normal";
      backgroundButton.addEventListener("click", () => {
        if (backgroundButton.innerText === "Fundo normal") {
          backgroundButton.innerText = "Fundo malha";
          canvas.style.background = "gray";
        } else {
          backgroundButton.innerText = "Fundo normal";
          canvas.style.background = "white";
        }
      });
      buttonsContainer.appendChild(backgroundButton);
      
      const startButton = document.createElement("button");
      startButton.innerText = "Começar ronda";
      startButton.addEventListener("click", () => startGame());
      buttonsContainer.appendChild(startButton);
      
      const colorPaletteContainer = document.createElement("div");
      colorPaletteContainer.style.display = "flex";
      
      const originalPaletteButton = document.createElement("button");
      originalPaletteButton.innerText = "Original";
      originalPaletteButton.addEventListener("click", () => {
        ball.color = "black";
      });
      colorPaletteContainer.appendChild(originalPaletteButton);
      
      const gawotziPaletteButton = document.createElement("button");
      gawotziPaletteButton.innerText = "Gawotzi";
      gawotziPaletteButton.addEventListener("click", () => {
        ball.color = "#F78181";
      });
      colorPaletteContainer.appendChild(gawotziPaletteButton);
      
      const invernoPaletteButton = document.createElement("button");
      invernoPaletteButton.innerText = "Inverno";
      invernoPaletteButton.addEventListener("click", () => {
        ball.color = "#A9F5F2";
      });
      colorPaletteContainer.appendChild(invernoPaletteButton);
      
      const kubulPaletteButton = document.createElement("button");
      kubulPaletteButton.innerText = "Kubul";
      kubulPaletteButton.addEventListener("click", () => {
        ball.color = "#D7DF01";
      });
      colorPaletteContainer.appendChild(kubulPaletteButton);
      
      const nabunPaletteButton = document.createElement("button");
      nabunPaletteButton.innerText = "Nabun";
      nabunPaletteButton.addEventListener("click", () => {
        ball.color = "#610B0B";
      });
      colorPaletteContainer.appendChild(nabunPaletteButton);
      
      document.body.appendChild(buttonsContainer);
      document.body.appendChild(document.createElement("br"));
      document.body.appendChild(colorPaletteContainer);
      
      function addBall() {
        let newBall = {
          x: Math.random() * (canvas.width - 20) + 10,
          y: Math.random() * (canvas.height - 20) + 10,
          dx: 2,
          dy: 2,
          radius: 10
        };
        balls.push(newBall);
      }
      
      function getRandomColor() {
        let letters = "0123456789ABCDEF";
        let color = "#";
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
      
      let balls = [];
      let animation;
      
      function startGame() {
        balls = [];
        cancelAnimationFrame(animation);
        animate();
      }
      
      function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }
      
      function updateBall(ball) {
        if (ball.x + ball.radius >= canvas.width || ball.x - ball.radius <= 0) {
          ball.dx *= -1;
        }
        if (ball.y + ball.radius >= canvas.height || ball.y - ball.radius <= 0) {
          ball.dy *= -1;
        }
        ball.x += ball.dx;
        ball.y += ball.dy;
      }
      
      function drawBall(ball) {
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        context.fillStyle = ball.color;
        context.fill();
        context.closePath();
      }
      
      function animate() {
        clearCanvas();
        
        for (let i = 0; i < balls.length; i++) {
          updateBall(balls[i]);
          drawBall(balls[i]);
        }
        
        updateBall(ball);
        drawBall(ball);

animation = requestAnimationFrame(animate);
      }
      
      addBall();
      animate();
    </script>
  </body>
</html>