Георгий777,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#output {
width:400px;
height:400px;
border-top: 1px solid gray;
border-left: 1px solid gray;
}
.inner {
border-bottom: 1px solid gray;
border-right: 1px solid gray;
width:19px;
height:19px;
float: left;
}
</style>
</head>
<body>
<div id="output"></div>
<script>
"use strict"
let fields = 20 * 20, i, div, x = 0, direction = 'right', ar = [];
function createMatrix() {
let output = document.getElementById('output');
for(i = 0; i < fields; i+=1) {
div = document.createElement('div');
div.className = 'inner';
output.appendChild(div);
}
}
createMatrix();
function setCell(num, val) {
let output = document.getElementById('output');
let cell = output.children[num];
if(val)
cell.style.backgroundColor = 'red';
else
cell.style.backgroundColor = 'transparent';
}
//setCell(0, true);
function move() {
setCell(x, false);
switch (direction) {
case 'right': x++; break;
case 'left': x--; break;
case 'up': x -= 20; break;
case 'down': x += 20; break;
}
if(x < 0) x = 0;
if(x >= fields) x = fields - 1;
setCell(x, true);
}
setInterval(move,1000);
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37: direction = 'left';break;
case 38: direction = 'up';break;
case 39: direction = 'right';break;
case 40: direction = 'down';break;
}
}
</script>
</body>
</html>