JSFiddle - React, Tailwind, and code Playground

by rionmonster

HTML

<canvas id='canvas' height='300p' width='800'></canvas>
<div id='zoom' style='width: 100%; text-align:center;'>1x Zoom</div>
<div id='start' style='width: 100%; text-align:center;'>START</div>

CSS

canvas 
{ border: 2px solid black; 
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.11, rgb(83,95,112)),
    color-stop(0.32, rgb(54,68,71)),
    color-stop(0.81, rgb(0,0,0))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(83,95,112) 11%,
    rgb(54,68,71) 32%,
    rgb(0,0,0) 81%
);
}

canvas :hover
{
     cursor: none;   
}

JavaScript

//Buildings Array
var building = new Building();
var bs = new Array();
var ws = new Array();
var bad = 0;
var scale = 1;
var currentzoom = 1;
var originx = 0;
var originy = 0;
var canvas = document.getElementById('canvas');

var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth-20;


BuildBuildings();
DrawBuildings();
BuildWindows();
DrawWindows();
PlaceBadGuy();

setInterval(Flicker,100);
setInterval(BadGuyMove,5000);

setInterval(Draw,100);

function Initialize()
{
    BuildBuildings();
    BuildWindows();
}


function Draw()
{
    
}


//Building Constructor
function Building()
{
    this.Floors = Math.floor((Math.random()+1)*9);
    this.RoomsPerFloor = Math.floor((Math.random()+1)*3);
    this.Height = (this.Floors*12);
    this.Width = (this.RoomsPerFloor*12) - 2;
    this.X = 0;
    this.Y = 300 - this.Height;
}

//Build Windows
function BuildWindows()
{   
    for(var b=0; b < bs.length; b++)
    {
         var wY = bs[b].Y-9;
         for(var f=0; f < bs[b].Floors; f++)
         {
              wY = wY + 11;
              var wX = bs[b].X-10;
              for(var r=0; r < bs[b].RoomsPerFloor; r++)
              {
                  wX = wX + 11;
                  ws.push(new Window(wX,wY));
              }
         } 
    }
}

//Windows Constructor
function Window(x,y)
{
     this.X = x;
     this.Y = y;
     this.Height = 5;
     this.Width = 5;
     this.HasPerson = false;
     this.HasObject = false;
}

function BuildBuildings()
{
    bs[0] = new Building();
    var width = bs[0].Width;
    var counter = 1;
    while(width <= canvas.width)
    {
         bs[counter] = new Building();
         bs[counter].X = width;
         width += (bs[counter].Width);
         counter++;
    }
}

function DrawBuildings()
{
    for(var i = 0; i<bs.length; i++)
    {
        ctx.fillRect(bs[i].X,bs[i].Y,bs[i].Width,bs[i].Height);
    }
}
function DrawWindows()
{
    for(var i = 0; i<ws.length; i++)
    {
        var cs...