SergeiGeek,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cell {
float: left;
height: 12px;
width: 12px;
border: #0000CD 1px solid;
}
#matrix{
width: 280px;
}
.red{
background: #FF0000;
}
</style>
<script>
function createMatrix() {
var matrix = document.getElementById('matrix');
var n = 20 * 20;
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = 'cell';
matrix.appendChild(div);
}
}
function getCell(row, col) {
var divs = document.querySelectorAll('.cell');
return divs[row * 20 + col]
}
function setCell(row, col, val) {
var div = getCell(row, col)
div && div.classList[val ? 'add' : 'remove']('red')
}
window.onload = function() {
createMatrix();
setCell(10, 10, true);
var b = {
39: ["col", 0.05],
37: ["col", -0.05],
40: ["row", 0.05],
38: ["row", -0.05],
row: 10,
col: 10
},
c = {};
function move() {
if (b.col < 0 || b.col > 19|| b.row < 0 || b.row > 19) {alert('game over!'); return}
for (var a in c)
if (c[a]) {
setCell(b.row|0, b.col|0, false)
var d = b[a][0];
b[d] += b[a][1];
setCell(b.row|0, b.col|0, true)
}
window.requestAnimationFrame(move)
}
move();
document.body.onkeydown = function(a) {
a = a || window.event;
a = a.keyCode;
a in b && (c = {}, c[a] = true);
return false
};
};
</script>
</head>
<body>
<div id="matrix"></div>
</body>
</html>