CODEWITHSUNDEEP
javascript
Matin
Matin

Reputation: 63

how both player move at the same time (js game)

И have a hockey game in javascript but tво players can not move at the same time. In fact, when one moves, the other remains motionless. It is normal for both players to move at the same time in this game. Do you know a function that can help me? Should a foreign function be added? Thank you for your help.





    <html>
    <head>
        <style>
            body {
                margin: 0;
            }
            .P1 {
                position: absolute;
                font-size: 110px;
                background-color: white;
            }
            .P2 {
                position: absolute;
                left: 1500px;
                font-size: 110px;
                background-color: white;
            }
        </style>
    </head>
    <body onkeydown="keyD(event)">
        <span class="P1">|</span>
        <span class="P2">|</span>
    </body>
    <script>
        var P1D = 0;
        var P2D = 0;
        var spanP1 = document.getElementsByClassName("P1")[0];
        var spanP2 = document.getElementsByClassName("P2")[0];
        function keyD(e) {
            if (e.keyCode == 38 || e.keyCode == 40) {
                f1(e);
            }
            if (e.keyCode == 83 || e.keyCode == 87) {
                f2(e);
            }
        }
        function f1(e) {
            if (e.keyCode == 40) {
                if (P2D >= 620) {
                } else {
                    P2D += 10;
                    spanP2.style.top = P2D + "px";
                }
            }
            if (e.keyCode == 38) {
                if (P2D <= -20) {
                } else {
                    P2D -= 10;
                    spanP2.style.top = P2D + "px";
                }
            }
        }
        function f2(e) {
            if (e.keyCode == 83) {
                if (P1D >= 620) {
                } else {
                    P1D += 10;
                    spanP1.style.top = P1D + "px";
                }
            }
            if (e.keyCode == 87) {
                if (P1D <= -20) {

                } else {
                    P1D -= 10;
                    spanP1.style.top = P1D + "px";
                }
            }
        }
    </script>
    </html>

Upvotes: 0

Views: 66

Answers (1)

seymar
seymar

Reputation: 4063

You would need to remember which keys are pressed down or not. For example by saving their state in an object.

Furthermore, when player 1 has a key pressed and player 2 starts pressing another, the key of player 1 stops repeating for a moment. To prevent this you would need to stop relying on the key repeat of the system of the user. For example by using a setInterval or later implement it into your gameloop. Example:

// Save key states in an object
const keystates = {}
document.addEventListener('keydown', e => {
    keystates[e.code] = true
})
document.addEventListener('keyup', e => {
    keystates[e.code] = false
})

// Repeat the key action in your gameloop
const repeat_interval = 500
setInterval(() => {
    if (keystates['KeyW']) console.log('Player1 up')
    if (keystates['KeyS']) console.log('Player1 down')
    if (keystates['ArrowUp']) console.log('Player2 up')
    if (keystates['ArrowDown']) console.log('Player2 down')
}, repeat_interval)

EDIT: Also don't use keyCode as it is deprecated

Upvotes: 1

Related Questions