Question

今天早上我开始构建一个简单的JavaScript游戏，我试图弄清楚如何控制以便不允许div“ box”移出其父容器？我的猜测是使用if语句控制offsetLeft和offsetTop吗？

此处的Javascript

(function () {
    "use strict";

    var box = document.querySelector(".box");

    document.addEventListener("keydown", function (event) {
        var key = event.key;
        var left = box.offsetLeft;
        var top = box.offsetTop;
        var step = 10;

        switch (key) {
            case "ArrowUp":
                event.preventDefault();
                box.style.top = top - step + "px";
                break;
            case "ArrowDown":
                event.preventDefault();
                box.style.top = top + step + "px";
                break;
            case "ArrowLeft":
                event.preventDefault();
                box.style.left = left - step + "px";
                break;
            case "ArrowRight":
                event.preventDefault();
                box.style.left = left + step + "px";
                break;
        }
        console.log(event.key);
    });
    window.console.log("Sandbox is ready!");
})();

CSS在这里：

h1 {
    text-align: center;
}

h3 {
    color: green;
}

.content {
    border: 1px solid black;
    background-color: #eee;
    padding: 2em;
    margin: 0 auto;
    height: 500px;
    width: 800px;
    border-radius: 30px;
    text-align: center;
}

.box {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: green;
}

以下HTML：

<!DOCTYPE html>
<html>

<head>
    <title>Game</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

<body>
    <h1>Simple game</h1>
    <div id="content" class="content">
        <div class="box"></div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

添加了CSS和HTML编码。

在这里拨弄： https://jsfiddle.net/uwp0s9jz/

Answer 1

请参见下面的代码。

(function () {
    "use strict";

    var box = document.querySelector(".box");
    var container = document.getElementById('content').getBoundingClientRect()
    var paddingSize = 32
    document.addEventListener("keydown", function (event) {
        var key = event.key;
        var left = box.offsetLeft;
        var top = box.offsetTop;
        var step = 10;

        switch (key) {
            case "ArrowUp":
                event.preventDefault();
                if (top > container.top + paddingSize) {
                    box.style.top = top - step + "px";
                }
                break;
            case "ArrowDown":
                event.preventDefault();
                if (top < container.height - container.x - paddingSize) {
                    box.style.top = top + step + "px";
                }
                break;
            case "ArrowLeft":
                event.preventDefault();
                if (left > container.left + paddingSize) {
                  box.style.left = left - step + "px";
                }
                break;
            case "ArrowRight":
                event.preventDefault();
                if (left < container.width - container.y - paddingSize) {
                  box.style.left = left + step + "px";
                }
                break;
        }
        console.log(event.key);
    });
})();

提琴here

Answer 2

您需要使用getBoundingClientRect()来确定您是否超出界限，我已经更新了顶部和左侧作为起点。如果需要，您需要考虑border-radius。

小提琴更新：here

Answer 3

使用框父偏移量来确定框的位置。 fiddle link

(function () {
    "use strict";

  var box = document.querySelector(".box");
  var boxparent = document.querySelector(".content");
  var temp;
  document.addEventListener("keydown", function (event){
      var key = event.key;
      var left = box.offsetLeft;
      var top = box.offsetTop;
      var step = 10;
      event.preventDefault();

      switch (key) {
          case "ArrowUp":
              temp = top - step;
              if(temp > boxparent.offsetTop)
                  box.style.top = temp + "px";
              break;
          case "ArrowDown":
              temp = top + step;
              if((temp + step + step) < boxparent.offsetHeight)
                  box.style.top = top + step + "px";
              break;
          case "ArrowLeft":
              temp = left - step;
              if(temp > boxparent.offsetLeft)
                  box.style.left = left - step + "px";
              break;
          case "ArrowRight":
              temp = left - step;
              if((left + box.offsetWidth) < boxparent.offsetWidth)
                  box.style.left = left + step + "px";
              break;
      }
  });
})();

JavaScript游戏-如何控制子div不在其父容器外移动

3 个答案: