javascript - 如何防止图像离开html中的区域

<分区>

我正在制作一个程序，让用户移动汽车图像以避免图像上向下移动的障碍物。我可以上下左右移动汽车。我究竟该如何防止图像离开我创建的框？

我还移动了图像位置，使其看起来正好在边界处。有没有更简单的方法让它与盒子对齐？

//init object globally
var objImage = null;

function init() {
  objImage = document.getElementById("car");
  objImage.style.position = 'relative';
  objImage.style.left = '748px';
  objImage.style.top = '-405px';
}

function getKeyAndMove(e) {
  var key_code = e.which || e.keyCode;
  if (key_code == 37) {
    moveLeft();
  } else if (key_code == 38) {
    moveUp();
  } else if (key_code == 39) {
    moveRight();
  } else if (key_code == 40) {
    moveDown();
  }
}

function moveLeft() {
  objImage.style.left = parseInt(objImage.style.left) - 5 + 'px';
}

function moveUp() {
  objImage.style.top = parseInt(objImage.style.top) - 5 + 'px';
}

function moveRight() {
  objImage.style.left = parseInt(objImage.style.left) + 5 + 'px';
}

function moveDown() {
  objImage.style.top = parseInt(objImage.style.top) + 5 + 'px';
}
window.onload = init;

h1 {
  font-size: 2.8em;
  text-align: center;
}

#Screen {
  border: 2px solid white;
  width: 400px;
  height: 400px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-shadow: 0 0 20px gray;
}

#car {
  width: 50px;
  height: 120px;
}

<div onkeydown='getKeyAndMove(event)'>
  <h1>Drive your car with arrow keys</h1>
  <div id="Screen" width="400px" height="400px"></div>
  <img id="car" tabindex="0" src='https://via.placeholder.com/120'>
</div>

最佳答案

我修改了你的js代码，修改了html和css。

在 Screen id 中插入您的 img 标签；
在css中为#Screen指定规则position: relative;
插入这一行objImageBox = document.getElementById("Screen")，并在init()函数中传递绝对位置；
我必须为每个按钮编写一个 if 条件(您可以熟悉代码)；
对于右侧和底部，我必须计算盒子的宽度/高度和移动物体的宽度/高度。

//init object globally
        var objImage= null;
        function init(){
            objImage=document.getElementById("car"); 
            objImageBox=document.getElementById("Screen");
            objImage.style.position='absolute';
            objImage.style.left='0';
            objImage.style.top='0';
            

        }
        
        function getKeyAndMove(e){              
            var key_code=e.which||e.keyCode;
            if(key_code == 37){
                moveLeft();
            }
            else if(key_code == 38){
                moveUp();
            }
            else if(key_code == 39){
                moveRight();
            }
            else if(key_code == 40){
                moveDown();
            }
        }
        function moveLeft(){
            objImage.style.left=parseInt(objImage.style.left)-5 +'px';
            if (objImage.style.left < '0') {
              objImage.style.left = '0';
            } else {}
        }
        function moveUp(){
            objImage.style.top=parseInt(objImage.style.top)-5 +'px';
            if (objImage.style.top < '0') {
              objImage.style.top = '0';
            } else {}
        }
        function moveRight(){
            objImage.style.left=parseInt(objImage.style.left)+5 +'px';
            if (parseInt(objImage.style.left) > objImageBox.clientWidth - objImage.clientWidth) {
              objImage.style.left = objImageBox.clientWidth - objImage.clientWidth + 'px';
            } else {}
        }
        
        function moveDown(){
            objImage.style.top=parseInt(objImage.style.top)+5 +'px';
            if (parseInt(objImage.style.top) > objImageBox.clientHeight - objImage.clientHeight) {
              objImage.style.top = objImageBox.clientHeight - objImage.clientHeight + 'px';
            } else {}
        }
        window.onload=init;

h1{
        font-size: 2.8em;
        text-align: center;
    }
    #Screen{
        border: 2px solid white;
        width: 400px;
        height: 400px;
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        box-shadow: 0 0 20px gray;
        position: relative;
    }
    #car{
        width: 50px;
        height: 120px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onkeydown='getKeyAndMove(event)'>
    <h1>Drive your car with arrow keys</h1>
    <div id="Screen" width="400px" height="400px" >
    
    <img id="car"  tabindex="0" src='https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg'>
    
    </div>
    <!-- <img id="car" tabindex="5"/> -->
    
</body>
</html>

关于javascript - 如何防止图像离开html中的区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64862548/

上一篇：javascript - D3 V6 和 JavaScript - GeoJSON 填充为 "spilling"在路径之外

下一篇：javascript - 如何将子 Div 移动到另一个嵌套的非父 Div 中

javascript - 使用 select by id 在特定传单弹出窗口中创建图形

javascript - 使用自定义函数作为另一个函数的参数

javascript - Lodash拒绝获取返回对象

javascript - 随机选择组合，以便每个元素精确地代表两次

javascript - 如何使用 HTML5 Canvas 找出圆的哪一部分被点击？

javascript - Bootstrap 中的缩略图标题悬停效果

html - HTML/CSS 中的像素字体

html - 页脚 div 隐藏在内容 div 后面

javascript - 使用 JQuery 将一个 div 放在另一个的中心