Как убрать пробел между элементом и стенкой родителя?

Question

Valera Dobroman @Valera221

Делаю сайты

JavaScript

Как убрать пробел между элементом и стенкой родителя?

Дело такое, когда я приближаюсь к offsetTop'у или offsetLeft'у или offsetTop + offsetHeight,(крч. со всех сторон) у меня возникает пробел, я бы хотел чтобы блок которым я двигаю утыкался впритык к стенкам, и также с блоком который я поставил в родителе, там тоже пробел, вот у меня такой код получился, не знаю, что мне нужно добавить ?
А также как бы мне сделать так, чтобы функция gameLoop() постоянно не циклась, а движение началось тогда, когда я нажал бы на клавишу ?
Можете просто скопировать и посмотреть, потестить, классная кстати тема получилась.
А также будет классно, если вы добавите каких-то крутых плюх в код ^_^
Песочница https://codepen.io/Valera_DobroMan/pen/mdJxEVe

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
*{
	margin: 0;
	padding: 0;
}
.player {
position: absolute;
width: 50px;
height: 50px;
background: orange;
}
#inp {
	width: 100px;
	height: 30px;
	font-size: 24px;
	margin: 5px 10px;
}
.parent {
	position: relative;
	width: 800px;
	height: 800px;
	left:10px;
	border: 1px solid black;
}
.block {
	position: absolute;
	left: 500px;
	top:240px;
	width: 100px;
	height: 220px;
	background: red;
}
</style>
</head>
<body>
	key:<input type="text" id="inp">
	<div class="parent">
		<div class="block"></div>
		<div class="player"></div>
	</div>
	<script>
let pl = document.querySelector(".player");
let par = document.querySelector(".parent");
let inp = document.getElementById("inp");
let bl = document.querySelector(".block");



var up = false,
    right = false,
    down = false,
    left = false,
    speed = 12,
    x = 0,
    y = 0
document.addEventListener('keydown',press)
function press(e){
inp.value = e.code;
  if (e.code == "ShiftLeft"){
    speed += 10;
  }
  if (e.code == "KeyW"){
    up = true;
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
    right = true
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
    down = true
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65){
    left = true
  }
}
document.addEventListener('keyup',release)
function release(e){
 if (e.code == "ShiftLeft"){
    speed -= 10;
  }
  if (e.code == "KeyW"){
    up = false
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
    right = false
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
    down = false
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */ || e.keyCode === 81 /* q */){
    left = false
  }
}
function gameLoop(){
  if (up){
    y = y - speed;
  }
  if (right){
    x = x + speed;
  }
  if (down){
    y = y + 10;
  }
  if (left){
    x = x - speed;
  }
  // console.log(speed)
 if (y < 0  || y+pl.offsetHeight >= par.offsetHeight) {
  	y = pl.offsetTop ;
  }
 if (x < 0 || x+pl.offsetWidth >= par.offsetWidth)
  {x = pl.offsetLeft}

if (x+pl.offsetWidth > bl.offsetLeft && y+pl.offsetHeight >= bl.offsetTop && y <= bl.offsetTop+bl.offsetHeight && x <= bl.offsetLeft + bl.offsetWidth ) {
	x = pl.offsetLeft;
	y = pl.offsetTop;
}

  pl.style.left = x+'px';
  pl.style.top = y+'px';
  window.requestAnimationFrame(gameLoop);
}
window.requestAnimationFrame(gameLoop);

	</script>
</body>
</html>