JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>A Bouncing Ball</title>
  </head>

  <body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var Ball = function() {
        this.x = 100;
        this.y = 100;
        this.xSpeed = (Math.random() * 10) - 5;
        this.ySpeed = (Math.random() * 10) - 5;
      };
      var circle = function(x, y, radius, fillCircle) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        if (fillCircle) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      };
      Ball.prototype.draw = function() {
        circle(this.x, this.y, 3, true);
      };
      Ball.prototype.move = function() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
      };
      Ball.prototype.checkCollision = function() {
        if (this.x < 0 || this.x > 400) {
          this.xSpeed = -this.xSpeed;
        }
        if (this.y < 0 || this.y > 400) {
          this.ySpeed = -this.ySpeed;
        }
      };
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var width = canvas.width;
      var height = canvas.height;
      var ball = new Ball();
      setInterval(function() {
        for (var i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].move();
        balls[i].checkCollision();
      }
        width = 400;
        height = 400;
        ctx.strokeRect(0, 0, width, height);
      }, 10);
      

    </script>

  </body>

</html>