Javascript 运动图像可以'；不要走出窗户

我正在用javascript创建一个脚本，它有4个按钮来控制图像的移动，用户可以将图像移动到顶部、底部、左侧和右侧，但图像不能超出窗口，应该在内部进行维护，但我不知道如何将其保持在内部。想象一个老式乒乓球游戏中的球，球被放在窗户里

以下是html代码：

<img class="c1" id="imagen" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"/>

<input type="button" value="Arriba" onclick="MoverArriba();" />
<input type="button" value="Abajo" onclick="MoverAbajo();" />
<input type="button" value="Derecha" onclick="MoverDerecha();" />
<input type="button" value="Izquierda" onclick="MoverIzquierda();" />

菲德尔->

---

谢谢

你会这么做的。。。数学！：D给图像一个绝对位置，左侧和顶部设置为0；这将在以后对您有很大帮助，因为您的所有数字都是相对于（0,0）的

当您向左或向上移动时，只需确保该值从不低于0；这是最简单的部分。更难的部分是左右移动。您需要确保x和y不会超出屏幕的宽度和高度。幸运的是，有一些属性我们可以用于此

document.body.clientWidth

和

document.body.clientHeight

将分别返回窗口的宽度和高度。因此，当向右或向下移动时，只需确保值的增长不会大于窗口的宽度或高度——当然，减去图像的宽度和高度，因为位置是从左上角开始的：）

var birdX = 0;

        function MoverArriba() {
            var bird = document.getElementById("imagen");

            birdX -= 1;
            bird.style.transform = "translateY(" + birdX + "px)";

        }

        function MoverAbajo() {
            var bird = document.getElementById("imagen");
    alert("hello");

            birdX += 1;
            bird.style.transform = "translateY(" + birdX + "px)";
    alert("hello2");

        }

        function MoverDerecha() {
            var bird = document.getElementById("imagen");

            birdX += 1;
            bird.style.transform = "translateX(" + birdX + "px)";

        }

        function MoverIzquierda() {
            var bird = document.getElementById("imagen");

            birdX -= 1;

            bird.style.transform = "translateX(" + birdX + "px)";

        }