JSFiddle - React, Tailwind, and code Playground

by Cibeles Garcia

HTML

<canvas id="fondo" width="640" height="512" style=display:none; ></canvas>
<canvas id="tintero" width="160" height="128" style=display:none;></canvas>
<canvas id="pantalla" width="480" height="384" style="border:solid 32px black;"></canvas>

JavaScript

var map = new Array();
var sfing='1234567890123456789012345678901234567890';		
map[00] = 'F09999991FF09999991FF09999991FF09999991F';
map[01] = '07FFFFFF6997FFFFFF6107FFFFFF6997FFFFFF61';
map[02] = '8FFFFEFFFFFFFFEFFFFA8FFFEEFFFFFFFEEEEFFA';
map[03] = '8FFFFEFFFFFFEEEEEFFA8FEFFFFEF23EEEFFFFFA';
map[04] = '8FFEEEEFFFFFFEEEFFF67FEFFFFEFA8FFFFFEEEA';
map[05] = '8FFFFFEEEFFFFFEFFFFFFFFFEEFFFA8FFFEEEFFA';
map[06] = '43FFFFFF2BB3FFFFFF2BB3FFFFFF2543FFFFFF25';
map[07] = 'F8F2BBBB5FF4BBBBBB5FF4BBBBBB5FF8FFFFFFAF';
map[08] = 'F8F699991F0999999991F09999991FF8FFFFFFAF';
map[09] = '07FEFFFF618FFFFFFFFA07FFFFFF6107FFFFFF61';
map[10] = '8FFEFEEFFA8FFFFFFFF67FFEEFFFFA8FFFFFFFFA';
map[11] = '8FFEFFEFFA8FFFFFFFFFCFFFFFEFF67FFFFFFFFA';
map[12] = '8FFEEEEFFA8FFFFFFFF23FFFFFEFFFFFFFFFFFFA';
map[13] = '8FFFFFFFFA8FFFFFFFFA8FFEEFFFF23FFFFFFFFA';
map[14] = '43FEEEEF258FFFFFFFFA43FFFFFF2543FFFFFF25';
map[15] = 'F4B3FF2B5F4BBBBBBBB5F4BBBBBB5FF4BB3F2B5F';
map[16] = 'F097FF691FF09999991FF09999991FF0997D691F';
map[17] = '07FFFFFF6107FFFFFF6107FFFFFF6107FFFFFF61';
map[18] = '8FFFFFFFF67FFFFFFFF67FFFFFFFFA8FFFFFFFFA';
map[19] = '8FFEEEFFFFFFF2BB3FFFFFFFFFFFFA8FFFFFFFFA';
map[20] = '8FFFFEEEFFFFF6997FFFFFFFFFFFFA8FFFFFFFFA';
map[21] = '8FFFFFFEE23FFFFFFFF23FFFFFFFFA8FFFFFFFFA';
map[22] = '43FFFFFF2543FFFFFF2543FFFFFF2543FFFFFF25';
map[23] = 'F4B3FF2B5FF4BBBBBB5FF4B3FF2B5FF43FFFF25F';
map[24] = 'F097FF691FF09999991FF097FF691FF07FFFF61F';
map[25] = '07FFFFFF6107FFFFFF6107FFFFFF6107FFFFFF61';
map[26] = '8FFFFFFFF67FFFFFFEE67FFEFFEFF67FFFFFFFFA';
map[27] = '8FFFFFFFFFFFFFFFFEFFFFFFFFFFFFFFFFFFFFFA';
map[28] = '8FFFFFFFFFFFFFFFFEE23FFFFFFFF23FFFFFFFFA';
map[29] = '8FFFFFFFF23FFFFFFFFA8FFEFFEFFA8FFFFFFFFA';
map[30] = '43FFFFFF2543FFFFFF2543FFFFFF2543FFFFFF25';
map[31] = 'F4BBBBBB5FF4BBBBBB5FF4BBBBBB5FF4BBBBBB5F';


var img_link = new Image(); img_link.src = 'https://1.bp.blogspot.com/_8KhblvW3Jdk/TJuKP3aItNI/AAAAAAAAACo/Uo3fBgK2zfg/s1600/zelda_link.gif';
var img_bg = new Image(); img_bg.src =...