JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id='canvas' height='300p' width='800'></canvas>
CSS
canvas :hover
{
cursor: none;
}
JavaScript
//Buildings Array
var building = new Building();
var bs = new Array();
var ws = new Array();
var scale = 1;
var currentzoom = 1;
var started = -1;
var originx = 0;
var originy = 0;
var mouse={x:0,y:0} //make an object to hold mouse position
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth-20;
Initialize();
function Initialize()
{
BuildBuildings();
BuildWindows();
DrawBuildings();
}
function Start()
{
setInterval(Draw,100);
}
function Draw()
{
ctx.save()
ctx.beginPath()
var gradient = ctx.createLinearGradient(0,0,0,255);
gradient .addColorStop(0, 'rgb(0,0,0)');
gradient .addColorStop(0.81, 'rgb(54,68,71)');
gradient .addColorStop(1, 'rgb(83,95,112)');
ctx.fillStyle = gradient;
ctx.fillRect(originx,originy,canvas.width/scale,canvas.height/scale);
ctx.fillStyle = 'black';
DrawBuildings();
DrawWindows();
ctx.closePath()
ctx.restore()
}
//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;
var cs =["#080808","#1E1E1F","#4A4A4A","#6E6E6E","#525557","#86888A","#ADADAD","#DBDBDB"];
ws.push(new Window(wX,wY,cs[Math.floor(Math.random()*(cs.length))]));
}
}
}
}
//Windows Constructor
function Window(x,y,color)
{
this.X = x;
this.Y = y;
this.Height = 5;
this.Width = 5;
...