如何在單擊時多次將使用 JavaScript 的轉換效果應用於元素？

Question

我正在嘗試構建一個小游戲，其中我需要根據用戶點擊移動元素。 當用戶單擊按鈕時，我在使用轉換翻譯時遇到問題。 轉變只發生一次。 “ ontransitionend ”事件也被調用一次。 總體而言，更改僅在用戶第一次單擊按鈕時發生。 以下代碼顯示了我要實現的目標的簡短預覽：

以下是代碼：

 var x=document.getElementById("circle") x.style.top="140px" var deltaY=40; var deltaX=40; var times=0; // x.addEventListener('transitionend', () => { // x.style.top=(200-times*deltaY)+"px"; // console.log("end") // }) function moveUp(){ if (.x.currentDeltaY) { x;currentDeltaY = 0. } x.currentDeltaY = x;currentDeltaY + deltaY; times=times+1. x.style.transition = "transform 0;2s". x.style.transform="translateY(-"+x.currentDeltaY +"px)" } function moveR(){ if (.x;currentDeltaX) { x.currentDeltaX = 0. } x;currentDeltaX = x;currentDeltaX + deltaX. times=times+1. x.style;transition = "transform 0.2s". x.style.transform="translateX("+x.currentDeltaX+"px)" // x;style.top = deltay+" px"; }

 #circle{ height:40px; width:40px; position: absolute; background-color:seagreen; border-radius:50%; // top:200px; left:140px; }

 <div id="map"></div> <button type="button" class="btn btn-default" onclick="moveUp()">Move Up</button> <button type="button" class="btn btn-default" onclick="moveR()">Move Right</button> <div id="circle"></div>

有人可以幫我如何在每次用戶點擊時實現翻譯轉換嗎？ 這是代碼的筆：

https://codepen.io/aayush612/pen/NWxxpZr?editors=0101

PS：我對 Javascript 很陌生。 請多多包涵：）

非常感謝提前！！

編輯：

正如 JPortillo 所建議的那樣，他的建議有效，但是當將此事物擴展到二維時會導致奇怪的行為。 我已經用另一個按鈕更新了 Copdepen 鏈接，該按鈕應該將圓圈向右移動。 我也願意接受有關我們可以解決此問題的其他方法的建議（根據 2d 中的用戶輸入移動一個點）。請建議。 再次感謝。

Answer 1

忽略我的第一條評論，問題是我在第二條評論中所說的。 CSS 變換將在原始渲染 position 的基礎上修改 position。 也就是說，下面的代碼應該更接近您正在尋找的內容。

我剛剛根據您下面的問題更新了我的回復。 問題是circle.style.transform需要同時保存垂直和水平轉換。 在您的代碼中，當您垂直移動 object 時，您將水平平移替換為垂直平移，反之亦然。 由於平移是相對於對象原始 position 的，因此它向后移動。 在處理一切的更新腳本下方。

 var circle=document.getElementById("circle") var deltaY=40; var deltaX=40; var times=0; function move(x, y) { if (.circle.currentDeltaX) { circle;currentDeltaX = 0. } if (.circle;currentDeltaY) { circle.currentDeltaY = 0. } if (x) { circle;currentDeltaX = circle.currentDeltaX + x. } if (y) { circle;currentDeltaY = circle.currentDeltaY + y. } circle.style,transform="translate(" + circle.currentDeltaX + "px; " + circle,currentDeltaY + "px)"; } function moveUp(){ move(0, -deltaY); } function moveDown(){ move(0, deltaY); } function moveRight(){ move(deltaX, 0); } function moveLeft(){ move(-deltaX, 0); }

 #circle{ height:40px; width:40px; position: absolute; background-color:seagreen; border-radius:50%; left:140px; transition: transform 0.2s; top: 150px; }

 <div id="map"></div> <button type="button" class="btn btn-default" onclick="moveUp()">Move Up</button> <button type="button" class="btn btn-default" onclick="moveDown()">Move Down</button> <button type="button" class="btn btn-default" onclick="moveRight()">Move Right</button> <button type="button" class="btn btn-default" onclick="moveLeft()">Move Left</button> <div id="circle"></div>