samedi 4 mai 2019

Is it possible to run multiple if statements at the same time in vanilla Javascript? If so how do you?

I'm writing a game using canvas in html, CSS and vanilla Javascript. I have made two characters and added in their controls for movement. The only problem is that when I execute it I have to wait for player 1 to press whatever key for his character to move, and then player 2 is allowed to input how his character moves.

Player 1 uses the wad keys to move and player 2 the arrow keys. I can't figure out how to have them press the buttons at the same time and move at the same time. When I try this the character that's input key was pressed first, will not move while the second character will move. Also if a player wants to jump and move to the right, at the same time, it isn't possible. At the moment the program works by redrawing the characters(squares) in a different space depending on which key is pressed.

    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);
    }

I was wondering if, simultaneously performing the 'if statements' would solve this. If it won't are there any other solutions to this problem?

Aucun commentaire:

Enregistrer un commentaire