JSFiddle - React, Tailwind, and code Playground

by alexryassky

HTML

<div id="wrapper" style="width:460px; height:340px"></div>
<button>Go demo</button>
<span id="info"> </span>

<div id="wrapper-history">
  <ul id="history"></ul>
</div>

CSS

#wrapper {
  background-color:#ACC;
}
#wrapper-history {
  overflow-y:scroll;
  height : 150px;
  margin: 3px
}

JavaScript

/*jslint es5: true */
var g = 1;

var collisionType = ['BOTTOM_EDGE',
  'TOP_EDGE',
  'LEFT_EDGE',
  'RIGHT_EDGE',
  'ANOTHER_OBJECT',
  'NO_COLLISION'];

var Root = function (el) {
  this.wrapper = el;
  Root.prototype = {
    get wrapper() {
      return this._wrapper;
    }, set wrapper(value) {
      this._wrapper = value;
    },
  };
};
var sceneObject = function (x, y, w, h) {
  this.x = x;
  this.y = y;
  this.width = w;
  this.height = h;
  this.movementParam = {
    dx: 1,
    dy: 1,
    speedX: 1,
    speedY: 1
  };
  this.rotationAngle = 0.0;
  this.scene = null;
  this.previousX = 0;
  this.previousY = 0;
  this.collideWith = [];
  this.transformArray = [1, 0, 0, 1, 0, 0];
};
//Defined  abstract  movement  functions and coordinates on rectangular grid
sceneObject.prototype = {

  get canvas() {
    return this._canvas;
  }, set canvas(value) {
    this._canvas = value;
  }, get ctx() {
    return this._canvas.getContext('2d');
  }, set ctx(value) {

  }, get x() {
    return this._x;
  }, set x(value) {
    this._x = value;
  }, get y() {
    return this._y;
  }, set y(value) {
    this._y = value;
  }, get color() {
    return this._color;
  }, set color(value) {
    this._color = value;
  }, get width() {
    return this._width;
  }, set width(value) {
    this._width = value;
  }, get height() {
    return this._height;
  }, set height(value) {
    this._height = value;
  }, 
  xmov: function (param) {
    this.x += param.dx * param.speedX;
    this.transformArray[4] = param.dx * param.speedX;
    return this;
  },
  ymov: function (param) {
    this.y += param.dy * param.speedY;
    this.transformArray[5] = param.dy * param.speedY;
    if (this.y + this.width > this.canvas.height) {
      this.y -= this.width;
    }
    return this;
  },
  zmov: function (param) {},
  // Default is linear movement
  movement: function () {
    this.xmov(this.movementParam).ymov(this.movementParam);

  },
  collision: function (collResult, context, callback) {

   ...