javascript - 在所有四个方向上移动一个 div

Question

抱歉，我是 javascript 编程的新手。我试图创建一个交互式 div，点击不同的方向按钮将向相应的方向移动。这是代码。

reset();
function reset() {
	var d = document.getElementById('animate');
	d.style.position = "absolute";
	d.style.left = 50+'px';
	d.style.top = 50+'px';
}
function moveRight() {
	var elem = document.getElementById("animate");
	var rect = elem.getBoundingClientRect();
	var pos = rect.left;
	var id = setInterval(frameRight, 500);
	function frameRight() {
		pos = pos + 10;
    	elem.style.left = pos + 'px';
    	clearInterval(id);
    }
}
function moveLeft() {
	var elem = document.getElementById("animate");
	var rect = elem.getBoundingClientRect();
	var pos = rect.left;
	var id = setInterval(frameLeft, 500);
	function frameLeft() {
		pos = pos - 10;
    	elem.style.left = pos + 'px';
    	clearInterval(id);
    }
}
function moveUp() {
	var elem = document.getElementById("animate");
	var rect = elem.getBoundingClientRect();
	var pos = rect.top;
	var id = setInterval(frameTop, 500);
	function frameTop() {
		pos = pos - 10;
    	elem.style.top = pos + 'px';
    	clearInterval(id);
    }
}
function moveDown() {
	var elem = document.getElementById("animate");
	var rect = elem.getBoundingClientRect();
	var pos = rect.top;
	var id = setInterval(frameDown, 500);
	function frameDown() {
		pos = pos + 10;
    	elem.style.top = pos + 'px';
    	clearInterval(id);
    }
}

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  background-color: red;
}

<p>
<button onclick="moveRight()">Right</button><button onclick="moveLeft()">Left</button><button onclick="moveUp()">Up</button><button onclick="moveDown()">Down</button><button onclick="reset()">Reset</button>
</p>
<div id ="container">
<div id ="animate"></div>
</div>

问题是，当我按下右按钮时，它会完美移动，但左按钮不会发生同样的情况。对于向上和向下按钮，它只会向下。我只想在每个方向上移动 20 个像素。提前致谢。

Answer 1

function coords(dx, dy) {
  var cx = document.getElementById('block').style.marginLeft;
  var cy = document.getElementById('block').style.marginTop;
  cx = parseInt(cx) + 20 * dx;
  cy = parseInt(cy) + 20 * dy;
  if (cx < 0) cx = 0;
  if (cy < 0) cy = 0;
  if (cx > 380) cx = 380;
  if (cy > 180) cy = 180;
  document.getElementById('block').style.marginLeft = cx + 'px';
  document.getElementById('block').style.marginTop = cy + 'px';
}

.place {
  border: 3px solid;
  width: 399px;
  height: 199px;
  margin: 1em auto;
  background-image: linear-gradient(transparent 19px, #888 19px, transparent 20px), linear-gradient(90deg, transparent 19px, #888 19px, transparent 20px);
  background-size: 20px 20px, 20px 20px;
  overflow: hidden;
  position: relative;
}
#block {
  width: 19px;
  height: 19px;
  background-color: red;
  transition: .2s;
}
.buttons {
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, .1);
  margin: 1em auto;
  border-radius: 90px;
  position: relative;
}
.but0 {
  position: absolute;
  width: 50px;
  height: 50px;
}
.but1 {
  left: 50%;
  margin-left: -25px;
}
.but2 {
  left: 50%;
  bottom: 0;
  margin-left: -25px;
}
.but3 {
  top: 50%;
  margin-top: -25px;
}
.but4 {
  top: 50%;
  right: 0;
  margin-top: -25px;
}

<div class="place">
  <div id="block" style="margin-left: 20px; margin-top: 20px;"></div>
</div>
<div class="buttons">
  <button class="but0 but1" onclick="coords('0','-1')">up</button>
  <button class="but0 but2" onclick="coords('0','1')">down</button>
  <button class="but0 but3" onclick="coords('-1','0')">left</button>
  <button class="but0 but4" onclick="coords('1','0')">right</button>
</div>