JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<div id="ViewPort">
    <cavas id="Screen"></cavas>
    <cavas id="Background"></cavas>
</div>

CSS

#ViewPort {
        background-color:#000000;
        width:500px;
        height:400px;
        position:relative;
    }
    #ViewPort > canvas {
        position:absolute;
        width:500px;
        height:400px;
    }

JavaScript

var Vect = new (function() {
    
});
var Rect = new (function() {
    this.IsColliding = function(a, b) {
         return ! ( a.X + a.W  < b.X || a.X > b.X + b.W ||
                   a.Y + a.H < b.Y || a.Y > b.Y + b.H );
    }
});
var Util = new (function() {
    this.Random = function(min, max) {
		return (Math.random() * ((max - min) + 1)) + min | 0;
	}
    
});

function Building(type, x, y, w, h) {
    this.Type = type;
    this.X = x;
    this.Y = y;
    this.W = w;
    this.H = h;
}

function Map() {
    this.Buildings = [];
}

function Game() {
    this.Map = new Map();
    
    this.Init();    
}
Game.prototype.Init = function() {
    MapSetup();
    DrawBackground();    
}
Game.prototype.MapSetup = function() {
    this.Map.Buildings.push(new Building('House', 
}
Game.prototype.DrawBackground = function() {
    var $bg = document.getElementById('Background');
    var bg = $bg.getContext('2d');
    
    
    function DrawRect(x1, y1, x2, y2, color) {
        this.ctx.beginPath();
        this.ctx.rect(x1, y1, x2, y2);
        this.ctx.fillStyle = color;
        this.ctx.fill();
    }
}
Game.prototype.Start = function() {
    
}


function Main() {
    var game = new Game();
    game.Start();
}