Iso

In this example below you will see how to do a Iso with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JonnyNineToes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JonnyNineToes ©
  • HTML
  • CSS
  • JavaScript
    <canvas id="main" width="320" height="320">Your browser does not support canvas.</canvas>
<!-- Height and width of canvas must be set in these attributes. Using CSS will only stretch the image. -->

<!-- IT'S FREAKIN SLOW!!! -->

/*Downloaded from https://www.codeseek.co/JonnyNineToes/iso-dmvXXm */
    * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	background-color: rgb(0, 0, 0);
}

body, canvas {
	margin: 0;
	padding: 0;
}

canvas {
	display: block;
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-pixelated;
	image-rendering: pixelated;
}



/*Downloaded from https://www.codeseek.co/JonnyNineToes/iso-dmvXXm */
    var cvs = document.getElementById('main');

var tile = {
	'width': 64, 
	'height': 32, 
	'mouse': {
		'x': 0,
		'y': 0
	},
	'dictionary': [ 
		{'name': 'nothing', 'color': null, 'elevation': 0, 'walkable': false, 'graphic': {'top': null, 'left': null, 'right': null}}, 
		{'name': 'stone', 'color': '#888888', 'elevation': 0.25, 'walkable': true, 'graphic': null}, 
		{'name': 'dirt', 'color': '#604000', 'elevation': 0, 'walkable': true, 'graphic': null}, 
		{'name': 'grass', 'color': '#4DBD33', 'elevation': 0.25, 'walkable': true, 'graphic': null}, 
		{'name': 'water', 'color': '#0000FF', 'elevation': 0, 'walkable': false, 'graphic': null}, 
		{'name': 'wood', 'color': '#A04000', 'elevation': 0.25, 'walkable': true, 'graphic': null}, 
		{'name': 'gravel', 'color': '#606060', 'elevation': 0.5, 'walkable': true, 'graphic': null}, 
		{'name': 'wall', 'color': '#BBBBBB', 'elevation': 10, 'walkable': false, 'graphic': null},
		{'name': 'building', 'color': '#666666', 'elevation': 2, 'walkable': true, 'graphic': null}, 
		{'name': 'building', 'color': '#555555', 'elevation': 3, 'walkable': true, 'graphic': null}, 
		{'name': 'building', 'color': '#444444', 'elevation': 4, 'walkable': true, 'graphic': null}, 
		{'name': 'headstone', 'color': '#888888', 'elevation': 1, 'walkable': true, 'graphic': null},
		{'name': 'building', 'color': '#333333', 'elevation': 6, 'walkable': true, 'graphic': null}, 
	],
	'map': [
[7,7,7,7,7,1,1,1,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,4,4,4,4,4,4,4,4,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,1,1,1,1,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
[7,10,10,10,6,1,1,1,6,6,8,8,8,6,9,9,9,9,9,6,6,6,6,6,8,8,8,8,8,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,2,3,9,9,9,9,8,8,8,9,9,9,9,8,6,6,6,6,6,9,9,9,1,1,1,1,8,8,6,6,6,6,6,6,6,6,6,10,10,10,10,6,6,6,6,6,6,6,6,10,10,10,7],
[7,10,10,10,6,1,1,1,6,6,8,8,8,6,9,9,9,9,9,9,9,9,9,6,8,8,8,8,8,6,9,9,9,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,2,3,9,9,9,9,8,8,8,9,9,9,9,8,6,10,10,6,6,9,9,9,1,1,1,1,8,8,6,6,9,9,9,6,8,8,8,10,10,10,10,6,9,9,9,8,8,8,6,10,10,10,7],
[7,10,10,10,6,1,1,1,6,6,8,8,8,6,9,9,9,9,9,9,9,9,9,6,8,8,8,8,8,6,9,9,9,6,8,8,8,3,3,3,2,4,4,4,4,4,4,4,2,3,9,9,9,9,6,8,8,8,1,1,8,8,6,10,10,6,6,9,9,9,1,1,1,1,8,8,6,6,9,9,9,9,8,8,8,10,10,10,10,6,9,9,9,8,8,8,6,10,10,10,7],
[7,6,6,6,6,1,1,1,6,6,6,6,6,6,9,9,9,9,9,9,9,9,9,6,6,6,6,6,6,6,9,9,9,6,8,8,8,6,3,3,2,4,4,4,4,4,4,4,2,3,8,8,8,6,6,8,8,8,1,1,8,8,6,10,10,8,8,8,8,8,1,1,1,1,8,8,8,8,9,9,9,9,8,8,8,6,1,1,6,6,9,9,9,8,8,8,6,6,6,6,7],
[7,9,9,9,6,1,1,1,6,6,6,6,6,6,9,9,9,9,9,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,8,8,8,6,6,3,2,4,4,4,4,4,4,4,2,3,8,8,8,6,6,8,8,8,1,1,8,8,6,10,10,8,8,8,8,8,1,1,1,1,8,8,8,8,9,9,9,9,8,8,8,6,1,1,6,6,9,9,9,6,6,6,9,9,9,9,7],
[7,9,9,9,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,9,9,9,9,7],
[7,9,9,9,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,9,10,10,9,7],
[7,9,9,9,6,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,9,10,10,9,7],
[7,9,9,9,9,9,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,9,9,9,9,7],
[7,9,9,9,9,9,1,1,1,6,6,6,6,6,6,6,6,6,10,10,10,6,9,9,9,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,3,2,4,4,4,4,4,4,4,4,2,3,10,10,10,8,8,8,1,1,8,8,8,8,8,9,9,9,9,9,1,1,1,1,9,9,9,9,8,8,8,6,8,8,8,8,1,1,9,9,9,6,6,6,6,6,9,9,9,9,7],
[7,9,9,9,9,9,1,1,1,9,9,9,9,9,6,8,8,8,10,10,10,6,9,9,9,6,10,10,10,6,6,6,6,6,8,8,8,8,6,6,3,2,4,4,4,4,4,4,4,4,2,3,10,10,10,8,8,8,1,1,8,8,8,8,8,9,9,9,9,9,1,1,1,1,9,9,9,9,8,8,8,6,8,8,8,8,1,1,9,9,9,8,8,6,6,8,8,8,8,6,7],
[7,6,6,6,6,6,1,1,1,9,9,9,9,9,6,8,8,8,10,10,10,6,9,9,9,6,10,10,10,6,9,9,9,6,8,8,8,8,6,6,3,2,4,4,4,4,4,4,4,4,4,2,10,10,10,8,8,8,1,1,8,8,6,6,6,6,6,6,9,9,1,1,1,1,9,9,9,9,8,8,8,6,8,8,8,8,1,1,9,9,9,8,8,6,6,8,8,8,8,6,7],
[7,10,10,10,10,6,1,1,1,9,9,9,9,9,6,8,8,8,10,10,10,6,6,6,6,6,10,10,10,6,9,9,9,6,8,8,8,9,9,9,3,3,2,4,4,4,4,4,4,4,4,2,3,6,9,9,9,9,1,1,8,8,6,10,10,10,10,6,9,9,1,1,1,1,10,10,10,10,8,8,8,6,6,9,9,9,1,1,6,8,8,8,8,6,6,8,8,8,8,6,7],
[7,10,10,10,10,6,1,1,1,6,6,6,6,6,6,6,6,6,10,10,10,6,10,10,10,10,10,10,10,6,9,9,9,6,8,8,8,9,9,9,3,3,2,4,4,4,4,4,4,4,4,2,3,6,9,9,9,9,1,1,8,8,6,10,10,10,10,6,9,9,1,1,1,1,10,10,10,10,6,8,8,6,6,9,9,9,1,1,6,8,8,8,8,6,6,8,8,8,8,6,7],
[7,10,10,10,10,6,1,1,1,6,6,10,10,10,10,10,10,6,10,10,10,6,10,10,10,10,10,10,10,6,9,9,9,3,3,3,3,9,9,9,3,3,2,4,4,4,4,4,4,4,4,2,3,6,9,9,9,9,1,1,6,6,6,10,10,10,10,6,8,8,1,1,1,1,10,10,10,10,6,6,6,6,6,6,9,9,1,1,6,6,6,6,6,6,6,6,6,6,6,6,7],
[7,10,10,10,10,6,1,1,1,6,6,10,10,10,10,10,10,3,3,3,3,3,10,10,10,10,10,10,10,6,9,9,9,3,3,3,3,9,9,9,3,3,2,4,4,4,4,4,4,4,4,2,3,6,9,9,9,9,1,1,9,9,9,10,10,10,10,6,8,8,1,1,1,1,10,10,10,10,9,9,9,8,8,6,9,9,1,1,10,10,10,10,6,8,8,8,9,9,9,6,7],
[7,6,6,6,6,6,1,1,1,6,6,10,10,10,10,10,10,3,3,3,3,3,10,10,10,10,10,10,10,3,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,2,10,10,10,8,8,8,1,1,9,9,9,6,6,6,6,6,8,8,1,1,1,1,8,8,8,9,9,9,9,8,8,10,10,10,1,1,10,10,10,10,6,8,8,8,9,9,9,6,7],
[7,8,8,8,6,6,1,1,1,6,6,10,10,10,10,10,10,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,2,10,10,10,8,8,8,1,1,9,9,9,9,9,8,8,8,8,8,1,1,1,1,8,8,8,9,9,9,9,8,8,10,10,10,1,1,10,10,10,10,6,8,8,8,9,9,9,6,7],
[7,8,8,8,6,6,1,1,1,6,6,10,10,10,10,10,3,3,3,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,2,3,10,10,10,8,8,8,1,1,9,9,9,9,9,8,8,8,8,8,1,1,1,1,8,8,8,9,9,9,9,6,6,10,10,10,1,1,10,10,10,10,6,8,8,8,6,6,8,8,7],
[7,8,8,8,6,6,1,1,1,6,6,10,10,10,10,10,3,2,2,4,4,4,4,4,4,4,4,4,4,4,2,2,2,2,3,3,3,3,3,2,2,4,4,4,4,4,4,4,4,4,2,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,8,8,7],
[7,6,6,6,6,6,1,1,1,6,6,6,6,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,2,2,2,2,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,8,8,7],
[7,10,10,10,6,6,1,1,1,9,9,9,9,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,8,8,8,6,9,9,9,1,1,8,8,8,8,8,6,6,10,10,10,1,1,1,1,8,8,8,6,9,9,9,6,12,12,12,12,1,1,6,6,6,6,6,6,6,6,6,6,8,8,7],
[7,10,10,10,6,6,1,1,1,9,9,9,9,3,2,4,4,4,4,4,2,2,2,2,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,8,8,8,6,9,9,9,1,1,9,9,9,8,8,6,6,10,10,10,1,1,1,1,8,8,8,6,9,9,9,6,12,12,12,12,1,1,6,6,6,6,6,6,8,8,8,8,6,6,7],
[7,10,10,10,6,6,1,1,1,9,9,9,9,2,4,4,4,4,4,2,3,3,3,3,3,3,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,8,8,8,6,9,9,9,1,1,9,9,9,8,8,6,6,10,10,10,1,1,1,1,8,8,8,6,9,9,9,6,12,12,12,12,1,1,6,6,6,6,6,6,8,8,8,8,6,6,7],
[7,10,10,10,6,6,1,1,1,9,9,9,9,2,4,4,4,4,4,2,3,10,10,10,10,3,3,3,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,2,3,3,9,9,9,6,6,6,9,9,9,1,1,9,9,9,6,6,6,6,10,10,10,1,1,1,1,9,9,9,6,9,9,9,6,12,12,12,12,1,1,6,6,6,6,6,6,8,8,6,6,6,6,7],
[7,10,10,10,10,10,1,1,1,9,9,9,3,2,4,4,4,4,2,3,3,10,10,10,10,3,3,3,3,3,2,2,2,4,4,4,4,4,4,4,4,4,2,2,2,3,3,3,3,9,9,9,8,8,8,9,9,9,1,1,9,9,9,6,6,6,6,6,6,6,1,1,1,1,9,9,9,6,9,9,9,6,6,6,6,6,1,1,6,6,6,6,6,6,8,8,6,10,10,10,7],
[7,10,10,10,10,10,1,1,1,6,6,6,2,4,4,4,4,4,2,3,3,10,10,10,10,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,3,3,3,3,1,1,3,9,9,9,8,8,8,9,9,9,1,1,8,8,8,8,6,6,6,6,6,6,1,1,1,1,9,9,9,6,6,6,6,6,10,10,10,10,1,1,6,6,6,6,6,6,6,6,6,10,10,10,7],
[7,10,10,10,10,10,1,1,1,8,8,8,2,4,4,4,4,2,3,3,3,10,10,10,10,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,9,9,9,1,1,10,10,10,6,6,6,6,6,6,6,1,1,8,8,8,8,6,6,11,11,11,6,1,1,1,1,6,6,6,6,6,9,9,9,10,10,10,10,1,1,6,6,6,6,6,6,6,6,6,10,10,10,7],
[7,6,6,6,6,6,1,1,1,8,8,8,2,4,4,4,4,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,8,8,8,6,9,9,9,1,1,10,10,10,10,10,6,9,9,9,9,1,1,8,8,8,8,6,6,11,4,11,6,1,1,1,1,6,8,8,8,8,9,9,9,10,10,10,10,1,1,6,6,6,6,6,6,6,6,6,9,9,9,7],
[7,6,9,9,9,6,1,1,1,8,8,8,2,4,4,4,4,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,8,8,8,6,9,9,9,1,1,10,10,10,10,10,6,9,9,9,9,1,1,6,9,9,9,6,6,11,11,11,6,1,1,1,1,6,8,8,8,8,9,9,9,10,10,10,10,1,1,6,6,6,6,6,6,6,6,6,9,9,9,7],
[7,6,9,9,9,6,1,1,1,8,8,8,2,4,4,4,4,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,8,8,8,6,9,9,9,1,1,10,10,10,10,10,6,9,9,9,9,1,1,6,9,9,9,6,6,6,6,6,6,1,1,1,1,6,8,8,8,8,9,9,9,10,10,10,10,1,1,6,6,6,6,6,6,6,6,6,9,9,9,7],
[7,6,9,9,9,6,1,1,1,6,6,6,3,2,4,4,4,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,6,7],
[7,6,9,9,9,6,1,1,1,10,10,10,10,2,4,4,4,4,2,3,3,3,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,6,7],
[7,6,9,9,9,6,1,1,1,10,10,10,10,10,2,4,4,4,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,10,10,10,10,1,1,9,9,9,9,6,10,10,10,10,10,1,1,8,8,8,9,9,9,6,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,6,9,9,6,1,1,1,10,10,10,10,10,2,4,4,4,4,2,3,3,3,3,3,3,3,3,3,3,3,3,3,8,8,8,3,3,3,3,3,3,10,10,10,10,1,1,9,9,9,9,6,10,10,10,10,10,1,1,8,8,8,9,9,9,6,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,1,1,1,10,10,10,3,3,3,2,4,4,4,4,2,2,3,3,3,3,3,3,3,3,3,3,3,8,8,8,3,3,3,3,3,3,10,10,10,10,1,1,9,9,9,9,6,10,10,10,10,10,1,1,8,8,8,9,9,9,6,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,1,1,1,10,10,10,3,3,3,3,2,4,4,4,4,4,2,2,3,3,3,3,3,3,3,3,3,8,8,8,3,3,3,3,3,3,3,10,10,10,1,1,6,6,6,6,6,6,10,10,10,10,1,1,8,8,8,9,9,9,6,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,1,1,1,10,10,10,3,3,3,3,3,2,4,4,4,4,4,4,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,6,6,1,1,9,9,10,10,10,6,10,10,10,10,1,1,8,8,6,9,9,6,6,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,1,1,1,1,6,6,3,3,3,3,3,3,2,4,4,4,4,4,4,4,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,8,8,8,6,9,9,10,10,10,6,6,6,6,6,1,1,6,6,6,6,6,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,6,6,6,6,1,1,1,1,6,9,9,9,6,8,8,8,3,2,4,4,4,4,4,4,4,4,4,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,8,8,8,6,9,9,10,10,10,6,9,9,9,8,1,1,9,9,6,8,8,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,6,9,9,9,1,1,1,1,9,9,9,6,8,8,8,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,2,2,2,2,2,2,3,3,3,3,3,8,8,8,3,3,3,9,9,9,6,9,9,9,8,1,1,9,9,9,8,8,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,6,9,9,9,1,1,1,1,9,9,9,6,8,8,8,3,3,3,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,2,2,2,2,2,2,2,3,3,3,9,9,9,6,9,9,9,8,1,1,9,9,9,8,8,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,6,9,9,9,6,1,1,1,1,6,6,6,8,8,8,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,2,2,3,3,3,3,3,8,8,8,1,1,9,9,9,8,8,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,8,8,3,3,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,2,3,3,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,7],
[7,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,8,8,3,3,3,3,2,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,7],
[7,8,8,8,6,9,9,9,9,1,1,1,1,9,9,9,9,6,10,10,10,10,3,3,3,3,3,3,3,2,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,8,8,8,1,1,6,10,10,10,10,6,10,10,10,10,1,1,1,1,10,10,10,9,9,9,9,10,10,10,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,8,8,8,6,9,9,9,9,8,1,1,1,9,9,9,9,6,10,10,10,10,6,9,10,10,10,10,3,3,3,3,2,2,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,8,8,8,1,1,6,10,10,10,10,9,10,10,10,10,1,1,1,1,10,10,10,9,9,9,9,10,10,10,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,8,8,8,6,9,9,9,9,8,1,1,1,9,9,9,9,6,10,10,10,10,6,9,10,10,10,10,3,3,3,3,3,3,3,3,2,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,8,8,8,1,1,6,10,10,10,10,9,10,10,10,10,1,1,1,1,8,8,8,8,6,9,9,10,10,10,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,6,6,6,9,9,9,9,8,1,1,1,9,9,9,6,6,10,10,10,10,6,9,10,10,10,10,3,3,3,3,3,3,3,3,3,3,3,2,2,2,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,9,9,9,10,10,10,10,6,10,10,10,10,1,1,1,1,8,8,8,8,6,9,9,6,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,6,6,6,6,8,8,8,8,1,1,1,6,6,6,6,6,6,6,6,6,6,6,10,10,10,10,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,9,9,9,6,6,6,6,6,6,6,6,6,1,1,1,1,6,6,6,6,6,6,6,6,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,6,6,6,6,1,1,1,6,9,9,9,9,6,8,8,8,8,6,6,1,1,6,9,9,9,9,9,3,3,3,3,3,10,10,10,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,3,3,9,9,9,6,12,12,12,12,12,12,12,12,1,1,1,1,12,12,12,12,12,12,12,12,6,6,6,6,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,6,9,9,9,1,1,1,6,9,9,9,9,6,8,8,9,9,9,6,1,1,6,9,9,9,9,9,3,3,3,3,3,10,10,10,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,2,3,9,9,9,6,12,12,12,12,12,12,12,12,1,1,1,1,12,12,12,12,12,12,12,12,6,8,8,8,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,6,9,9,9,1,1,1,6,9,9,9,9,6,8,8,9,9,9,6,1,1,6,9,9,9,9,9,3,3,9,9,9,10,10,10,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,3,6,6,6,6,12,12,12,12,12,12,12,12,1,1,1,1,12,12,12,12,12,12,12,12,6,8,8,8,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,9,6,6,6,9,9,9,1,1,1,6,6,6,6,6,6,6,6,9,9,9,6,1,1,6,6,6,6,6,10,10,10,9,9,9,6,8,8,8,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,3,8,8,8,6,12,12,12,6,6,6,6,6,1,1,1,1,6,6,6,6,6,12,12,12,6,8,8,8,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,9,6,8,8,9,9,9,1,1,1,8,8,8,6,8,8,8,6,9,9,9,6,1,1,8,8,8,8,6,10,10,10,9,9,9,6,8,8,8,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,3,8,8,8,6,12,12,12,6,6,6,6,6,1,1,1,1,6,6,6,6,6,12,12,12,6,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,9,6,8,8,9,9,9,1,1,1,8,8,8,6,8,8,8,6,9,9,9,6,1,1,8,8,8,8,6,10,10,10,9,9,9,6,8,8,8,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,2,8,8,8,6,12,12,12,6,6,1,1,1,1,1,1,1,1,1,1,6,6,12,12,12,6,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,9,6,8,8,9,9,9,1,1,1,8,8,8,6,8,8,8,6,6,6,6,6,1,1,8,8,8,8,6,10,10,10,6,6,6,6,8,8,8,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,8,8,8,6,12,12,12,6,6,1,1,1,1,1,1,1,1,1,1,6,6,12,12,12,6,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,5,5,5,5,5,5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[7,10,10,10,10,6,8,8,8,8,1,1,1,10,10,10,10,8,8,8,6,9,9,9,9,1,1,10,10,10,9,6,9,10,10,10,1,1,10,10,10,10,10,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,8,8,8,6,12,12,12,6,6,1,1,1,1,1,1,1,1,1,1,6,6,12,12,12,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,8,8,8,8,1,1,1,10,10,10,10,8,8,8,6,9,9,9,9,1,1,10,10,10,9,6,9,10,10,10,1,1,10,10,10,10,10,3,2,4,4,4,4,4,4,4,4,4,4,4,4,2,8,8,8,6,12,12,12,6,6,1,1,1,1,1,1,1,1,1,1,6,6,12,12,12,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,8,8,8,8,1,1,1,10,10,10,10,8,8,8,6,9,9,9,9,1,1,10,10,10,9,6,9,10,10,10,1,1,10,10,10,10,10,3,2,4,4,4,4,4,4,4,4,4,4,4,2,3,8,8,8,6,12,12,12,6,6,6,6,6,1,1,1,1,6,6,6,6,6,12,12,12,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,8,8,8,8,1,1,1,10,10,10,10,10,6,6,6,9,9,9,9,1,1,9,9,9,6,6,6,9,9,9,1,1,10,10,10,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,3,9,9,9,6,12,12,12,6,6,6,6,6,1,1,1,1,6,6,6,6,6,12,12,12,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,10,6,8,8,8,8,1,1,1,10,10,10,10,10,6,6,6,6,6,6,6,1,1,9,9,9,6,6,6,6,6,6,1,1,10,10,10,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,2,3,9,9,9,6,12,12,12,12,12,12,12,12,1,1,1,1,12,12,12,12,12,12,12,12,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,6,6,6,6,6,6,6,6,1,1,1,10,10,10,10,10,6,6,6,10,10,10,10,1,1,6,6,6,6,6,9,9,9,6,1,1,10,10,10,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,2,3,9,9,9,6,12,12,12,12,12,12,12,12,1,1,1,1,12,12,12,12,12,12,12,12,6,9,9,9,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,8,8,8,6,9,9,9,9,9,1,1,1,6,6,6,6,9,9,9,6,10,10,10,10,1,1,10,10,10,10,6,9,9,9,6,1,1,8,8,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,9,9,9,6,12,12,12,12,12,12,12,12,1,1,1,1,12,12,12,12,12,12,12,12,6,6,6,6,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,8,8,8,6,9,9,9,9,9,1,1,1,8,8,8,6,9,9,9,6,10,10,10,10,1,1,10,10,10,10,6,10,10,10,10,1,1,8,8,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,1,1,6,6,6,6,6,6,6,6,6,6,1,1,1,1,6,6,6,6,6,6,6,6,6,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,8,8,8,6,9,9,9,9,9,1,1,1,8,8,8,6,9,9,9,6,10,10,10,10,1,1,10,10,10,10,6,10,10,10,10,1,1,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,9,9,9,6,6,10,10,10,10,10,1,1,1,1,9,9,9,6,8,8,8,6,10,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,8,8,8,6,9,9,9,9,9,1,1,1,8,8,8,6,9,9,9,6,10,10,10,10,1,1,10,10,10,10,6,10,10,10,10,1,1,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,9,9,9,9,6,10,10,10,10,10,1,1,1,1,9,9,9,6,8,8,8,6,10,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,9,9,9,9,6,10,10,10,10,10,1,1,1,1,9,9,9,8,8,8,8,6,10,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,9,9,9,9,6,10,10,10,10,10,1,1,1,1,9,9,9,8,8,8,8,6,10,10,10,10,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,9,6,9,9,9,9,9,1,1,1,11,11,11,11,11,11,11,11,11,11,11,11,2,2,11,11,11,11,11,11,11,11,11,11,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,7],
[7,9,9,9,6,9,9,9,9,9,1,1,1,11,3,3,3,3,3,3,3,3,3,3,3,2,2,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,7],
[7,9,9,9,6,9,9,9,9,9,1,1,1,11,3,11,3,11,3,11,3,11,3,11,3,2,2,3,8,8,8,3,11,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,9,9,9,1,1,8,8,8,6,8,8,8,8,8,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,9,6,6,6,6,6,6,1,1,1,11,3,3,3,3,3,3,3,3,3,3,3,2,2,3,8,8,8,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,9,9,9,1,1,8,8,8,6,8,9,9,9,9,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,9,9,9,6,6,6,8,8,8,1,1,1,11,3,11,3,11,3,11,3,11,3,11,3,2,2,3,8,8,8,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,9,9,9,1,1,8,8,8,6,8,9,10,10,9,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,6,6,6,6,6,8,8,8,1,1,1,11,3,3,3,3,3,3,3,3,3,3,3,2,2,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,9,9,9,1,1,6,6,6,6,8,9,10,10,9,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,8,8,8,6,6,8,8,8,1,1,1,11,3,11,3,11,3,11,3,11,3,11,3,2,2,3,11,3,11,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,9,9,9,1,1,9,9,9,6,8,9,9,9,9,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,8,8,8,6,9,9,9,9,1,1,1,11,3,3,3,3,3,3,3,3,3,3,3,2,2,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,6,6,6,1,1,9,9,9,6,8,8,8,8,8,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,8,8,8,6,9,9,9,9,1,1,1,11,3,11,3,11,3,11,3,11,3,11,3,2,2,3,11,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,8,8,8,1,1,9,9,9,6,6,6,6,6,6,6,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,6,8,8,8,6,9,9,9,9,1,1,1,11,3,3,3,3,3,3,3,3,3,3,3,2,2,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,8,8,8,8,1,1,9,9,9,6,9,9,9,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,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,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,8,8,8,8,1,1,9,9,9,6,9,9,9,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,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,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,8,8,8,8,1,1,9,9,9,6,9,9,9,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,11,11,11,11,11,11,11,11,11,1,1,1,11,3,3,3,3,3,3,3,3,3,3,3,2,2,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,7],
[7,3,3,3,3,3,3,3,3,11,1,1,1,11,3,11,3,11,3,11,3,11,3,11,3,2,2,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3,7],
[7,11,3,11,3,11,3,11,3,2,1,1,1,11,3,3,3,3,3,3,3,3,3,3,3,2,2,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,10,10,10,10,10,1,1,9,9,9,9,8,8,9,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,3,3,3,3,3,3,3,3,11,1,1,1,11,3,11,3,11,3,11,3,11,3,11,3,2,2,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,10,10,10,10,10,1,1,9,9,9,9,8,8,9,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,11,3,11,3,11,3,11,3,9,12,12,12,9,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,3,10,10,10,10,10,1,1,9,9,9,9,8,8,9,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,3,3,3,3,3,3,3,3,9,12,12,12,9,3,11,3,11,3,11,3,11,3,11,3,11,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,3,3,3,10,10,10,1,1,9,9,9,9,6,6,9,9,9,9,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,11,3,11,3,11,3,11,3,9,12,12,12,9,3,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,3,8,8,8,10,10,10,1,1,8,8,8,6,6,6,6,8,8,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,3,3,3,3,3,3,3,3,9,12,12,12,9,3,11,3,11,3,11,3,11,3,11,3,11,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,3,8,8,8,6,6,6,1,1,8,8,8,6,6,6,6,8,8,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,3,3,3,3,11,3,11,3,9,10,10,10,9,3,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,3,8,8,8,9,9,9,1,1,10,10,10,10,6,6,6,8,8,8,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,3,3,3,7],
[7,10,10,10,3,3,3,3,3,3,10,10,10,3,3,11,3,11,3,11,3,11,3,11,3,11,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,8,8,8,9,9,9,1,1,10,10,10,10,6,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,10,10,10,7],
[7,10,10,10,3,11,3,11,3,3,10,10,10,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,3,3,3,9,9,9,1,1,10,10,10,10,6,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,1,1,3,3,3,3,3,3,3,3,3,10,10,10,7],
[7,10,10,10,3,3,3,3,3,3,10,10,10,3,3,11,3,11,3,11,3,11,3,11,3,11,3,2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2,3,3,3,3,3,9,9,9,6,6,6,6,6,6,6,6,10,10,10,10,1,1,1,1,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,10,10,10,7],
[7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,1,1,1,1,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7]
		]
	};
	
	var graph = new Graph(tile.map);

	var player = {
		'x': 6,
		'y': 0,
		'color': '#0000FF',
		'name': 'John'
	};
	
	var npc = [
		{
			'x': 23,
			'y': 32,
			'color': '#FF0000',
			'name': 'Steve',
			'delay':{
				'counter': 0,
				'value': 30
			}
		},
		{
			'x': 6,
			'y': 23,
			'color': '#FF3333',
			'name': 'Gary',
			'delay':{
				'counter': 0,
				'value': 8
			}
		},
		{
			'x': 11,
			'y': 5,
			'color': '#CC0000',
			'name': 'Mike',
			'delay':{
				'counter': 0,
				'value': 15
			}
		}
	];
	
var time = 0;

var offset = {
	'x': 0,
	'y': 0
};

var camera = {
	'x': 0,
	'y': 0,
	'width': 0,
	'height': 0
};

function shadeBlend(p, from, to) {
    if(typeof(p)!="number"||p<-1||p>1||typeof(from)!="string"||(from[0]!='r'&&from[0]!='#')||(to&&typeof(to)!="string"))return null; //ErrorCheck
    if(!this.pSBCr)this.pSBCr=(d)=>{
        let l=d.length,RGB={};
        if(l>9){
            d=d.split(",");
            if(d.length<3||d.length>4)return null;//ErrorCheck
            RGB[0]=i(d[0].split("(")[1]),RGB[1]=i(d[1]),RGB[2]=i(d[2]),RGB[3]=d[3]?parseFloat(d[3]):-1;
        }else{
            if(l==8||l==6||l<4)return null; //ErrorCheck
            if(l<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(l>4?d[4]+""+d[4]:""); //3 or 4 digit
            d=i(d.slice(1),16),RGB[0]=d>>16&255,RGB[1]=d>>8&255,RGB[2]=d&255,RGB[3]=-1;
            if(l==9||l==5)RGB[3]=r((RGB[2]/255)*10000)/10000,RGB[2]=RGB[1],RGB[1]=RGB[0],RGB[0]=d>>24&255;
        }
        return RGB;}
    var i=parseInt,r=Math.round,h=from.length>9,h=typeof(to)=="string"?to.length>9?true:to=="c"?!h:false:h,b=p<0,p=b?p*-1:p,to=to&&to!="c"?to:b?"#000000":"#FFFFFF",f=this.pSBCr(from),t=this.pSBCr(to);
    if(!f||!t)return null; //ErrorCheck
    if(h)return "rgb"+(f[3]>-1||t[3]>-1?"a(":"(")+r((t[0]-f[0])*p+f[0])+","+r((t[1]-f[1])*p+f[1])+","+r((t[2]-f[2])*p+f[2])+(f[3]<0&&t[3]<0?")":","+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*10000)/10000:t[3]<0?f[3]:t[3])+")");
    else return "#"+(0x100000000+r((t[0]-f[0])*p+f[0])*0x1000000+r((t[1]-f[1])*p+f[1])*0x10000+r((t[2]-f[2])*p+f[2])*0x100+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*255):t[3]>-1?r(t[3]*255):f[3]>-1?r(f[3]*255):255)).toString(16).slice(1,f[3]>-1||t[3]>-1?undefined:-2);
}

