Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>

	table {
		background: #153256;
		border-collapse: collapse;
		border: 1px solid black;
	}

	th, td {
		border: 1px solid grey;
	}

	td {
		padding: 3px;
	}

	.selected {
		background: red;
	}

	.target {
		background: black;
	}

	</style>
</head>
<body>
	<script>

	var table = document.createElement('table');
	var tbody = document.createElement('tbody');
	document.body.appendChild(table);
	table.appendChild(tbody);

	const UP = 40;
  const DOWN = 38;
  const LEFT = 37;
  const RIGHT = 39;

	var rows = 27;
	var cols = 48;

	var selected = false;

	for (var i = 0; i < rows; i++) {
		var tr = document.createElement('tr');
		for (var j = 0; j < cols; j++) {
			var td = document.createElement('td');
			tr.appendChild(td);

			if (!selected) {
				selected = true;
				td.classList.add('selected');
			}
		}
		tbody.appendChild(tr);
	}

    document.body.onkeydown = function(event) {
    	if (event.keyCode === UP) {
    		moveUp();
    	} else if (event.keyCode === DOWN) {
    		moveDown();
    	} else if (event.keyCode === LEFT) {
    		moveLeft();
    	} else if (event.keyCode === RIGHT) {
    		moveRight();
    	}
    }

    var x = 0;
    var y = 0;

    var targetX, targetY;


    function moveNext () {

    }

    function moveUp() {
    	y++;
    	if (y >= rows) {
    		y = 0;
    	}

    	moveCell();
    }

    function moveDown() {
    	y--;
    	if (y < 0) {
    		y = rows - 1;
    	}

    	moveCell();
    }

    function moveLeft() {
    	x--;
    	if (x < 0) {
    		x = cols -1;
    	}

    	moveCell();
    }

    function moveRight() {
    	x++;
    	if (x >= cols) {
    		x = 0;
    	}

    	moveCell();
    }

    function moveCell() {
	    var selected = document.querySelector('.selected');

	    if (selected) {
	        selected.classList.remove('selected');
	    }

	    if (x === targetX && y === targetY) {
	    	tbody.children[y].children[x].classList.remove('target');
	    	moveNext()
	    }

	    tbody.children[y].children[x].classList.add('selected');
	}

	</script>

</body>
</html>