JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0px; padding: 0px;
		}
		.game-field {
			width: 300px; height: 300px;
			margin: auto; margin-top: 50px; margin-bottom: 10px;
			border: 1px solid black;
			line-height: 0px;
		}
		.cell {
			width: 30px; height: 30px;
			border: 1px solid black;
			box-sizing: border-box;
			display: inline-block;
		}
		.message-field {
			width: 300px; height: 50px;
			text-transform: uppercase;
			padding: 10px 10px; 
			border: 2px solid black;
			margin: auto;
			font-size: 14px; font-weight: bold;
			text-align: center;
		}
		img {
			width: 300px; height: 300px;
		}
	</style>
</head>
<body>

	<div class="game-field"></div>
	<div class="message-field">wasd - передвижение <br> 
	цель: красный квадратик</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

JavaScript

let gameField = document.querySelector('.game-field');
let messageField = document.querySelector('.message-field')

let cells = new Array();

function movement(event) {
	if (event.key == 'd') {
		currentPosition.style.backgroundColor = 'white';

		if (currentY == 10) {
			currentY = 10;
		} else {
			currentY += 1;
		}
		currentPosition = cells[currentX][currentY];
		currentPosition.style.backgroundColor = 'black'
	}

	if (event.key == 'a') {
		currentPosition.style.backgroundColor = 'white';

		if (currentY == 1) {
			currentY = 1;
		} else {
			currentY -= 1;
		}
		currentPosition = cells[currentX][currentY];
		currentPosition.style.backgroundColor = 'black'
	}

	if (event.key == 's') {
		currentPosition.style.backgroundColor = 'white';

		if (currentX == 10) {
			currentX = 10;
		} else {
			currentX += 1;
		}
		currentPosition = cells[currentX][currentY];
		currentPosition.style.backgroundColor = 'black'
	}

	if (event.key == 'w') {
		currentPosition.style.backgroundColor = 'white';

		if (currentX == 1) {
			currentX = 1;
		} else {
			currentX -= 1;
		}
		currentPosition = cells[currentX][currentY];
		currentPosition.style.backgroundColor = 'black'
	}

	if (currentX == redSquareX && currentY == redSquareY) {
		gameField.innerHTML = '<img src="https://pbs.twimg.com/media/DLjt_eTWAAEGCFB.jpg">';
		messageField.textContent = 'Испугался?';
	}
}

for (let i = 1; i <= 10; i ++) {

	cells[i] = new Array();

	for (let j = 1; j <= 10; j++) {

	let cell = document.createElement('div');
	cell.classList.add('cell');
	cell.id = ((i - 1) * 10) + j ;
	cells[i][j] = cell;
	
	gameField.appendChild(cell);
}
}

let currentX = 8, currentY = 5;
let currentPosition = cells[currentX][currentY];
currentPosition.style.backgroundColor = 'black';

let redSquareX = 2, redSquareY = 7;
let redSquare = cells[redSquareX][redSquareY];
redSquare.style.backgroundColor = 'red';

window.addEventListener('keydown', movement);