Question

我有一个正方形，点击时它会出现在一个随机位置，它也会改变大小（例如，如果我有一个30px的盒子，但它距离左边界10px，我仍然可以在游戏空间外得到10px）。

有时广场超过他的集装箱边界

如何确保广场永远不会超过他的容器？

function position() {
  var positionTop = Math.random() * 100;
  var positionLeft = Math.random() * 100;
  var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
  return position;
}

document.getElementById("shape").onclick = function() {
  document.getElementById("shape").style.cssText = position();
}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin: 0;
  padding-top: 30px;
}

#playSpace {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="gameSpace">
  <div id="playSpace">
    <!-- here we put the shape -->
    <div id="shape"></div>
  </div>
</div>

Answer 1

您可以在Math.random函数中使用指定范围（min / max），然后使用此函数Math.floor(Math.random() * (max - min + 1)) + min;来限制随机函数在min和max之间的返回值。

maxTop：容器的高度 - 形状的高度
maxLeft：容器的宽度 - 形状的宽度
minTop：0
minLeft：0

您需要在形状上使用position:absolute和px值才能使其正常工作

请参阅代码段：

function position() {

  var minTop = 0;
  var maxTop = document.getElementById("playSpace").clientHeight - document.getElementById("shape").clientHeight;
  var minLeft = 0;
  var maxLeft = document.getElementById("playSpace").clientWidth - document.getElementById("shape").clientWidth ;
  
 

  var positionTop = Math.floor(Math.random() * (maxTop - minTop + 1) + minTop);
  var positionLeft = Math.floor(Math.random() * (maxLeft - minLeft + 1) + minLeft);

  
  var position = "position:absolute;top:" + positionTop + "px;left:" + positionLeft + "px;"
  return position;

}

document.getElementById("shape").onclick = function() {

  document.getElementById("shape").style.cssText = position();

}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin: 0;
  padding-top: 30px;
  text-align:center;
}

#playSpace {
  width: 90%;
  height: 90%;
  border: 1px black solid;
  position:relative;
  display:inline-block;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="gameSpace">
  <div id="playSpace">
    <!-- here we put the shape -->
    <div id="shape"></div>
  </div>
</div>

Answer 2

您需要将position: relative;设置为父元素，将position: absolute;设置为shape元素。然后使用最大最小值为随机，其中max是父宽度/高度，并减去shape宽度/高度......

这是更新前的代码段

function position() {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  var position = "position:absolute;top:" + positionTop + "px;left:" + positionLeft + "px;"
  return position;
}

document.getElementById("shape").onclick = function() {
    document.getElementById("shape").style.cssText = position();
}

#gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin:0;
  padding-top: 30px;
}


#playSpace {
  position: relative; /* add this line */
  width: 90%;
  height: 90%;
  margin: 0 auto;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red; 
}

<div id="gameSpace">
    <div id="playSpace">
        <!-- here we put the shape -->
        <div id="shape"></div>
    </div>
</div>

评论后更新 不确定您是如何添加size()函数的，但可能问题在于使用...cssText覆盖了更改。所以现在我通过将element传递给函数来更改代码，然后只更改需要更改的单个CSS语句。

function position(element) {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  element.style.position = 'absolute';
  element.style.top = positionTop + "px";
  element.style.left = positionLeft + "px";
}

function size(element) {
  var sizeMath = (Math.random() * 200) + 50;
  element.style.width = sizeMath + "px";
  element.style.height = sizeMath + "px";
}

document.getElementById("shape").onclick = function() {
    size(document.getElementById("shape"));
    position(document.getElementById("shape"));
}

#gameSpace {
width: 100%;
height: 470px;
background: blue;
margin:0;
padding-top: 30px;
}


#playSpace {
position: relative; /* add this line */
width: 90%;
height: 90%;
margin: 0 auto;
border: 1px black solid;
}

#shape {
width: 100px;
height: 100px;
background-color: red; 
}

<div id="gameSpace">
    <div id="playSpace">
        <!-- here we put the shape -->
        <div id="shape"></div>
    </div>
</div>

Answer 3

使用CSS calc，限制playSpace区域内的位置（您可以使用不同的单位，%和px）。

然后使用offsetTop / offsetLeft，获取正方形的实际位置并避免负面位置（positionTop < 100px或positionLeft < 100px时）。

function position() {
    var positionTop = Math.random() * 100;
    var positionLeft = Math.random() * 100;
    var position = "position:relative;top: calc(" + positionTop + "% - 100px);left: calc(" + positionLeft + "% - 100px);";
    return position;
}

document.getElementById("shape").onclick = function() {
    var shapeDiv = document.getElementById("shape");
    shapeDiv.style.cssText = position();
    var top = shapeDiv.offsetTop;// Result of calc(" + positionTop + "% - 100px) in px
    if(top < 0) {
        shapeDiv.style.top = '0px';
    }
    var left = shapeDiv.offsetLeft;// Result of calc(" + positionLeft + "% - 100px) in px
    if(left < 0) {
        shapeDiv.style.left = '0px';
    }
}

不要忘记将position: relative添加到#playSpace，以获取offsetTop / left correct

#playSpace {
    position:relative;/* mandatory */
}

Answer 4

如果将包含元素设置为position: relative;而内部元素设置为position: absolute;，则内部元素的左上角和右下角属性将根据包含元素的边框进行计算。

这是一个很好的source of css positioning。

在您的情况下，应将其他验证设置为positionTop和positionLeft。

positionTop应该在区间[（shapeHeight / 2） - （100 - shapeHeight / 2）]

positionLeft应该在区间[（shapeWidth / 2） - （100 - shapeWeight / 2）]

Answer 5

您可以获取父元素大小，以便在您的scirpt中使用条件来防止该方块超出。

function position() {

var maxWidth = document.getElementById("playSpace").offsetWidth;
var maxTop = document.getElementById("playSpace").offsetHeight;

var positionTop = Math.random() * 100;
var positionLeft = Math.random() * 100;

if (positionTop > maxTop) { positionTop = maxTop;)
if (positionLeft > maxWidth) { positionLeft = maxWidth;)
var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
return position;

}

我不确定.offsetWidth和.offsetHeight是否运作良好，但你明白了这一点：）

Answer 6

通过稍微调整一下你的positionTop和positionLeft变量，我设法保持广场内部。您只需要更改它不需要超过容器所需的最大百分比。我发现顶部的75％和左边的80％似乎是最大的！

var positionTop = Math.floor(Math.random() * 75)   ;
var positionLeft = Math.random() * 80;

Here's a fiddle

如何防止元素超出其容器边界

6 个答案: