JAVASCRIPT
var settings = {
tileSize: 16,
rows: 8, // TODO
cols: 8 // TODO
};
var COLORS = {
'1': 'blue',
'2': 'orange',
'3': 'green',
'4': 'purple'
};
var MATRIX = [
['0', '0', '0', '0', '0', '0', '0', '0'],
['0', '0', '0', '0', '0', '0', '0', '0'],
['0', '0', '0', '0', '0', '0', '0', '0'],
['0', '4', '0', '2', '0', '0', '0', '0'],
['0', '4', '0', '2', '2', '0', '0', '0'],
['0', '4', '0', '1', '2', '3', '3', '0'],
['$', '4', '1', '1', '1', '3', '3', '0'],
['0', '0', '0', '0', '0', '0', '0', '0']
];
var
_document = document,
frame = _document.getElementsByClassName('frame')[0],
tile = _document.getElementsByClassName('tile')[0];
var tilePosition = {
r: 0,
c: 0
};
frame.style.width = settings.tileSize * settings.cols + 'px';
frame.style.height = settings.tileSize * settings.rows + 'px';
tile.style.width = settings.tileSize + 'px';
tile.style.height = settings.tileSize + 'px';
var _tilePosition = function() {
var r, c, l = MATRIX.length;
for (r = 0; r < l; r++) {
var rl = MATRIX[r].length;
for (c = 0; c < rl; c++) {
if (MATRIX[r][c] === '$') {
tile.style.top = settings.tileSize * r + 'px';
tile.style.left = settings.tileSize * c + 'px';
tilePosition = {
r: r,
c: c
};
}
};
};
};
_tilePosition();
var _getShadow = function() {
var shadow = '';
var r, c, l = MATRIX.length;
for (r = 0; r < l; r++) {
var rl = MATRIX[r].length;
for (c = 0; c < rl; c++) {
if (MATRIX[r][c] !== '$' && MATRIX[r][c] !== '0') {
shadow += settings.tileSize * (c - tilePosition.c) + 'px ' + settings.tileSize * (r - tilePosition.r) + 'px 0 ' + COLORS[ MATRIX[r][c] ] + ', ';
}
};
};
return shadow.substring(0, shadow.length - 2);
};
tile.style.boxShadow = _getShadow();
