JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<svg id="svgCanvas" width="100%" height="400">
  <rect y="300" height="100" width="100%"/>
</svg>

JavaScript

class Block {
	constructor() {
  	this.color = "red";
    this.size = 50;
    this.pos = {x:0, y:0};
    this.vel = {x:0, y:0};
    this.rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    this.rect.setAttributeNS(null, "width", this.size);
    this.rect.setAttributeNS(null, "height", this.size);
    this.rect.setAttributeNS(null, "x", this.pos.x);
    this.rect.setAttributeNS(null, "y", this.pos.y);
    this.rect.setAttributeNS(null, "fill", this.color);
  }
  
  create() {
  	let svg = document.getElementById("svgCanvas");
    svg.appendChild(this.rect);
  }
  
  colide(objs) {
  
  }
  
  update() {
    this.vel.y += 0.18;
    this.pos.y += this.vel.y;
    this.rect.setAttributeNS(null, "y", this.pos.y);
  }
}

let block = new Block();
block.create();
setInterval(function() { block.update(); }, 20);