JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

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

CSS

#main {
	margin: 0;
	padding: 0;
	border:1px solid red;
}

JavaScript

var Engine = {
	
	// canvas variables
	canvas: main,
	ctx: main,
	
	// player info
	player: {
		x:6,
		y:6,
		destX:6,  // the destination tile
		destY:6,   
		playerAtDest:true, // true if the player has arrived 
		scene: 0
	},
	
	// tile size
	tileH: 32,
	tileW: 64,
	
	// map position
	mapX: 400,
	mapY: 0,
	
	// tile images
	tileSources: [	
    "https://orig00.deviantart.net/db6d/f/2017/314/5/f/tile_stone_by_bronzehalo-dbtbtcj.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/afe6/f/2017/313/7/d/tile_waterdeep_by_bronzehalo-dbt8cut.png",
    "https://orig00.deviantart.net/33f1/f/2017/313/5/3/tile_waterdeepest_by_bronzehalo-dbt8cv2.png",
    "https://orig00.deviantart.net/f355/f/2017/313/e/b/tile_snowstone_by_bronzehalo-dbt8ctt.png",
    "https://orig00.deviantart.net/436c/f/2017/313/2/e/tile_snow_by_bronzehalo-dbt8cth.png",
    "https://orig00.deviantart.net/6dd2/f/2017/313/c/b/tile_grassdark_by_bronzehalo-dbt8ct5.png",
		"https://orig00.deviantart.net/dc1b/f/2017/313/9/d/tilegriff_by_bronzehalo-dbt89q1.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() {
		var dx = Engine.player.destX;
		var dy = Engine.player.destY;
		var maxPlayerSpeed = 0.15;  // max speed in tiles per frame
		// check if the player needs to move
		if( Math.abs(Engine.player.x - dx) > maxPlayerSpeed  || Math.abs(Engine.player.y - dy) > maxPlayerSpeed ){
			Engine.player.x += Math.max(...