JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="game" width="1280" height="720" tabindex="1"></canvas>
JavaScript
(function () {
function Vec2(x, y) {
this.x = x || 0;
this.y = y || 0;
}
Vec2.prototype.set = function (x, y) {
this.x = x || 0;
this.y = y || 0;
return this;
};
Vec2.prototype.addMultScalar = function (v, s) {
this.x += v.x * s;
this.y += v.y * s;
return this;
};
Vec2.prototype.zero = function () {
this.x = 0;
this.y = 0;
return this;
};
var canvas = document.getElementById("game"),
ctx = canvas.getContext("2d"),
w = canvas.width,
h = canvas.height
;
ctx.font = "normal 40px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
var keys = [];
var AssetState = {
None: 0,
Loading: 1,
Ready: 2,
Failed: 3
};
function Assets() {
var state = AssetState.None,
pendingCount = 0,
loadedCount = 0,
failedCount = 0,
items = {};
var loaded = function (img) {
loadedCount++;
if (loadedCount == pendingCount && failedCount == 0) {
state = AssetState.Ready;
} else if (loadedCount + failedCount == pendingCount) {
state = AssetState.Failed;
}
};
var failed = function (img) {
failedCount++;
items[img.key] = null;
if (loadedCount + failedCount == pendingCount) {
state = AssetState.Failed;
}
};
var load = function (resources) {
// Collect images
var k, i, cnt = 0, pending = [];
for (k in resources) {
...