JavaScript - Moving a character around using WASD but trouble breaking down movement into simpler functions

Question

I'm making a puzzle game where the user uses WASD to move a character up, left, down, right respectively. It works fine at the moment but I was wondering if there was a way to break the code down into more intuitive functions. Below is my code:

function move(e)
    {
        for (var y = 0; y < mapHeight; y++) {
            for (var x = 0; x < mapWidth; x++) {
                if (map[y][x] == "@" || map[y][x] == "+") {
                    break;
                }
            }

            if (map[y][x] == "@" || map[y][x] == "+") {
                break;
            }
        }

        var player_x = x;
        var player_y = y;

        if (e.key == 'w') {
            var player_new_x = player_x;
            var player_new_y = player_y - 1;

            if (moveBox(player_new_x, player_new_y, "up") === false) {
                return;
            }

            if (map[player_new_y][player_new_x] == " " ||
                map[player_new_y][player_new_x] == ".") {

                if (map[player_new_y][player_new_x] == " ") {
                    map[player_new_y][player_new_x] = "@";
                } else if (map[player_new_y][player_new_x] == ".") {
                    map[player_new_y][player_new_x] = "+";
                }

                if (map[player_y][player_x] == "@") {
                    map[player_y][player_x] = " ";
                } else if (map[player_y][player_x] == "+") {
                    map[player_y][player_x] = ".";
                }
            }
        } else if (e.key == 's') {
            var player_new_x = player_x;
            var player_new_y = player_y + 1;

            if (moveBox(player_new_x, player_new_y, "down") === false) {
                return;
            }

            if (map[player_new_y][player_new_x] == " " ||
                map[player_new_y][player_new_x] == ".") {

                if (map[player_new_y][player_new_x] == " ") {
                    map[player_new_y][player_new_x] = "@";
                } else if (map[player_new_y][player_new_x] == ".") {
                    map[player_new_y][player_new_x] = "+";
                }

                if (map[player_y][player_x] == "@") {
                    map[player_y][player_x] = " ";
                } else if (map[player_y][player_x] == "+") {
                    map[player_y][player_x] = ".";
                }
            }
        } else if (e.key == 'a') {
            var player_new_x = player_x - 1;
            var player_new_y = player_y;

            if (moveBox(player_new_x, player_new_y, "left") === false) {
                return;
            }

            if (map[player_new_y][player_new_x] == " " ||
                map[player_new_y][player_new_x] == ".") {

                if (map[player_new_y][player_new_x] == " ") {
                    map[player_new_y][player_new_x] = "@";
                } else if (map[player_new_y][player_new_x] == ".") {
                    map[player_new_y][player_new_x] = "+";
                }

                if (map[player_y][player_x] == "@") {
                    map[player_y][player_x] = " ";
                } else if (map[player_y][player_x] == "+") {
                    map[player_y][player_x] = ".";
                }
            }
        } else if (e.key == 'd') {
            var player_new_x = player_x + 1;
            var player_new_y = player_y;

            if (moveBox(player_new_x, player_new_y, "right") === false) {
                return;
            }

            if (map[player_new_y][player_new_x] == " " ||
                map[player_new_y][player_new_x] == ".") {

                if (map[player_new_y][player_new_x] == " ") {
                    map[player_new_y][player_new_x] = "@";
                } else if (map[player_new_y][player_new_x] == ".") {
                    map[player_new_y][player_new_x] = "+";
                }

                if (map[player_y][player_x] == "@") {
                    map[player_y][player_x] = " ";
                } else if (map[player_y][player_x] == "+") {
                    map[player_y][player_x] = ".";
                }
            }
        } else {
            return;
        }
        render();
        }

Is it possible to make four functions, one for each of the movement keys? Any help would be much appreciated

Answer 1

Yes It′s possible to do what you want, 4 different functions

But ... you should intercept the events keydown (when the user presses the key) and keyup (when the user releases the key)

As long as the key is "pressed" you do the movement

You can create an object like this

let move = { moveH : 0 , moveV :0 }

When the keydown event is detected for "a" -> {moveH : -1, moveV :0}

"s" -> { moveH :0 , moveV :1 }
"w" -> { moveH :0 , moveV :-1 }
"d" -> { moveH :1 , moveV :0 }

When the keyup event is detected .. for any key -> {moveH :0 , moveV:0 }

Meanwhile apply the move to the object on the screen

something like

stuff.position =   { x : stuff.position.x + move.moveH , y: stuff.position.y + move.moveV }