时间戳

首页 > 解决方案 > 如何防止图像超出屏幕边框？

javascript - 如何防止图像超出屏幕边框？

问题描述

所以我正在创建一个游戏，其中宇宙飞船与键盘控制器一起移动。然而，当这个图标被推向屏幕边界时，它就会消失。我做了一个代码来防止这种情况，但它不知道为什么？

宇宙飞船代码

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; }

标签： javascriptcss

解决方案

尝试使用位置：相对；用于容器元素

推荐阅读