javascript - 是否可以在普通 Javascript 中同时运行多个 if 语句？如果是这样你怎么办？

Question

我正在使用 HTML、CSS 和普通 Javascript 中的 Canvas 编写游戏。我制作了两个 Angular 色并添加了他们的运动控制。唯一的问题是，当我执行它时，我必须等待玩家 1 按任意键让他的 Angular 色移动，然后允许玩家 2 输入他的 Angular 色如何移动。

玩家 1 使用 wad 键移动，玩家 2 使用箭头键。我不知道如何让他们同时按下按钮并同时移动。当我尝试这个时，首先按下输入键的字符不会移动，而第二个字符会移动。此外，如果玩家想要跳跃并同时向右移动，这是不可能的。目前，程序的工作方式是根据按下的键在不同的空间中重新绘制字符(方 block )。

    var canvas;
    var context;
    var framesPerScond=30;
    //player1
    var player1X=110;
    var player1Y=650;
    var gravity1=1;

    //player2
    var player2X=810;
    var player2Y=650;
    var gravity2=1;

    window.onload = function(){
        canvas=document.getElementById("canvas");
        context=canvas.getContext("2d");
        console.log("Onload Working");

        setInterval(function(){
            drawEverything();
        }, 1000/framesPerScond);

        document.addEventListener('keydown', function(event){
            MoveEverything(event);
        });
    }

    function drawEverything(){
        //move player 1
        if(player1Y<450){
            player1Y=450;
        }
        else if(player1Y<650){
            player1Y+=gravity1;
            gravity1+=1;
        }
        else if(player1Y=650){
            player1Y=650;
            gravity1=1;
        }
        //move Player2
        if(player2Y<450){
            player2Y=450;
        }
        else if(player2Y<650){
            player2Y+=gravity2;
            gravity2+=1;
        }
        else if(player2Y=650){
            player2Y=650;
            gravity2=1;
        }
        colorRect(0,0,canvas.width,canvas.height, 'white');
        colorRect(0,690, canvas.width,10, '#7e7e7e');
        colorRect(player1X,player1Y,40,40,'#7F0019');
        colorRect(player2X,player2Y,40,40, '#003366');
    }

    function MoveEverything(event){
        var key_press=String.fromCharCode(event.keyCode);
        var key_code=event.keyCode;
        console.log(key_code,key_press);
        //player 1 movement
        if(key_press=="D"){
            player1X+=10; 
        }
        else if(key_press=="A"){
            player1X-=10;
        }
        else if(key_press=="W"){
            player1Y-=200;
        }
        else if(key_code==39){
            player2X+=10;
        }
        else if(key_code==37){
            player2X-=10;
        }
        else if(key_code==38){
            player2Y-=200;
        }
    }



    function colorRect(leftX, leftY, width, height, color){
        context.fillStyle=color;
        context.fillRect(leftX,leftY,width,height);
    }

我想知道同时执行“if 语句”是否可以解决这个问题。如果没有，是否还有其他解决此问题的方法？

Answer 1

不，JavaScript 是单线程的，它不能解决您的问题，它只会产生竞争条件。

要解决它，请为每个更改的值创建一个临时变量，并在 if 完成后应用它。