在我开始提问之前，请记住以下几点：
问题
[当我多次单击右箭头键，然后按跳转框时，目标HTML对象master-cube返回到其自然位置，然后在此处执行movejump()函数，但是我希望HTML对象从当前位置移动。
[我知道transform将从其自然位置触发，但是是否有一行代码告诉它从其当前位置运行？这就是所需要的。
这里是repl.it链接：https://repl.it/@ritzcrackerz201/cake
这是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>cake (singleplayer 2d adventure game)</title>
<style>
html {
margin: none;
}
body {
margin: none;
width: 100vw;
height: 100vh;
}
.arrowcontrols {
float: left;
margin-right: 5px;
margin-top: 20%;
margin-bottom: 80%;
}
#master-cube {
background-image: url("mastercubes/master1.png");
background-size: 100%;
height: 40px;
width: 40px;
transition: all 0.5s;
position: absolute;
}
</style>
</head>
<body>
<script>
let xarrowmovement = 0;
function moveright() {
xarrowmovement += 80;
document.getElementById("master-cube").style.transform = `translateX(${xarrowmovement}%)`;
console.log("Executing function 'moveright()'. Moving a distance of " + xarrowmovement + "%");
}
function moveleft() {
xarrowmovement += -80;
document.getElementById("master-cube").style.transform = `translateX(${xarrowmovement}%)`;
console.log("Executing function 'moveleft()'. Moving a distance of " + xarrowmovement + "%");
}
let jumpboxupmovementy = 0;
function movejump() {
jumpboxupmovementy += 80;
document.getElementById("master-cube").style.transform = `translateY(${-jumpboxupmovementy}%)`;
console.log("Executing function 'movejump()'. Moving a distance of " + jumpboxupmovementy + "%");
setTimeout(function(){
jumpboxupmovementy -= 80;
document.getElementById("master-cube").style.transform = `translate(${jumpboxupmovementy}%)`;
}, 500);
}
</script>
<div id="master-cube"></div>
<img src="arrows/leftarrow.png" alt="Left Arrow" height="80vh" width="80vw" onclick="moveleft()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="80vh" width="80vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/rightarrow.png" alt="Right Arrow" height="80vh" width="80vw" onclick="moveright()" class="arrowcontrols">
</body>
</html>
感谢所有回答。我将投票并接受工作答复。谢谢，新年快乐！
该对象被移回，因为当您重新分配其值时，您将覆盖先前的转换。解决问题的最简单方法是在分配给+=时连接字符串（使用=而不是style.transform），因为转换可能会堆积在一起，您可以执行以下操作：
#foo {
transform: translateX(50px)translateY(50px);
}<div id="foo">bar</div>话虽如此，我认为一个更好的解决方案是让一个对象存储您的输入生成的x和y偏移量，并在需要时基于该偏移量创建转换。基本示例如下：
const nav = document.getElementById('nav');
const movableObject = document.getElementById('movable-object');
const translation = { x: 0, y: 0 };
const translate = () => {
movableObject.style.transform = `translate(${translation.x}px,${translation.y}px)`;
};
nav.onclick = ({ target }) => {
if (!target.classList.contains('nav-arrow')) return;
switch(target.id) {
case 'up':
translation.y -= 5;
break;
case 'left':
translation.x -= 5;
break;
case 'down':
translation.y += 5;
break;
case 'right':
translation.x += 5;
break;
};
translate();
};#nav {
width: 72px;
display: grid;
grid-template-areas:
". up ."
"left down right";
}
#up {
grid-area: up;
}
#left {
grid-area: left;
}
#down {
grid-area: down;
}
#right {
grid-area: right;
}
#movable-object {
width: 10px;
height: 10px;
background: black;
}
.nav-arrow {
text-align: center;
border: 1px solid black;
padding: 8px;
width: 16px;
height: 16px;
font-size: 16px;
cursor: pointer;
user-select: none;
}<div id="nav">
<span class="nav-arrow" id="up">↑</span>
<span class="nav-arrow" id="left">←</span>
<span class="nav-arrow" id="down">↓</span>
<span class="nav-arrow" id="right">→</span>
</div>
<div id="movable-object"></div>