Код слишком большой, по этому я упрощу только лишь и сделаю событие нажатия кнопки на клаве тоглько для

для удобства сделаю квадратик (советую проверить и изучить этот скрипт в отдельном файле)

<style>
		#qwerty {
			position: relative;
			width: 500px;
			height: 500px;
			background: black;
		}
	</style>
	<div id="qwerty"></div>

<script>
	
let qwe = document.querySelector("#qwerty");
Тут значения на сколько пикселей в верх
let up = 20;
let b_up = false;
let left = 20;
let b_l = false;

эта функция двигает объект в верх
function go_u () {
	console.log("okU")
	let go = qwe.offsetTop += up;
	qwe.style.top = go + "px";
}
эта функция двигает объект в лево
function go_l () {
	console.log("okL")
	let go = qwe.offsetLeft += left;
	qwe.style.left = go + "px";
}

И так создадим событие нажатие клавиатуры во всем документе
document.addEventListener("keydown",function(e) {
	console.log(e);
если нажал W то запускается функция движения в верх и также в лево
if (b_up) {
go_u();
}else {
	if (e.key == "w") {
		b_up = true;
		go_u();
		// console.log("ok");
	}
}

if (b_l) {
go_l();
}else {
	if (e.key == "d") {
		b_l = true;
		go_l();
		// console.log("ok");
	}
}

})


document.addEventListener("keyup",function(e) {
когда ты отжал кнопку W то мы навсякий случай делаем false, чтобы объект больше не двигался
		console.log(e);
	if (e.key == "w") {
		b_up = false;
		console.log("nopeW");
	}

	if (e.key == "d") {
		b_l = false;
		console.log("nopeD");
	}

})

</script>

Берешь родителя <div class="content"></div> в него заворачиваешь картинку и текст, текст также заворачиваешь в <div class="text"></div>
И того

<div class="content">
<img src="img/protektokrat_home.gif" width="165" height="165">
     <div class="text">
       Starbound --- игра разработанная Chucklefish. Жанр игры песочница, платформер. 
	<br>Имеет 2D пикельную графику. Вышла в 2016 году. 
		<br>Доступна в Steam и стоит 299 рублей. 
		<br>На данный момент последняя версия 1.4.4 Bounty Hunter Update
		<br>
		<br>
		Системные требования: 
		<br>ОС: Windows Vista - 10 
		<br>Оперативная память: 2 ГБ 
		<br>Процессор: Core 2 duo 
		<br>Видеокарта: 256 МБ
		<br>Памяти на жестком диск: 4 ГБ
     </div>
</div>

Даешь родителю, а то есть классу content - display: flex;
.content {
display:flex;
}
И также в дальнейшем я советую изучать flex box, это более эластичная структура верстания.
Также можешь сделать флоатом
img{float: left;}
.text{float:left}

Это происходит, потому что sort требует два аргумента, это нужно для сравнения этих же аргументов, если впишешь вот так, то появиться 1 2 и 3 )
arr = [1,2,3];
arr.sort(function(a,b) {
console.log(a);
console.log(b);
})
Ну я также могу посоветовать
arr.forEach( function(element, index) {
// statements
});
или
for (let [key,v] of Object.entries(arr)) {
console.log(key)
console.log(v)
}

Используй библиотеку jQuery - ajax и конкретно тебя должно интересовать https://api.jquery.com/jquery.ajax/#:~:text=Save%2....

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
});

Делаешь файлик .php например, он обрабатывает пост данные и отправляет их в базу данных,
в url даешь на него ссылку.
в файле напиши php

$name = $_POST["name"];
$location = $_POST["location"];
var_dump($name, $location);

и в переменной msg ты увидишь эти переменные

Либо вот такой запрос на чистом JS

fetch ("some.php",{
body: "name=" + encodeURIComponent("John") + "&location=" + encodeURIComponent("Boston")
cache: "default",
headers: {'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'},
method: "POST",
mode: "cors"
}).then( (response) => {
  if (response.status !== 200) {           
    return Promise.reject();
  }
  return response["text"]();
}).then(msg=>{
alert( "Data Saved: " + msg );
})