JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<canvas id="cvs" width=800 height=600></canvas>
</body>
JavaScript
var gJS = function() {
"use strict";
function a() {
null === a.self && (a.self = this),
this.state = a.State.UNINITIALIZED,
this.core = new a.Core(this),
this.evtHandler = new EventHandler,
this.view = null ,
this._bindListeners()
}
return a.self = null ,
a.prototype._bindListeners = function() {
var b = this;
this.evtHandler.addListener(a.Evt.ENGINE_START, function() {
b.core._start()
}
),
this.evtHandler.addListener(a.Evt.ENGINE_STOP, function() {
b.core._stop()
}
)
}
,
a.prototype.start = function() {
this.evtHandler.trigger(a.Evt.ENGINE_START)
}
,
a.prototype.stop = function() {
this.evtHandler.trigger(a.Evt.ENGINE_STOP)
}
,
a.prototype.setView = function(a) {
if (a.constructor !== HTMLCanvasElement)
throw new Error("Argument must be canvas element");
this.core._setView(a)
}
,
a.prototype.bindKeyboard = function(a) {
this.keyHandler.bind(a)
}
,
a.prototype.getCanvas = function() {
return this.core._renderer.getCanvas()
}
,
a.prototype.setScene = function(a) {
return this.core._setScene(a),
this
}
,
a.prototype.getView = function() {
return this.core._renderer.getContext()
}
,
a
}
()
, gJS = gJS || {};
gJS.Core = function() {
"use strict";
function a(a) {
this.FPS = 60,
this._engine = a,
this._runs = !1,
this._now = 0,
this._then = 0,
this._lastTime = Date.now(),
this._delta = 0,
this._fps = 0,
this._lastFps = 0,
this._tick = 0,
this._loopId = null ,
this._interval = 1e3 / this.FPS,
this._renderer = null ,
this._gameObjects = []
}
return a.showFps = !0,
a.prototype._setView = function(a) {
...