JSFiddle - React, Tailwind, and code Playground

by Tgwizman

HTML

<canvas id="c"></canvas>
<div id="menu" hidden=true>
  <input type="button" value="Fullscreen">
  <input type="button" value="Exit Menu">
</div>

CSS

* {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0F0;
  overflow: hidden;
}

#menu {
  background: #0009;
}

#menu * {
  left: calc((100% - 20em)/2);
  width: 20em;
  height: 3em;
  background: #999;
}

#menu *:hover {
  background: #CCC;
}

JavaScript

class Vec {
	constructor(x, y) {
  	this.x = x || 0;
    this.y = y || 0;
  }
  
  plus(p) {
  	return new Vec(
    	this.x + p.x,
      this.y + p.y
    );
  }
  
  minus(p) {
  	return new Vec(
    	this.x - p.x,
      this.y - p.y
    );
  }
  
  times(p) {
  	return new Vec(
    	this.x * p.x,
      this.y * p.y
    );
  }
  
  divide(p) {
  	return new Vec(
    	this.x / p.x,
      this.y / p.y
    );
  }
}

var canvas = document.getElementById('c'),
  ctx = canvas.getContext('2d'),

	debug = false,

  time = {
    debug: false,
    now: new Date().getTime(),
    delta: 0,
    count: 0,
    tick: 0,
    logs: [],
    fps: 0
  },

	tileSize = 64,

  keys = {},
  player = false,
  menu_showing = false;

var menuActions = {
	'Fullscreen': e => {
  	if (document.fullscreenElement) {
    	document.exitFullscreen();
    } else {
    	document.body.requestFullscreen();
    }
  },
	'Exit Menu': () => toggleMenu()
};

function toggleMenu() {
	if (menu_showing) {
  	document.getElementById('menu').style.display = 'none';
  } else {
  	document.getElementById('menu').style.display = 'block';
  }
  menu_showing = !menu_showing;
}

function initMenu() {
	let list = document.getElementById('menu').children;
  for (let i=0; i<list.length; i++) {
  	let item = list[i];
    if (item.value in menuActions) {
    	item.addEventListener('click', menuActions[item.value], false);
    }
  }

	menu_showing = !menu_showing;
  toggleMenu();
}

var camera = {pos: new Vec(0, 0)};

function rotate(origin, point, angle) {
	let pos = point.minus(origin);
  
  let p = new Vec(
  	pos.x * Math.cos(angle) - pos.y * Math.sin(angle),
    pos.x * Math.sin(angle) + pos.y * Math.cos(angle)
  );
  
  return origin.plus(p);
}

class Entity {
	constructor(color, pos, size) {
		this.color = color || '#FFF';
		this.pos = pos || new Vec();
    this.rot = 0;
    this.size = size || new Vec(1, 1);
    this.visible = true;
    this.children = [];
  }
  
  render(origin, angle) {
  	origin = origin || new...