Vai ter 4 bolas com cores diferentes, botões: começar a mover, alterar gravidade: -4 a 10, alterar Atrito: -20 a 20, redefinir e configurações: Atrito modificado: sim/não's game

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

No:29790

←

Prev Next

→

Vai ter 4 bolas com cores diferentes, botões: come..ALL
Developer User14630｜Date and time 23/12/19 2:41:38
Build time 22.228 sec｜Game capacity 3.578KB｜

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>Jogo das Bolas</title>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

var balls = [];
    var gravity = 0;
    var friction = 0;
    var isFrictionModified = false;

var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00"];
    var ballRadius = 20;

function Ball(x, y, dx, dy, color) {
      this.x = x;
      this.y = y;
      this.dx = dx;
      this.dy = dy;
      this.color = color;

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

this.update = function() {
        if (this.y + this.dy + ballRadius > canvas.height || this.y + this.dy - ballRadius < 0) {
          this.dy = -this.dy * (1 - friction);
        }
        if (this.x + this.dx + ballRadius > canvas.width || this.x + this.dx - ballRadius < 0) {
          this.dx = -this.dx * (1 - friction);
        }
        
        this.dy += gravity;

this.x += this.dx;
        this.y += this.dy;
      }
    }

function startMoving() {
      balls.push(new Ball(canvas.width/2, canvas.height/2, Math.random() * 2 - 1, Math.random() * 2 - 1, colors[balls.length]));
    }

function updateBalls() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < balls.length; i++) {
        balls[i].update();
        balls[i].draw();
      }

requestAnimationFrame(updateBalls);
    }

function changeGravity(value) {
      gravity = parseFloat(value);
    }

function changeFriction(value) {
      friction = parseFloat(value);
      isFrictionModified = true;
    }

function reset() {
      balls = [];
      gravity = 0;
      friction = 0;
      isFrictionModified = false;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function toggleFrictionModified() {
      if (isFrictionModified) {
        alert("Atrito modificado: sim");
      } else {
        alert("Atrito modificado: não");
      }
    }

function setup() {
      var startButton = document.createElement("button");
      startButton.innerText = "Começar a mover";
      startButton.onclick = startMoving;
      document.body.appendChild(startButton);

var gravityInput = document.createElement("input");
      gravityInput.type = "number";
      gravityInput.min = -4;
      gravityInput.max = 10;
      gravityInput.oninput = function() { changeGravity(this.value); }
      document.body.appendChild(gravityInput);

var frictionInput = document.createElement("input");
      frictionInput.type = "number";
      frictionInput.min = -20;
      frictionInput.max = 20;
      frictionInput.oninput = function() { changeFriction(this.value); }
      document.body.appendChild(frictionInput);

var resetButton = document.createElement("button");
      resetButton.innerText = "Redefinir";
      resetButton.onclick = reset;
      document.body.appendChild(resetButton);

var settingsButton = document.createElement("button");
      settingsButton.innerText = "Configurações";
      settingsButton.onclick = toggleFrictionModified;
      document.body.appendChild(settingsButton);

updateBalls();
    }

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