Javascript 向右移动会立即将div推离屏幕区域很远

当我试图仅在第一个“移动命令”中将div（tank）向右移动，并且仅在该方向上移动时，我遇到了一个问题，即我的div向右移动数千像素，远离屏幕区域。希望有人能帮我看看为什么会这样

function animate() {
    var tank = document.getElementById("tank");

    tank.style.marginLeft="360px";
    tank.style.marginTop="440px";

    window.xpos = tank.style.marginLeft;
    window.ypos = tank.style.marginTop;

    window.x = xpos.replace("px","");
    window.y = ypos.replace("px","");

    document.onkeydown = checkKey;

    function checkKey(e) {

        e = e || window.event;

        if (e.keyCode == '37') {
            if (x > 0) {
                x = x - 20;
                tank.style.marginLeft = x + "px";
            }
        } else if (e.keyCode == '39') {
            if (x < 70) {
                x = x + 20;
                tank.style.marginLeft = x + "px";
            }
        } else if (e.keyCode == '38') {
            if (y > 0) {
                y = y - 20;
                tank.style.marginTop = y + "px";
            }
        } else if (e.keyCode == '40') {
            if (y < 440) {
                y = y + 20;
                tank.style.marginTop = y + "px";
            }
        }
    }

    checkKey(e);
}

window.lives = 3;

function destroy() {
    if (lives != 0) {
        alert("Life Lost!");
        lives--;
        window.collision == false;
        animate();
    } else {
        alert("Try Again!");
    }
}

window.collision = true;

function state() {
    if (collision == false) {
        window.state = 1;
    } else if (collision == true) {
        window.state = 0;
    }

    return state;
}

state();

if (state == 1) {   
    animate();
} else {
    destroy();
}

function animate（）{
var tank=document.getElementById（“tank”）；
tank.style.marginLeft=“360px”；
tank.style.marginTop=“440px”；
window.xpos=tank.style.marginLeft；
window.ypos=tank.style.marginTop；
window.x=xpos.replace（“px”，即“）；
window.y=ypos.replace（“px”和“）；
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（e.keyCode=='37'）{
如果（x>0）{
x=x-20；
tank.style.marginLeft=x+“px”；
}
}否则如果（e.keyCode=='39'）{
如果（x<70）{
x=x+20；
tank.style.marginLeft=x+“px”；
}
}否则如果（e.keyCode=='38'）{
如果（y>0）{
y=y-20；
tank.style.marginTop=y+“px”；
}
}否则如果（e.keyCode=='40'）{
如果（y<440）{
y=y+20；
tank.style.marginTop=y+“px”；
}
}
}
检查键（e）；
}
window.lives=3；
函数销毁（）{
如果（生命！=0）{
警惕（“失去生命！”）；
生命--；
window.collision==false；
制作动画（）；
}否则{
警告（“再试一次！”）；
}
}
window.collision=true；
函数状态（）{
如果（冲突==false）{
window.state=1；
}else if（冲突==true）{
window.state=0；
}
返回状态；
}
状态（）；
如果（状态==1）{
制作动画（）；
}否则{
破坏（）；
}

你认为你在做一个数学运算，但实际上你在做一个字符串连接。在Javascript中，“360”-20等于340，因为在这种情况下，字符串被转换为一个数字，然后对两个数值执行算术减法，但是加号运算符适用一组不同的规则：在这种情况下，“360”+20产生“36020”因为数字被转换为字符串，然后两个字符串被连接

这样做：

window.x = Number(xpos.replace("px",""));
window.y = Number(ypos.replace("px",""));

---

不确定，但您可能想考虑用

switch（n）{…}

函数替换复杂的if/elseif语句。还没有真正使用switch case函数，但在我解决问题后会尝试一下，谢谢！太棒了。我今年早些时候开始使用它，但它还没有引起任何问题。在这里查看：谢谢！只是先找出这个问题，真的没有意义。与键盘无关（我有两个键盘，两个都有），不基于浏览器，如果我从一开始就点击它，可以在多个…margin left=“36020px”上进行尝试，但是如果我先点击左键、上键或下键，然后点击右键，右键每次都有效。真的让我很困惑