Question

我一直在做一个小游戏，当你在页面上移动时你必须点击它，但现在我想把它包含在父div中（因此它不会在父节点之外得到它）。

任何人都可以帮我吗？

var deltaX = 0;
var deltaY = 0;

var div = document.querySelector('#random-move');

function animationframe(timestamp) {
    if (Math.random() > 0.95) {
        deltaX = Math.floor(Math.random() * 10);
        deltaY = Math.floor(Math.random() * 10);

        if (Math.random() < 0.5) {
            deltaX *= -1;
        }

        if (Math.random() < 0.5) {
            deltaY *= -1;
        }    
    }

    div.style.top = '' + Math.min(Math.max(parseInt(div.style.top) + deltaY, 0), window.innerHeight - 0) + 'px';
    div.style.left = '' + Math.min(Math.max(parseInt(div.style.left) + deltaX, 0), window.innerWidth - 0) + 'px';

    window.requestAnimationFrame(animationframe);  
}

window.requestAnimationFrame(animationframe);

Answer 1

您应该将移动的div放入容器中并使计算考虑容器的最大尺寸以及移动元素的高度和宽度。这是一个工作片段。

＆＃13;

var deltaX = 0;
var deltaY = 0;


function animationframe(timestamp) {
    var div = document.querySelector('#random-move');
    if (Math.random() > 0.95) {
        deltaX = Math.floor(Math.random() * 10);
        deltaY = Math.floor(Math.random() * 10);
        if (Math.random() < 0.5) {
            deltaX *= -1;
        }

        if (Math.random() < 0.5) {
            deltaY *= -1;
        }
    }

    div.style.top = '' + Math.min(Math.max(parseInt(div.style.top?div.style.top:"0") + deltaY, 0), div.parentNode.clientHeight-div.clientHeight) + 'px';
    div.style.left = '' + Math.min(Math.max(parseInt(div.style.left?div.style.left:"0") + deltaX, 0), div.parentNode.clientWidth -div.clientWidth) +
        'px';

    window.requestAnimationFrame(animationframe);


}

document.addEventListener("DOMContentLoaded", function(event) { 
    window.requestAnimationFrame(animationframe);
});

＆＃13;

#random-move {
    background-color: red;
    width: 2em;
    height: 2em;
    position: relative;
    top: 0;
    left: 0;
}

.container {
    height: 80vh;
    width: 80vw;
    border: 1px solid grey;
    margin: 1em;
}

＆＃13;

    <div class="container">
        <div id="random-move"></div>
    </div>

＆＃13;

Answer 2

你需要做的是获得容器的绝对位置边界和内部移动的物体。

这可以通过div.getBoundingClientRect（）;

来完成

然后检查当前位置+增量以查看它是否在容器外..

这是对您有用的代码段。

unique_ptr

以下是整体代码： https://jsfiddle.net/4e7eby9x/

＆＃13;

//get the bounding rects (left,right,top,bottom) of both the parent and the div
var containerRect = document.getElementById("random-move-container").getBoundingClientRect();
var divRect = div.getBoundingClientRect();

//Using the asbolute positions of left,right,top,bottom of the container and the moving div you can make sure you never move past those coords
//Check the current position plus the delta to check if the new coord is outside... Do this for each axis and edge
if((divRect.left+deltaX) >= containerRect.left)  {
    if((divRect.top+deltaY) >= containerRect.top){
        if((divRect.right+deltaX) <= containerRect.right){
            if((divRect.bottom+deltaY) <= containerRect.bottom){
                //Coords always inside parent div
                    div.style.top = '' + (parseInt(div.style.top, 10) + deltaY) + 'px';
                    div.style.left = '' + (parseInt(div.style.left, 10) + deltaX) + 'px';



            }
        }
    } 
}

＆＃13;

var div = document.getElementById("random-move");
var deltaX = 0;
var deltaY = 0;
div.style.position = "relative";  

function animationframe(timestamp) {
    

    
  
   if (Math.random() > 0.5) {

     deltaX = Math.floor(Math.random() * 10);
     deltaY = Math.floor(Math.random() * 10);
  
      if (Math.random() < 0.5) {
        deltaX *= -1;
      }

      if (Math.random() < 0.5) {
        deltaY *= -1;
      }
    }

    //get the bounding rects (left,right,top,bottom) of both the parent and the div
    var containerRect = document.getElementById("random-move-container").getBoundingClientRect();
    var divRect = div.getBoundingClientRect();
   
    //Using the asbolute positions of left,right,top,bottom of the container and the moving div you can make sure you never move past those coords
    //Check the current position plus the delta to check if the new coord is outside... Do this for each axis and edge
    if((divRect.left+deltaX) >= containerRect.left)  {
        if((divRect.top+deltaY) >= containerRect.top){
            if((divRect.right+deltaX) <= containerRect.right){
                if((divRect.bottom+deltaY) <= containerRect.bottom){
                    //Coords always inside parent div
                        div.style.top = '' + (parseInt(div.style.top, 10) + deltaY) + 'px';
                        div.style.left = '' + (parseInt(div.style.left, 10) + deltaX) + 'px';



                }
            }
        } 
    }

   
         


}

setInterval(function(){
animationframe()
}, 10)

＆＃13;

如何将这个移动的div保留在它的父母中？

2 个答案: