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
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Iso</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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. -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/javascript-astar/0.4.1/astar.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/JonnyNineToes/iso-bMEJew */
* {
	-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: #000;
}

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-bMEJew */
// TO DO:
// - do check if graphic/sprite exists for tile, if so - use it, if not, have program generate a tile
// - optimize = remove all unneccessary calculations and store them in vars at the beginning of the script
// - make buildings, walls turn transparent when player walks behind them
// - break map, tile dictionary, NPCs, and player out into separate files (GitHub)
// - implement A* pathfinding
// - try reversing all [y][x] coords... see what happens...
// - prevent characters outside viewport from being drawn
// - fix drawTile so that you can reference tiles in the dictionary
// - replace single tiles with tilesheet, have dictionary reference pixel coords+dimension sections
// - update all code to latest javascript standard
// - elevation and depth will have to be calculated on the fly
// 	- Will all sprites need to be redrawn upon zoom in/out?
// - a sample tile: "data:image/png;base64,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"

var cvs = document.getElementById("main");
var ctx;

var tile = {
	width: 64,
	height: 32,
	depth: null,
	mouse: {
		x: 0,
		y: 0
	},
	'dictionary': [ 
		{'name': 'nothing', 'color': null, 'elevation': 0, 'walkable': false, sprite: null}, 
		{'name': 'stone', 'color': '#888888', 'elevation': 0.25, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'dirt', 'color': '#604000', 'elevation': 0, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'grass', 'color': '#4DBD33', 'elevation': 0.25, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'water', 'color': '#0000FF', 'elevation': 0, 'walkable': false, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'wood', 'color': '#A04000', 'elevation': 0.25, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'gravel', 'color': '#606060', 'elevation': 0.5, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'wall', 'color': '#BBBBBB', 'elevation': 10, 'walkable': false, sprite: {
				data: null,
				image: null
			}},
		{'name': 'building', 'color': '#666666', 'elevation': 2, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'building', 'color': '#555555', 'elevation': 3, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'building', 'color': '#444444', 'elevation': 4, 'walkable': true, sprite: {
				data: null,
				image: null
			}}, 
		{'name': 'headstone', 'color': '#888888', 'elevation': 1, 'walkable': true, sprite: {
				data: null,
				image: null
			}},
		{'name': 'building', 'color': '#333333', 'elevation': 6, 'walkable': true, sprite: {
				data: null,
				image: 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]
		]
};

tile.depth = (2 * tile.height) * -1;

for(var a = 0; a < tile.dictionary.length; a++){
	if (tile.dictionary[a].elevation !== 0) {
		tile.dictionary[a].elevation *= tile.height;
	}
}

// var graph = new Graph(tile.map);

// var charTemplate = {
// 	name: "String", // eventually I'll use this somehow
// 	color: "#XXXXXX", // color of placeholder... and other effects?
// 	x: 0, // tile x coord of current position
// 	y: 0, // tile y coord of current position
// 	elevation: 0, // how tall the character's placeholder is
// 	path: [], // holds the A* pathfinder results
// 	destination: {
// 		// holds the intended tile destination for the character
// 		x: 0,
// 		y: 0
// 	},
// 	range: 5, // npc's sensory range (vision, sound) - for determining whether or not it will chase the player?
// 	state: 0, // behavioural state; 0=neutral, 1=chase the player // maybe negative numbers could be used, -1 could be run from the player
// 	delay: { // determines character's movement speed
// 		counter: 0,
// 		value: 30
// 	},
// 	sprite: { // sprite image data
// 		data: null,
// 		image: null
// 	}
// }

const PLAYER = 0; // determines which element in the character array is the player

var character = [
	{
		name: "John",
		color: "#0000FF",
		x: 6, 
		y: 0, 
		elevation: 1,
		sprite: {
			data: null,
			image: null
		},
		delay: {
			counter: 0,
			value: 10
		}
	},
	{
		x: 23,
		y: 32,
		color: "#FF0000",
		name: "Steve",
		elevation: 1.25,
		sprite: {
			data: null,
			image: null
		},
		delay: {
			counter: 0,
			value: 30
		}
	},
	{
		x: 6,
		y: 23,
		color: "#FF3333",
		name: "Gary",
		elevation: 0.75,
		sprite: {
			data: null,
			image: null
		},
		delay: {
			counter: 0,
			value: 8
		}
	},
	{
		x: 2,
		y: 11,
		color: "#CC0000",
		name: "Mike",
		elevation: 1,
		sprite: {
			data: null,
			image: null
		},
		delay: {
			counter: 0,
			value: 15
		}
	}
];

for(var b = 0; b < character.length; b++){
	if (character[b].elevation !== 0) {
		character[b].elevation *= tile.height;
	}
}

var time = 0;

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

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

function recalculate() {
	
}

function convertHex(hex, opacity) {
    hex = hex.replace('#', '');
    r = parseInt(hex.substring(0,2), 16);
    g = parseInt(hex.substring(2,4), 16);
    b = parseInt(hex.substring(4,6), 16);

    result = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
    return result;
}

// Lighten
// var shadedcolor1 = shadeBlend(0.75, '#FF343B');
// Darken
// var shadedcolor3 = shadeBlend(-0.5, 'rgb(234,47,120)');
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 createTileSprite(tileDictionaryRef, xOffset = 0, yOffset = 0, width = tile.width, height = tile.height, depth = tile.depth, shade = true, transparent = false) {
	var cvsCache = document.createElement("canvas");
	var imgFinal = new Image();
	
	var elevation = tileDictionaryRef.elevation;
	depth *= -1; // for this purpose, this number needs to be positive

	var color = tileDictionaryRef.color;
	var newColor;
	
	var hPlusE = height + elevation;
	var hPlusEPlusD = hPlusE + depth;
	var halfH = height / 2;
	var halfHPlusE = halfH + elevation; 
	var halfHPlusEPlusD = halfHPlusE + depth;
	
	var halfW = width / 2;
	
	cvsCache.width = width;
	cvsCache.height = hPlusEPlusD;
	var ctxCache = cvsCache.getContext("2d");

	if (transparent) {
		color = shadeBlend(0, color, "rgba(255,255,255,0.01)");
	}
	
	ctxCache.lineWidth = 1;

	// left side
	if (shade === false) {
		newColor = shadeBlend(-0.2, color);
	} else {
		newColor = gradient(
			halfW,
			halfHPlusE,
			xOffset,
			halfHPlusEPlusD,
			-0.2,
			color
		);
	}

	ctxCache.beginPath();
	ctxCache.moveTo(0, halfH);
	ctxCache.lineTo(halfW, height);
	ctxCache.lineTo(halfW, hPlusEPlusD);
	ctxCache.lineTo(0, halfHPlusEPlusD);
	// ctxCache.moveTo(0, halfH); 
	ctxCache.closePath();
	ctxCache.fillStyle = newColor;
	ctxCache.strokeStyle = newColor;
	ctxCache.stroke();
	ctxCache.fill();

	// right side
	if (shade === false) {
		newColor = shadeBlend(-0.45, color);
	} else {
		newColor = gradient(
			halfW,
			halfHPlusE,
			width,
			halfHPlusEPlusD,
			-0.45,
			color
		);
	}

	ctxCache.beginPath();
	ctxCache.moveTo(halfW, height);
	ctxCache.lineTo(width, halfH);
	ctxCache.lineTo(width, halfHPlusEPlusD);
	ctxCache.lineTo(halfW, hPlusEPlusD);
	// ctxCache.moveTo(halfW, height);
	ctxCache.closePath();
	ctxCache.fillStyle = newColor;
	ctxCache.strokeStyle = newColor;
	ctxCache.stroke();
	ctxCache.fill();
	
	// top
	if (tileDictionaryRef.sprite.data !== null) {
		// choppy - only works some of the time
		// will I need to create yet another canvas and context to render base64 data?
		var imgTemp = new Image();
		imgTemp.src = tileDictionaryRef.sprite.data;
		ctxCache.drawImage(imgTemp, 0, 0);
	} else {
		ctxCache.beginPath();
		ctxCache.moveTo(halfW, 0);
		ctxCache.lineTo(width, halfH);
		ctxCache.lineTo(halfW, height);
		ctxCache.lineTo(0, halfH);
		// ctxCache.lineTo(halfW, 0);

		// Alt formula
		// ctxCache.moveTo(x + (halfW) + 1, 	(y - elevation) + 1);
		// ctxCache.lineTo(x + width,			(y - elevation) + halfH);
		// ctxCache.lineTo(x + width,			(y - elevation) + halfH + 1);
		// ctxCache.lineTo(x + (halfW) + 1, 	(y - elevation) + height);
		// ctxCache.lineTo(x + halfW,		(y - elevation) + height);
		// ctxCache.lineTo(x + 1,				(y - elevation) + halfH + 1);
		// ctxCache.lineTo(x + 1,				(y - elevation) + halfH);
		// ctxCache.lineTo(x + halfW,		(ycoord - elevation) + 1);
		// ctxCache.lineTo(x + (halfW) + 1,	(y - elevation) + 1);

		ctxCache.closePath();
		ctxCache.fillStyle = color;
		ctxCache.strokeStyle = color;
		ctxCache.stroke();
		ctxCache.fill();
	}
	
	console.log(cvsCache.toDataURL("image/png"));
	imgFinal.src = cvsCache.toDataURL("image/png");
	return imgFinal;
}

function createCharacterSprite(char) {
	// console.log(char.name);
	// createTileSprite(char, tile.width / 4, tile.height / 4, tile.width / 2, tile.height / 2, 0, false)
	return createTileSprite(
		char,
		tile.width / 4,
		tile.height / 4,
		tile.width / 2,
		tile.height / 2,
		0,
		false
	);
}

function pathFinder(char, x, y) {
	var charXPlus = char.x + x;
	var charYPlus = char.y + y;
	var nextTileElev = tile.dictionary[tile.map[charYPlus][charXPlus]].elevation - tile.dictionary[tile.map[char.y][char.x]].elevation;

	if (charXPlus < 0 ||
		charXPlus >= tile.map[0].length ||
		charYPlus < 0 ||
		charYPlus >= tile.map.length) {
		return false;
	}

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

	if (nextTileElev >= 0.75) {
		return false;
	}

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

	return true;
}

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

window.onload = function() {
	for (var d = 0; d < tile.dictionary.length; d++) {
		if (tile.dictionary[d].sprite !== null) {
			tile.dictionary[d].sprite.image = createTileSprite(tile.dictionary[d]);
		}
	}
	
	for (var e = 0; e < character.length; e++) {
		character[e].sprite.image = createCharacterSprite(character[e]);
	}
};

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 - (character[PLAYER].x + 1 - character[PLAYER].y) * (tile.width / 2);
		offset.y = window.innerHeight / 2 - (character[PLAYER].x + character[PLAYER].y) * (tile.height / 2);

		for (var f = 0; f < character.length; f++) {
			// dictates npc movement
			if (f !== PLAYER) {
				if (character[f].delay.counter >= character[f].delay.value) {
					character[f].delay.counter = 0;

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

					switch (direction) {
						case 0: // LEFT
							if (pathFinder(character[f], -1, 0)) {
								move(character[f], -1, 0);
							}
							break;
						case 1: // UP
							if (pathFinder(character[f], 0, -1)) {
								move(character[f], 0, -1);
							}
							break;
						case 3: // RIGHT
							if (pathFinder(character[f], 1, 0)) {
								move(character[f], 1, 0);
							}
							break;
						case 4: // DOWN
							if (pathFinder(character[f], 0, 1)) {
								move(character[f], 0, 1);
							}
							break;
					}
				} else {
					character[f].delay.counter++;
				}
			}
		}

		// I don't know why, but things just have to be like this, with the y coords of the map coming first
		// because if you think about it, the first ROW of the map should be the x coordinates, which would be the first element of the map array = a COLUMN
		// eventually, fix this so that x coordinates come first
		// as it stands reversing these two produces some unexplainable results, like "1"s being recognized as "0"s (x:0, y:2)
		for (var y = 0; y < tile.map.length; y++) {
			for (var x = 0; x < tile.map[y].length; x++) {
				var pixel = {
					x: Math.round(offset.x + (x - y) * (tile.width / 2)),
					y: Math.round(offset.y + (x + y) * (tile.height / 2))
				};
				
				if (tile.dictionary[tile.map[y][x]].sprite !== null) { 
					var elevation = tile.dictionary[tile.map[y][x]].elevation;

					if ((pixel.x + tile.width >= camera.x && 
						 pixel.x - tile.width <= camera.width &&
						 (pixel.y - elevation) + tile.height >= camera.y &&
						 (pixel.y - elevation) - tile.height <= camera.height)
					   ) {
						ctx.drawImage(tile.dictionary[tile.map[y][x]].sprite.image, 
									  pixel.x, 
									  pixel.y - elevation,
									  tile.width,
									  tile.height + elevation + (tile.depth * -1));
					}
				}
				
				for (var g = 0; g < character.length; g++) {
					if (x === character[g].x && y === character[g].y) {
						ctx.drawImage(character[g].sprite.image, 
									  pixel.x + (tile.width / 4), 
									  pixel.y - character[g].elevation,
									  tile.width / 2,
									  (tile.height / 2) + character[g].elevation);
					}

					if (g === PLAYER) {
						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;
					}
				}
			}
		}

		// crosshairs
		// ctx.strokeStyle = '#FFF';
		// ctx.lineWidth = 1;
		// var halfwidth = window.innerWidth / 2;
		// var halfheight = window.innerHeight / 2;
		// ctx.beginPath();
		// ctx.moveTo(halfwidth - 10, halfheight);
		// ctx.lineTo(halfwidth + 10, halfheight);
		// ctx.moveTo(halfwidth, halfheight - 10);
		// ctx.lineTo(halfwidth, halfheight + 10);
		// ctx.stroke();

		var messages = [
			"Tile height: " + tile.height,
			"Tile width: " + tile.width
		];

		for (var h = 0; h < character.length; h++) {
			var message = character[h].name;
			if (h === PLAYER) {
				message += " (PLAYER)";
			}
			message += ": " + character[h].x + ", " + character[h].y;
			
			messages.push(message);
		}

		ctx.lineWidth = 1;
		ctx.font = "11pt Arial";
		ctx.strokeStyle = "#000";
		ctx.fillStyle = "#FFF";

		for (var i = 0, j = 20; i < messages.length; i++, j += 20) {
			ctx.strokeText(messages[i], 10, j);
			ctx.fillText(messages[i], 10, j);
		}

		time++;
	}, 34);

	// $(window).on('mousemove', function(e) {
	// e.pageX = e.pageX - self.tileColumnOffset / 2 - self.originX;
	// e.pageY = e.pageY - self.tileRowOffset / 2 - self.originY;
	// tileX = Math.round(e.pageX / self.tileColumnOffset - e.pageY / self.tileRowOffset);
	// tileY = Math.round(e.pageX / self.tileColumnOffset + e.pageY / self.tileRowOffset);

	// var start = graph.grid[character[PLAYER].x][character[PLAYER].y];
	// var end = graph.grid[6][10];
	// var result = astar.search(graph, start, end);

	document.body.addEventListener("keydown", function(e) {
		switch (e.keyCode) {
			case 37: // LEFT ARROW
				if (pathFinder(character[PLAYER], -1, 0)) {
					move(character[PLAYER], -1, 0);
				}
				break;
			case 38: // UP ARROW
				if (pathFinder(character[PLAYER], 0, -1)) {
					move(character[PLAYER], 0, -1);
				}
				break;
			case 39: // RIGHT ARROW
				if (pathFinder(character[PLAYER], 1, 0)) {
					move(character[PLAYER], 1, 0);
				}
				break;
			case 40: // DOWN ARROW
				if (pathFinder(character[PLAYER], 0, 1)) {
					move(character[PLAYER], 0, 1);
					
				}
				break;
			case 48: // 0
				tile.width = 64;
				tile.height = 32;
				break;
			case 189: // - (MINUS)
				if (tile.height > 8) {
					tile.height -= 8;
					tile.width = tile.height * 2;
				}
				break;
			case 187: // = (EQUAL)
				if (tile.height < 128) {
					tile.height += 8;
					tile.width = tile.height * 2;
				}
				break;
		}
	});
}

Comments