var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var CELL_COLOR = 'red';
var BG_COLOR = 'white';
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 getCellEl (row, col) {
return document.getElementById('matrix').children[(row - 1) * 20 + col - 1];
}
function setCell(row, col, val) {
var cell = getCellEl(row, col);
cell.style.backgroundColor = (val == true) ? CELL_COLOR : BG_COLOR;
}
function getCell(row, col) {
var cell = getCellEl;
return cell.style.backgroundColor == CELL_COLOR;
}
window.onload = function() {
var currentRow = 1;
var currentCol = 1;
createMatrix();
setCell(currentRow, currentCol, true);
window.onkeydown = function(event) {
setCell(currentRow, currentCol, false);
switch (event.keyCode) {
case KEY_LEFT:
currentCol -= 1;
break;
case KEY_UP:
currentRow -= 1;
break;
case KEY_DOWN:
currentRow += 1;
break;
case KEY_RIGHT:
currentCol += 1;
break;
}
if ( currentRow < 1) {
currentRow = 1;
}
else if (currentRow > 20) {
currentRow = 20;
}
if (currentCol < 1) {
currentCol = 1;
}
else if (currentCol > 20) {
currentCol = 20;
}
setCell(currentRow, currentCol, true);
}
}
Как заставить этот квадрат двигаться постоянно? без нажатия клавиш в одном направлении? И менять курс клавишами на клавиатуре. А по достижении стенки - выводить сообщение о поражении? =))