可控 div 不应越过另一条线 div

Question

我做了一个 div，或者更好的说法是当我按下按键时，它会移动一个圆圈。此 "ball" 有一个名为容器的父级 div。它不应该越过容器的边界线！

<html>

<head>
<style>
    #container{
        border: 2px solid orange;
    }
    #ball{
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background: green;
    }
</style>
</head>
<body>

    <div id="container">
        <div id="ball"></div>
    </div>
    <script type= "text/javascript" src="something.js"></script>
</body>
</html>

const container = document.querySelector('#container');
const ball = document.querySelector('#ball');
let mover = 5;

window.addEventListener('load', () => {
    ball.style.position = 'relative';
    ball.style.left = 0;
    ball.style.top = 0;

});

window.addEventListener('keydown', (e) => {

    switch(e.key) {
        case 'ArrowUp' :
            ball.style.top = parseInt(ball.style.top) - mover + '%';
            if(ball.style.left == '100%') {
                alert('dont move');
            }
            break;
        case 'ArrowDown' :
            ball.style.top = parseInt(ball.style.top) + mover + '%';
            break;
        case 'ArrowRight' :
            ball.style.left = parseInt(ball.style.left) + mover + '%';
            break;
        case 'ArrowLeft' :
            ball.style.left = parseInt(ball.style.left) - mover + '%';
            break;
    }
});

我尝试使用 if 语句，所以如果 balls left 属性大于 100%，它应该发出警告或更好的提示，说明它无法进一步移动。但是我不知道如何在 Javascript 中解决这个问题（我尝试不使用 jQuery）。有什么我忽略的吗？

Answer 1

如果您只想让球不越过 div 线，只需在球到达阈值后向您的案例添加一个 if-else 语句。 else 部分，我只是添加了警告以显示您不能再移动了。根据您设置的移动数量，超过 95% 的任何东西都不会向右移动，而小于 0% 的任何东西都不会向左移动。这是我刚刚快速组合在一起的东西，但希望这可以帮助您走上正确的道路。

<html>

<head>
<style>
    #container{
        border: 2px solid orange;
    }
    #ball{
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background: green;
    }
</style>
</head>
<body>

    <div id="container">
        <div id="ball"></div>
    </div>
    <script type= "text/javascript" src="something.js"></script>
</body>
</html>
<script>
const container = document.querySelector('#container');
const ball = document.querySelector('#ball');
let mover = 5;

window.addEventListener('load', () => {
    ball.style.position = 'relative';
    ball.style.left = 0;
    ball.style.top = 0;

});

window.addEventListener('keydown', (e) => {

    switch(e.key) {
        case 'ArrowUp' :
            ball.style.top = parseInt(ball.style.top) - mover + '%';
            break;
        case 'ArrowDown' :
            ball.style.top = parseInt(ball.style.top) + mover + '%';
            break;
        case 'ArrowRight' :
         if((parseInt(ball.style.left) + mover) <= 90){
            ball.style.left = parseInt(ball.style.left) + mover + '%';
            }
            else{
            alert("Warning: Right Threshold Reached")
            }
            break;
        case 'ArrowLeft' :
            if((parseInt(ball.style.left) - mover) >= 0){
            ball.style.left = parseInt(ball.style.left) - mover + '%';
            }
             else{
            alert("Warning: Left Threshold Reached")
            }
            break;
    }
});
</script>

可控 div 不应越过另一条线 div

controllable div should not cross a certain line from another div

html

javascript

keypress

keydown