边界不适用于JS游戏中的球

我正在创建一个简单的游戏，包括通过鼠标点击拉球。所以一切都很好，没有一个重要的想法 - 球不想看到边界 - 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 );

<!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>

确保在将它们分配为新位置时添加"px"。
您将在计算过程中添加它们。这搞砸了比较。即： ballBorderLeft < 0变得'-10px' < 0而不是-10 < 0将字符串与数字值进行比较。

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);

<!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>

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

相关内容

最新更新

热门标签：