JSFiddle - React, Tailwind, and code Playground

by shaunwest

HTML

<html lang="en">
  
  <head>
    <meta charset="utf-8">
  </head>
  
  <body>
    <div id="main">
      <canvas id="game" width="400" height="600"></canvas>
    </div>
  </body>

</html>

CSS

#game {
  background: #000000;
}

JavaScript

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

  requestAnimFrame(loop);

  function loop() {
    // get rid of this
    //canvas.width = canvas.width; 

    requestAnimFrame(loop);

    rR.update();
    rG.update();
    rB.update();
    rY.update();
    
    rR.draw();
    rG.draw(); 
    rB.draw();
    rY.draw();
  }

  var canvas = document.getElementById("game");
  var context = canvas.getContext("2d");

  function Rect(color, x, y, speedX, speedY) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.speedX = speedX;
    this.speedY = speedY;
  }

  Rect.prototype.draw = function () {
    context.fillStyle = this.color;

    context.beginPath();
    context.rect(this.x, this.y, 10, 10);
    context.closePath();

    context.fill();
  };

  Rect.prototype.update = function () {  
    if (this.x < 0 || this.x > canvas.width) this.speedX = -this.speedX;
    if (this.y < 0 || this.y > canvas.height) this.speedY = -this.speedY;
    
    // clear just the rect
    context.clearRect(this.x, this.y, 10, 10);
      
    this.x += this.speedX;
    this.y += this.speedY;
  };

var rR = new Rect("#FF0000", canvas.width/2, canvas.height/2, 2, 2);
var rG = new Rect("#00FF00", canvas.width/2, canvas.height/2, -2, -2);
var rB = new Rect("#0000FF", canvas.width/2, canvas.height/2, 2, -2);
var rY = new Rect("#FFFF00", canvas.width/2, canvas.height/2, -2, 2);