JSFiddle - React, Tailwind, and code Playground

by unsign3d

HTML

<canvas id="box" width="640" height="500">Your browser doesn't support canvas.</canvas>

JavaScript

var box = document.getElementById('box');

var keys = [65536];
var xMouse, yMouse, mouseButton;

// mouse released
box.onmouseup = function () {
    mouseButton = 0;
};

// mouse pressed
box.onmousedown = function (event) {
    mouseButton = event.button;
};

// mouse moved
box.onmousemove = function (event) {
    xMouse = event.clientX;
    yMouse = event.clientY;
};

// key released
box.onkeyup = function (event) {
    keys[event.keyCode] = false;
};

// key pressed
box.onkeydown = function (event) {
    keys[event.keyCode] = true;
};

var sprites = (
    "" + //
" !!!!  " + //
" !oooo " + //
" !oooo " + //
"  **   " + //
"  **XX " + //
"  o*XX " + //
"  **   " + //
"  **   " + //
"  **   " + //
"  ooo  " + //

"  !    " + //
" !!!!  " + //
" !oooo " + //
"  oooo " + //
"  **XXX" + //
"  *oXXX" + //
"  **** " + //
" ** ** " + //
"**   oo" + //
"oo     " + //

"  !!!  " + //
" !oooo " + //
"!!oooo " + //
"  ** XX" + //
"  ***oX" + //
"  ** XX" + //
"  ***  " + //
" ***** " + //
"o** ** " + //
"o    oo" + //

" !!!!  " + //
"!!oooo " + //
" !oooo " + //
"  **   " + //
"  **XXX" + //
"  *oXXX" + //
"  **   " + //
" o***  " + //
"  o**  " + //
"    oo " + //

"       " + //
"       " + //
" !!!!  " + //
" !oooo " + //
" !oooo " + //
"  **   " + //
"  **XX " + //
"  o*XX " + //
" #*# # " + //
"  ###  " + //

"       " + //
"       " + //
"       " + //
"       " + //
"       " + //
"   #   " + //
"#!!!! #" + //
" !oooo " + //
" #o#o# " + //
" ##### " + //

"       " + //
"       " + //
"       " + //
"       " + //
"       " + //
"       " + //
"       " + //
"       " + //
"   #   " + //
"#     #" //
).split("");