如何防止 go 的图像超出屏幕边框？

Question

So I am creating a game where a spaceship moves with keyboard controllers. However, when this icon is pushed towards the screen limits, it disappears. I did a code to prevent this but it does not work any idea why?

Code for spaceship

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)

Code for background

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

Answer 1

try using position:relative; for container element

Answer 2

You need to correct top/left positions when they are out of bounds, fixing them to the limit border ( owidth / oheight are the container dimensions, iwidth / iheight are the element dimensions).

 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;

Applied to the example code (I've changed % increments to px increments, to simplify the calculation). Otherwise you need to convert percentage to top position in pixels using the container height.

 (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>