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: ["left", 1],
37: ["left", -1],
40: ["top", 1],
38: ["top", -1],
top: 10,
left: 10
};
document.body.onkeydown = function(a) {
a = a || window.event;
a = a.keyCode;
if (b[a]) {
setCell(b.top, b.left, false)
var d = b[a][0];
b[d] += b[a][1];
b[d] < 0 && (b[d] = 19)
b[d] %= 20;
setCell(b.top, b.left, true)
}
return false;
};
};
</script>
</head>
<body>
<div id="matrix"></div>
</body>
</html>