JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://img818.imageshack.us/img818/8172/tiles3.png"></script>
<script src="http://img46.imageshack.us/img46/6851/char1f.png"></script>
<canvas id="main-canvas" width="320" height="240"></canvas>
CSS
* {
padding: 0px;
margin: 0px;
}
#helper-canvas {
width: 320px;
height: 320px;
}
JavaScript
var TileSet = function(hasDelimiters, tileSize, numXTiles, numYTiles, imgSrc) {
var hasDelimiters = hasDelimiters;
var tileSize = tileSize;
var numXTiles = numXTiles;
var numYTiles = numYTiles;
var delimit ={ x: 0, y: 0};
var tileSet = new Image();
var tilesArray = new Array();
return {
init: function()
{
tileSet.src = imgSrc;
for(var y=0; y<numXTiles; y++)
{
for(var x=0; x<numYTiles; x++)
{
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.setAttribute("width", tileSize);
canvas.setAttribute("height", tileSize);
if(hasDelimiters)
{
delimit = { x: (x+1), y: (y+1)};
}
else
{
delimit ={ x: 0, y: 0};
}
ctx.drawImage(tileSet, delimit.x+x*tileSize, delimit.y+y*tileSize, tileSize, tileSize, 0, 0, tileSize, tileSize);
tilesArray[y*numYTiles+x]=canvas;
}
}
},
getTile: function(index)
{
return tilesArray[index];
}
}
};
function initKeys()
{
document.onkeydown = function(e)
{
if(e.keyCode==38)
keyMap.u = 1;
if(e.keyCode==40)
keyMap.d = 1;
if(e.keyCode==37)
keyMap.l = 1;
if(e.keyCode==39)
keyMap.r = 1;
};
document.onkeyup = function(e)
{
if(e.keyCode==38)
keyMap.u = 0;
if(e.keyCode==40)
keyMap.d = 0;
if(e.keyCode==37)
keyMap.l = 0;
if(e.keyCode==39)
keyMap.r = 0;
};
}
var Map = [
[27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27],
[27, 0, 1, 1, 1, ...