JSFiddle - React, Tailwind, and code Playground

by Erik

HTML

<html><style> /* Bomb Out! by Gynvael Coldwind */
body {margin:0; padding:0} /* Paged Out! #1 */
div {width:30px; height:30px; position:absolute;
font-size:30px} /* Works on Chrome/FF/Edge! */
.bg {width:720; height:480; background:#0c1}
.wall {width:20px; height:20px; border-width:5px;
border-style:outset; background:#ccc}
.brick {border-style:outset; border-width:3px;
width:24px; height:24px; /* ↓ 4-bit BMP (RLE) */
background:url('data:image/bmp;base64,Qk10AAAAAAA
AAEIAAAAoAAAACAAAAAgAAAABAAQAAgAAADIAAAAjLgAAIy4A
AAMAAAADAAAApKSkAMPDwwDa2toAAgIGEQAAAgIGEQAAAgEGI
gAACAAAAAAIERECEQAAAAgREQIRAAAACCIiASIAAAgAAAE')}
.player {width:26px; height:26px; z-index:2;
margin:-8px 0 0 -8px} /* Code is pretty... */
.bomb {margin:-7px 0 0 -4px; z-index:1} /* ... */
.boom {font-size:34px; z-index:2; /* ... */
margin:-8px 0 0 -8px} /* ...compressed ;) */
@keyframes bb {0% {background-color:#cef}
100% {background-color:#9df}}
.bonus {font-size:20px; animation:bb 1s infinite;
text-align: center} /* ...but still readable! */
.txt {width:100%; text-align:center; top:2px;
font-family:sans-serif; font-size:22px}
</style><body><div class="bg"> <!-- ...kinda -->
 <div class="txt">Bomb Out!</div></div></body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMG
WSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script> PX='px'; /* var|0 is a cast to int */
Pos = (e,x,y)=>e.css({left:x|0+PX,top:y|0+PX});
Div = (c,x,y)=>Pos($('<div/>',{class:c}),x,y)
.appendTo(BG); /* ↓ pixel pos ↔ 1D index conv */
I2px = (i)=>[15+(i%23)*30,30+(i/23|0)*30];
Px2i = (x,y)=>((x-15)/30|0)+(y/30-1|0)*23;
Collpx = (x,y,nc)=>!nc.includes(Px2i(x,y))&&
(MMAP[Px2i(x,y)]||[0])[0];
MmapAdd = (c,i)=>MMAP[i]=[c,Div(
[0,'wall','brick','bomb'][c],...I2px(i))];
Rnd = Math.random;
AVATAR = ['&#x1F63E;','&#x1F608;'];
PPXPOS = [[47,62],[647,422]];
PIPOS = [[24],[320]]; PINV = [[1,3],[1,3]];
KEYB = []; MBOMB = []; MMAP = []; MITEM = [];
LASTTM = $.now(); DEAD = 0; END =...