Question

我正在制作一个简单的游戏，包括通过鼠标点击来拉球。所以所有的工作都没有重要思考 - 球不想看到边界 - clientWidth/Height赛场的field坐标。var ball = document.getElementById('ball'); var field = document.getElementById('field'); function getClick() { var fieldCoords = this.getBoundingClientRect(); var fieldBorderLeft = fieldCoords.left + field.clientLeft; var fieldBorderTop = fieldCoords.top + field.clientTop; var ballBorderLeft = event.clientX - fieldBorderLeft - ball.clientWidth/2 + 'px'; var ballBorderTop = event.clientY - fieldBorderTop - ball.clientHeight/2 + 'px'; if (ballBorderLeft < 0) ballBorderLeft = 0; if (ballBorderTop < 0) ballBorderLeft = 0; if (ballBorderLeft + ball.clientWidth > field.clientWidth) { ballBorderLeft = field.clientWidth - ball.clientWidth; } if (ballBorderTop + ball.clientHeight > field.clientHeight) { ballBorderTop = field.clientHeight - ball.clientHeight; } ball.style.top = ballBorderTop; ball.style.left = ballBorderLeft; } field.addEventListener( 'click', getClick );。

我为球边界创造了一个完整的条件，但有些人认为我可能会错过。有人可以解释一下 - 有什么不对吗？

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
  <style>
	#field {
	    width: 200px;
	    height: 150px;
	    border: 10px groove black;
	    background-color: #00FF00;
	    position: relative;
	    overflow: hidden;
	    cursor: pointer;
	}
	#ball {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 0.5s;
    }
  </style>
</head>
<body>
  <div id="field">
    <img src="https://js.cx/clipart/ball.svg" id="ball" style="left: 140px; top: 39px;"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  </div>
<script>
</script>
</body>
</html>

＆＃13;

for (int i = 0; i < list.size(); i++) {
        if (list.get(i).startsWith(first)) {
            start = i;
            break;
        }
    }
    for (int x = list.size() - 1; x > 0; x--) {
        if (list.get(x).startsWith(second)) {
            end = x;
            break;
        }
    }

＆＃13;

Answer 1

确保添加＆＃39; px＆＃39;当您将它们指定为新职位时您正在计算中添加它们。这搞砸了比较。即： ballBorderLeft < 0变为'-10px' < 0而不是-10 < 0 将字符串与数字值进行比较。

＆＃13;

var ball = document.getElementById('ball');
var field = document.getElementById('field');

function getClick() {

  var fieldCoords = this.getBoundingClientRect();

  var fieldBorderLeft = fieldCoords.left + field.clientLeft;
  var fieldBorderTop = fieldCoords.top + field.clientTop;

  var ballBorderLeft = event.clientX - fieldBorderLeft - ball.clientWidth / 2;
  var ballBorderTop = event.clientY - fieldBorderTop - ball.clientHeight / 2;
  if (ballBorderLeft < 0) ballBorderLeft = 0;
  if (ballBorderTop < 0) ballBorderTop = 0;
  if (ballBorderLeft + ball.clientWidth > field.clientWidth) {
    ballBorderLeft = field.clientWidth - ball.clientWidth;
  }
  if (ballBorderTop + ball.clientHeight > field.clientHeight) {
    ballBorderTop = field.clientHeight - ball.clientHeight;
  }

  ball.style.top = ballBorderTop + 'px';
  ball.style.left = ballBorderLeft + 'px';

}

field.addEventListener('click', getClick);

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #field {
      width: 200px;
      height: 150px;
      border: 10px groove black;
      background-color: #00FF00;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
    }
    
    #ball {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 40px;
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -o-transition: all 1s;
      -ms-transition: all 1s;
      transition: all 0.5s;
      user-select: none;
      -webkit-user-drag: none;
      -ms-user-drag: none;
      -moz-user-drag: none;
      user-drag: none;
    }
  </style>
</head>

<body>
  <div id="field">
    <img src="https://js.cx/clipart/ball.svg" id="ball" style="left: 140px; top: 39px;"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . .
  </div>
  <script>
  </script>
</body>

</html>

＆＃13;

作为旁注，if (ballBorderTop < 0) ballBorderLeft = 0;应该设置ballBorderTop
在您使用user-select: none; css规则时，请添加#field以禁用文本选择。同意user-drag: none;

上的#ball规则

在JS游戏中，Borders不适用于球

1 个答案: