divを4方向に移動

Question

申し訳ありません、私はJavaScriptプログラミングの新機能です。私は別の方向ボタンをクリックすると対応する方向に移動するインタラクティブなdivを作成しようとしていました。ここにコードがあります。

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

問題は、私は右のボタンを押すのですwheneそれは完璧に動くが、同じdosen'tは、左ボタンに起こるということです。上下のボタンのためだけにそれは下に行く。私はちょうど各方向に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>