JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<canvas id="main" width="800" height="600"></canvas>

CSS

* {
	margin: 0;
	padding: 0;
	font-size: 14px;
}

JavaScript

var Engine = {
	
	// canvas variables
	canvas: null,
	ctx: null,

	
	// map
	map: [
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,1,1,1,1,1,1,1,1,1,1,1,1,1,2],
		[2,1,1,0,0,1,1,1,1,0,0,0,1,1,2],
		[2,2,1,0,0,0,0,1,0,0,0,0,1,1,2],
		[2,2,1,1,1,1,0,0,0,0,1,0,0,1,2],
		[2,2,2,2,2,1,0,0,0,1,0,0,0,1,2],
		[2,2,1,1,1,1,0,0,0,0,0,0,0,1,2],
		[2,1,1,0,1,0,0,0,0,1,1,0,0,1,2],
		[2,1,0,0,0,0,0,1,0,0,0,0,0,1,2],
		[2,1,0,0,0,0,0,0,0,0,1,0,0,1,2],
		[2,1,0,0,0,0,1,0,0,0,0,0,0,1,2],
		[2,1,0,1,1,0,0,0,0,1,0,0,0,1,2],
		[2,1,0,0,0,0,0,0,0,0,1,0,1,1,2],
		[2,1,1,1,1,1,1,1,1,1,1,1,1,1,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]
	],
	
	// player info
	player: {
		x:1,
		y:1
	},
	
	// tile size
	tileH: 31,
	tileW: 63,
	
	// map position
	mapX: window.innerWidth/2,
	mapY: window.innerHeight/3,
	
	// tile images
	tileSources: [
		"https://orig00.deviantart.net/e88c/f/2017/313/3/4/tile_stone_by_bronzehalo-dbt8cu4.png",
		"https://orig00.deviantart.net/4e4a/f/2017/313/0/5/tile_grass_by_bronzehalo-dbt8csr.png",
		"https://orig00.deviantart.net/aacd/f/2017/313/3/8/tile_water_by_bronzehalo-dbt8cui.png",
		"https://orig00.deviantart.net/b5e7/f/2017/313/6/9/tile_griff_by_bronzehalo-dbt8ept.png"
	],
	
	// for pre-loading
	tileGraphics: [],
	tilesLoaded: 0,
	
	// image preloader
	loadImages: function() {
		for (var i = 0; i < Engine.tileSources.length; i++) {
			Engine.tileGraphics[i] = new Image();
			Engine.tileGraphics[i].src = Engine.tileSources[i];
			Engine.tileGraphics[i].onload = function() {
				Engine.tilesLoaded++;
				if (Engine.tilesLoaded === Engine.tileSources.length) {
					Engine.draw();
				}
			}
		}
	},
	
	// update logic
	update: function() {
		Engine.draw();
	},
	
	// draw the scene
	draw: function() {
		Engine.ctx.clearRect(0, 0, Engine.canvas.width, Engine.canvas.height);
		var drawTile;
		for (var i = 0; i < Engine.map.length; i++) {
			for (var j = 0; j < Engine.map[i].length; j++) {
				drawTile = Engine.map[i][j];
				Engine.ctx.drawImage(Engine.tileGraphics[drawTile], (i -...