JavaScript游戏-如何控制一个儿童div不离开它'；s父容器_Javascript

JavaScript游戏-如何控制一个儿童div不离开它'；s父容器

javascript

JavaScript游戏-如何控制一个儿童div不离开它'；s父容器,javascript,Javascript,今天早上，我开始构建一个简单的JavaScript游戏，我试图弄清楚如何控制div“box”不被允许移动到其父容器之外？我猜是用if语句控制offsetLeft和offsetTop Javascript在这里： (function () { "use strict"; var box = document.querySelector(".box"); document.addEventListener("keydown", function (event) {

今天早上，我开始构建一个简单的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编码

在这里拉小提琴：

您需要使用

getBoundingClientRect（）

来确定您是否超出了边界我已经更新了顶部和左侧作为开始。如果需要，您需要考虑

边界半径

小提琴更新：

使用长方体父偏移来确定长方体的位置。

（函数（）{
“严格使用”；
var-box=document.querySelector（“.box”）；
var-boxparent=document.querySelector（“.content”）；
无功温度；
文档.添加的事件列表器（“键控”，函数（事件）{
var key=event.key；
var left=box.offsetLeft；
var top=box.offsetTop；
var阶跃=10；
event.preventDefault（）；
开关（钥匙）{
案例“ArrowUp”：
温度=最高阶；
如果（温度>箱父偏移）
box.style.top=temp+“px”；
打破
案例“箭头向下”：
温度=顶部+台阶；
如果（（温度+步进+步进）BOXPRENT.offsetLeft）
box.style.left=左侧-步骤+px；
打破
案例“ArrowRight”：
温度=左阶；
如果（（左+框.偏移网络宽度）})();请参见下面的代码
(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);
    });
})();

（函数（）{
“严格使用”；
var-box=document.querySelector（“.box”）；
var container=document.getElementById（'content'）.getBoundingClientRect（）
变量paddingSize=32
文档.添加的事件列表器（“键控”，函数（事件）{
var key=event.key；
var left=box.offsetLeft；
var top=box.offsetTop；
var阶跃=10；
开关（钥匙）{
案例“ArrowUp”：
event.preventDefault（）；
如果（顶部>容器顶部+填充尺寸）{
box.style.top=top-step+“px”；
}
打破
案例“箭头向下”：
event.preventDefault（）；
如果（顶部container.left+paddingSize）{
box.style.left=左侧-步骤+px；
}
打破
案例“ArrowRight”：
event.preventDefault（）；
如果（左

Fiddle
请在此处添加html和css文件。html和css添加您忘记定义变量。ArrowRight的情况只是部分起作用。它不允许div到达容器的末端，但更像是容器的60%。