Skip to content

Instantly share code, notes, and snippets.

@rendfall

rendfall/tilemap-array.js

Last active August 13, 2016 16:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rendfall/cc14d185f7b4c6c560e16a9aa441a59e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rendfall/cc14d185f7b4c6c560e16a9aa441a59e to your computer and use it in GitHub Desktop.
Download ZIP
Simple implementation of tilemap rendering from array
Raw
tilemap-array.js
// <canvas id="main"></canvas>
function init() {
// The two dimensional map array as it sounds is basically your world and what will be drawn.
// Each number can represet a different graphic or possible enviroment interaction.
// In this tutorial case we only have two possible tiles, zero which is blank and one which is filled.
var map = [
[1,0,1,0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1],
[1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
// The next part grabs the canvas element id of 'main' within our page <body>.
var canvas = document.getElementById('main');
var ctx = canvas.getContext('2d');
var tileSize = 20;
// Set dimensions
var width = map[0].length * tileSize;
var height = map.length * tileSize;
canvas.width = width;
canvas.height = height;
// Mouse events
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
var x = (evt.clientX-rect.left)/(rect.right-rect.left)*canvas.width;
var y = (evt.clientY-rect.top)/(rect.bottom-rect.top)*canvas.height;
return {
x: (x / tileSize)|0,
y: (y / tileSize)|0
};
}
var hoverTile = map[0, 0];
canvas.addEventListener('mousemove', function (evt) {
var mousePos = getMousePos(canvas, evt);
hoverTile = map[mousePos.y][mousePos.x];
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + ', tile: ' + hoverTile;
console.clear();
console.debug(message);
}, false);
canvas.addEventListener('click', function (evt) {
alert(hoverTile);
});
// Using two for loops we run through each of the array rows stored and their element values.
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < map[i].length; j++) {
// Check if the value is a 1, represeting a graphic should be drawn.
if (map[i][j] === 1) {
// Draw a rectangle at i & j position * 20 pixels so that
// our 20x20 pixel squares are correctly positioned.
ctx.fillStyle = '#FF0000';
ctx.fillRect(j * tileSize, i * tileSize, tileSize, tileSize);
}
}
}
}
init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment