Как предотвратить выход изображения go за границы экрана?

Question

Итак, я создаю игру, в которой космический корабль перемещается с помощью контроллеров клавиатуры. Однако, когда этот значок приближается к границам экрана, он исчезает. Я сделал код, чтобы предотвратить это, но он не работает, почему?

Код для космического корабля

let display = document.getElementById("body").style.width
let rect = document.getElementById("icon-p1")
let pos = {top: 85, left: 600}
const keys = {}
window.addEventListener("keydown", function(e) {keys[e.keyCode] = true})
window.addEventListener("keyup", function(e) {keys[e.keyCode] = false})
const loop = function() {
if (keys[37] || keys[81]) {pos.left -= 10}
if (keys[39] || keys[68]) {pos.left += 10}
if (keys[38] || keys[90]) {pos.top -= 1}
if (keys[40] || keys[83]) {pos.top += 1}
rect.style.left = pos.left + "px"; rect.style.top = pos.top + "%"}
let sens = setInterval(loop, 1000 / 40)

Код для фона

width: 100%;
background-image: url(Photo/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow: hidden; }

Answer 1

Вам необходимо исправить верхнее / левое положение, когда они находятся за пределами границ, зафиксировав их на границе ограничения (owidth / oheight - размеры контейнера, iwidth / iheight - размеры элемента).

 if (pos.left<0) pos.left=0;
 if (pos.top<0) pos.top=0;
 if (pos.left+iwidth>=owidth) pos.left=owidth-iwidth;
 if (pos.top+iheight>=oheight) pos.top=oheight-iheight;

Применяется к примеру кода (я изменил % приращений на px приращений, чтобы упростить расчет). В противном случае вам нужно преобразовать процентное значение в верхнюю позицию в пикселях, используя высоту контейнера.

(function(){

let display = document.getElementById("body");
let rect = document.getElementById("icon-p1");
let pos = {top: 85, left: 100}
const keys = {}
window.addEventListener("keydown", function(e) {keys[e.keyCode] = true;  })
window.addEventListener("keyup", function(e) {keys[e.keyCode] = false})
const loop = function() {
 if (keys[37] || keys[81]) {pos.left -= 10}
 if (keys[39] || keys[68]) {pos.left += 10}
 if (keys[38] || keys[90]) {pos.top -= 10}
 if (keys[40] || keys[83]) {pos.top += 10}
 var owidth=display.offsetWidth;
 var oheight=display.offsetHeight;
 var iwidth=rect.offsetWidth;
 var iheight=rect.offsetHeight;
 if (pos.left<0) pos.left=0;
 if (pos.top<0) pos.top=0;
 if (pos.left+iwidth>=owidth) pos.left=owidth-iwidth;
 if (pos.top+iheight>=oheight) pos.top=oheight-iheight;
 rect.setAttribute("data",owidth+":"+oheight);
 rect.style.left = pos.left + "px"; rect.style.top = pos.top + "px"
}

let sens = setInterval(loop, 1000 / 40)

})();

body{
margin:0;
padding: 0;
}
#body{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  border: 1px solid red;
 }
 
 #icon-p1{
 position: absolute;
 display: inline-block;
 width: 40px;
 height: 40px;
 border: 1px solid red;
 }

<div id ="body" >
<span id="icon-p1">ICON</span>

</div>

Answer 2

попробуйте использовать position: relative; для элемента контейнера