function gradient(x1, y1, x2, y2, amount, color1, color2 = '#000') {
	var color = ctx.createLinearGradient(x1, y1, x2, y2);
	color.addColorStop(0, shadeBlend(amount, color1));
	color.addColorStop(1, color2);
	return color;
}

function drawTile(pixelX, pixelY, width, height, elevation, depth, color, shade = false) {
	var halfW		= width / 2;
	var xPlusW		= pixelX + width;
	var xPlusHalfW	= pixelX + halfW;

	var halfH				= height / 2;
	var yPlusHalfH			= pixelY + halfH;
	var yMinusE				= pixelY - elevation;
	var yMinusEPlusH		= yMinusE + height;
	var yMinusEPlusHalfH	= yMinusE + halfH;
	var yMinusD				= pixelY - depth;
	var yMinusDPlusH		= yMinusD + height;
	var yMinusDPlusHalfH	= yMinusD + halfH;

	var newColor;
	
	ctx.lineWidth = 1;

	if ( shade === false ) {
		newColor = shadeBlend(-0.2, color);
	} else {
		newColor = gradient(pixelX + (width * 0.375), 
							yPlusHalfH, 
							pixelX, 
							yMinusD, 
							-0.2, 
							color);
	}

	ctx.beginPath();
	ctx.moveTo(xPlusHalfW,	yMinusEPlusH);
	ctx.lineTo(xPlusHalfW,	yMinusDPlusH);
	ctx.lineTo(pixelX,		yMinusDPlusHalfH);
	ctx.lineTo(pixelX,		yMinusEPlusHalfH);
	ctx.closePath();
	ctx.fillStyle = newColor;
	ctx.strokeStyle = newColor;
	ctx.stroke();
	ctx.fill();

	if ( shade === false ) {
		newColor = shadeBlend(-0.45, color);
	} else {
		newColor = gradient(pixelX + (width * 0.625), 
							yPlusHalfH, 
							xPlusW, 
							yMinusD, 
							-0.45,
							color);
	}

	ctx.beginPath();
	ctx.moveTo(xPlusHalfW + 1,	yMinusEPlusH);
	ctx.lineTo(xPlusHalfW + 1,	yMinusDPlusH);
	ctx.lineTo(xPlusW,			yMinusDPlusHalfH);
	ctx.lineTo(xPlusW,			yMinusEPlusHalfH);
	ctx.closePath();
	ctx.fillStyle = newColor;
	ctx.strokeStyle = newColor;
	ctx.stroke();
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(xPlusHalfW,	yMinusE);
	ctx.lineTo(xPlusW,		yMinusEPlusHalfH);
	ctx.lineTo(xPlusHalfW,	yMinusEPlusH);
	ctx.lineTo(pixelX,		yMinusEPlusHalfH);
	ctx.lineTo(xPlusHalfW,	yMinusE);

	ctx.closePath();
	ctx.fillStyle = color;
	ctx.strokeStyle = color;
	ctx.stroke();
	ctx.fill();
}

