Instantly share code, notes, and snippets.

@dekdevy dekdevy/jstiles.js
Last active Oct 14, 2016

Embed
What would you like to do?
Simple 2D Tilemap and Recording Framework
var map;
var canvas;
var dimensions;
var mapSize;
var unitsize;
var frames = new Array();
function init(basecolor, tileamount, boardsize) {
// init
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
dimensions = boardsize;
mapSize = tileamount;
unitSize = dimensions / mapSize;
canvas.width = canvas.height = dimensions;
// create array
map = new Array();
for (var i = 0; i < mapSize; i++) {
map[i] = new Array();
for (var j = 0; j < mapSize; j++) {
map[i][j] = new Object();
map[i][j].color = basecolor;
}
}
}
// draw array
function drawFrame(framenumber) {
for (var x = 0; x < mapSize; x++)
for (var y = 0; y < mapSize; y++) {
ctx.fillStyle = frames[framenumber][x][y].color;
ctx.fillRect(x * unitSize, y * unitSize, unitSize, unitSize);
}
if ((framenumber + 1) < frames.length) {
console.log(frames[framenumber].displaytime);
sleep(frames[framenumber].displaytime).then(() => {
drawFrame(framenumber + 1);
});
}
}
function play() {
drawFrame(0);
}
function capture(time) {
if (time == null) time = 300;
//copy color array into framelist
var frame = frames[frames.length] = new Array();
for (var i = 0; i < mapSize; i++) {
frame[i] = new Array();
for (var j = 0; j < mapSize; j++) {
frame[i][j] = new Object();
frame[i][j].color = map[i][j].color;
}
}
frame.displaytime = time;
}
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment