How do I get pressed keys correctly?

June 12, 2022

function will change snake position by deleting the tail and adding a
new head in needed direction(VectorX/Y). But when I press any button vectors are don`t changing.

    const canvas = document.getElementById('map');
const cs = canvas.getContext('2d');

function drawSqr(color, size, position){
    cs.fillStyle = color;
    cs.fillRect(position[0] * size, position[1] * size, size, size);
}



const sqrSize = 20;
cs.fillStyle = "#000000";
cs.fillRect(0, 0, canvas.width, canvas.height);

let vectorX = 0, vectorY = 0;

let snake = {
    position : [
        [1, 1],
        [2, 1],
        [3, 1],
    ],
    color: "#00FFFF",
    snakeRender: function(event){
            document.addEventListener('keydown', function(event, vectorX, vectorY){
                switch(event){
                    case "w":
                        vectorX = 0, vectorY = 1;
                        break;
                    case "a":
                        vectorX = -1, vectorY = 0;
                        break;
                    case "s":
                        vectorX = 0, vectorY = -1;
                        break;
                    case "d":
                        vectorX = 1, vectorY = 0;
                        break;
                }
            return alert(event + " was pressed!");
        });
    
        let [x, y] = this.position.at(-1);
        this.position.push([x + vectorX, y + vectorY]);
        let oldTail = this.position.shift()
        console.log(this.position)
        console.log(vectorX, vectorY)
        drawSqr("#000000", sqrSize, oldTail);
        for(let pos of this.position){
            drawSqr(this.color, sqrSize, pos);
        }
        setTimeout(() => snake.snakeRender(), 1000);
    }
};


snake.snakeRender();

<!DOCTYPE html>
<html>
 <head>
   <title>The snake</title>
   <meta charset="utf-8">
 </head>
 <body>
    <canvas id="map" width="1280" height="720"></canvas>
    <script src="script.js"></script>
 </body> 
</html>

P.s vectors will change when you press "W", "A", "S", "D". I think
problem is in setTimeOut but i don`t know how can i fix this. Thanks
for your help. P.p.s I have checked does program see the pressed
buttons and it is returned [object KeyboardEvent]

>Solution :

There are two issues:

function(ev, vectorX, vectorY) means that updating vectorX and vectorY will update those local variables and not the global ones declared here: let vectorX = 0, vectorY = 0;. (And only the global ones are accessible to the updaters.)
Using switch(ev) instead of switch(ev.key) means that it will never match any key, because ev is an object, not a string.

const canvas = document.getElementById('map');
const cs = canvas.getContext('2d');

function drawSqr(color, size, position){
    cs.fillStyle = color;
    cs.fillRect(position[0] * size, position[1] * size, size, size);
}



const sqrSize = 20;
cs.fillStyle = "#000000";
cs.fillRect(0, 0, canvas.width, canvas.height);

let vectorX = 0, vectorY = 0;

let snake = {
    position : [
        [1, 1],
        [2, 1],
        [3, 1],
    ],
    color: "#00FFFF",
    snakeRender: function(event){
            document.addEventListener('keydown', function(ev){
                switch(ev.key){
                    case "w":
                        vectorX = 0, vectorY = 1;
                        break;
                    case "a":
                        vectorX = -1, vectorY = 0;
                        break;
                    case "s":
                        vectorX = 0, vectorY = -1;
                        break;
                    case "d":
                        vectorX = 1, vectorY = 0;
                        break;
                }
            return
        });
    
        let [x, y] = this.position.at(-1);
        this.position.push([x + vectorX, y + vectorY]);
        let oldTail = this.position.shift()
        console.log(this.position)
        console.log(vectorX, vectorY)
        drawSqr("#000000", sqrSize, oldTail);
        for(let pos of this.position){
            drawSqr(this.color, sqrSize, pos);
        }
        setTimeout(() => snake.snakeRender(), 1000);
    }
};


snake.snakeRender();

<!DOCTYPE html>
<html>
 <head>
   <title>The snake</title>
   <meta charset="utf-8">
 </head>
 <body>
    <canvas id="map" width="1280" height="720"></canvas>
    <script src="script.js"></script>
 </body> 
</html>

Also, adding an event listener every single time snakeRender() runs, means there are many event listeners, each doing the same thing. I didn’t adjust anything there, though.