function drawCharacter(character, pixelX, pixelY) {
	pixelX = pixelX + (tile.width / 4);
	pixelY = pixelY + (tile.height / 4);
	
	drawTile(pixelX, pixelY, tile.width / 2, tile.height / 2, tile.height, 0, character.color);
}

function pathFinder(character, x, y) {
	var charXPlus = character.x + x;
	var charYPlus = character.y + y;
	var nextTileElev = tile.dictionary[tile.map[charYPlus][charXPlus]].elevation - tile.dictionary[tile.map[character.y][character.x]].elevation;
	
	if (charYPlus < 0 || charYPlus >= tile.map.length || charXPlus < 0 || charXPlus >= tile.map[0].length) {
		return false;
	}

	if (tile.dictionary[tile.map[charYPlus][charXPlus]].walkable === false) {
		return false;
	}
	
	if (nextTileElev >= 0.75) {
		return false;
	}

	var characters = npc.concat(player);

	for (var i = 0; i < characters.length; i++) {
		if (characters[i].x === charXPlus && characters[i].y === charYPlus) {
			return false;
		} 
	}

	return true;
}

function move(character, x, y) {
	character.x = character.x + x;
	character.y = character.y + y;
}

if (cvs.getContext) {
	var ctx = cvs.getContext('2d');	
	ctx.translate(0.5, 0.5);
	ctx.imageSmoothingEnabled = false;
	
	setInterval(function () {
		ctx.canvas.width = window.innerWidth;
		ctx.canvas.height = window.innerHeight;
		
		ctx.clearRect(0, 0, cvs.width, cvs.height);

		offset.x = (window.innerWidth / 2) - ((player.x + 1) - player.y) * (tile.width / 2);
		offset.y = (window.innerHeight / 2) - (player.x + player.y) * (tile.height / 2);
		
		for (var i = 0; i < npc.length; i++) { 
			if (npc[i].delay.counter >= npc[i].delay.value) {
				npc[i].delay.counter = 0;

				var direction = Math.floor(Math.random() * 5);

				switch(direction) {
					case 0: 
						if (pathFinder(npc[i], -1, 0)) {
							move(npc[i], -1, 0);
						}
						break;
					case 1: 
						if (pathFinder(npc[i], 0, -1)) {
							move(npc[i], 0, -1);
						}
						break;
					case 3: 
						if (pathFinder(npc[i], 1, 0)) {
							move(npc[i], 1, 0);
						}
						break;
					case 4: 
						if (pathFinder(npc[i], 0, 1)) { 
							move(npc[i], 0, 1);
						}
						break;
				}
			} else {
				npc[i].delay.counter++;
			}
		}

		for (var x = 0; x < tile.map.length; x++) {
			for (var y = 0; y < tile.map[0].length; y++) {
				if (tile.dictionary[tile.map[y][x]].color !== null) {
					var pixel = {
						'x': offset.x + (x - y) * (tile.width / 2),
						'y': offset.y + (x + y) * (tile.height / 2)
					}

					var elevation = tile.dictionary[tile.map[y][x]].elevation * tile.height;
					
					if (pixel.x + tile.width >= camera.x && pixel.x - tile.width <= camera.width && pixel.y + tile.height >= camera.y && pixel.y - tile.height < camera.height) {
						var depth = -(2 * tile.height);

						ctx.lineWidth = 1;
						
						drawTile(pixel.x, 
								 pixel.y, 
								 tile.width, 
								 tile.height, 
								 elevation, 
								 depth, 
								 tile.dictionary[tile.map[y][x]].color, 
								 true);
					}

					if (x === player.x && y === player.y){
						drawCharacter(player, pixel.x, pixel.y - elevation);

						camera.x = pixel.x - (window.innerWidth / 2);
						camera.y = pixel.y - (window.innerHeight / 2);
						camera.width = camera.x + window.innerWidth;
						camera.height = camera.y + window.innerHeight;
					}

					for (var i = 0; i < npc.length; i++) {
						if (x === npc[i].x && y === npc[i].y) {
							drawCharacter(npc[i], pixel.x, pixel.y - elevation);
						}
					}
				}
			}
		}
		
		ctx.beginPath();
		ctx.lineWidth = 1;
		ctx.strokeStyle = "red";
		ctx.rect(camera.x, camera.y, camera.width, camera.height);
		ctx.stroke();
		
		var messages = [
			'Tile height: ' + tile.height,
			'Tile width: ' + tile.width,
			'Player: ' + player.x + ', ' + player.y
		];
		
		for (var n = 0; n < npc.length; n++) {
			messages.push(npc[n].name + ': ' + npc[n].x + ', ' + npc[n].y);
		}
	
		ctx.lineWidth = 1;
		ctx.font = '11pt Arial';
		ctx.strokeStyle = '#000';
		ctx.fillStyle = '#FFF';
		
		for(var m = 0, y = 20; m < messages.length; m++, y += 20) {
			ctx.strokeText(messages[m], 10, y);
			ctx.fillText(messages[m], 10, y);
		}
		
		time++;
	}, 34);
	
	document.body.addEventListener('keydown', function(e) {
		switch(e.keyCode) {
			case 37: 
				if (pathFinder(player, -1, 0)) {
					move(player, -1, 0);
				}
				break;
			case 38: 
				if (pathFinder(player, 0, -1)) {
					move(player, 0, -1);
				}
				break;
			case 39: 
				if (pathFinder(player, 1, 0)) {
					move(player, 1, 0);
				}
				break;
			case 40: 
				if (pathFinder(player, 0, 1)) {
					move(player, 0, 1);
				}
				break;
			case 48: 
				tile.width = 64;
				tile.height = 32;
				break;
			case 189: 
				if (tile.height > 8) {
					tile.height -= 8;
					tile.width = tile.height * 2;
				}	
				break;
			case 187: 
				if (tile.height < 128) {
					tile.height += 8;
					tile.width = tile.height * 2;
				}
				break;
		}
	});
}


Comments