我想左右移动snake，它向右移动，但是当我单击左时，它只是停止，不向左移动，我知道setInterval返回id，但为什么它不向右移动？
const snake = document.querySelector(".box");
const btns = document.querySelectorAll(".btns > button");
var X = 0;
var intervalrightId;
var intervallefttId;
btns.forEach((btn) => {
btn.addEventListener("click", function(e) {
if (e.target.textContent == "right") {
if (intervallefttId) {
clearInterval(intervallefttId)
}
intervalrightId = setInterval(() => {
X += 100;
snake.style.left = X;
}, 500)
}
if (e.target.textContent == "left") {
if (intervalrightId) {
clearInterval(intervalrightId)
}
intervallefttId = setInterval(() => {
X -= 100;
snake.style.right = X;
}, 500)
}
})
})
2条答案
按热度按时间p5fdfcr11#
left和right这两种样式都是冲突的。按向右，然后按向左，会导致这样的情况：这是没有意义的。您应该依赖
left或right，而不是两者xpcnnkqh2#
使用transform属性代替left和right属性。
替换
snake.style.right = X;关于
snake.style.transform= 'translateX({X}px)当你使用left和right属性时，DOM对象是按照父对象的左边或右边的距离来定位的（plus对象应该将position属性设置为absolute，否则left和right属性将不起作用）。例如，如果父对象的宽度为100px，而您将其查尔兹left属性设置为10px，child child将位于parents左边框右10xp处，当您将right属性设置为10px时，child将位于parent右边框左侧10px处。如果你的对象同时具有right和left属性，其中一个将被忽略。这就是为什么使用transform propery将对象移动到其先前的位置是更好的选择。