among us p5js

var socket = io.connect(":30000?sketch=946854");
var id;
var waitToStart = 0;
var mapImg;
var table;
var p;
var mapP = []
var mXo = 0
var mYo = 0

function preload() {
    charater2Img = loadImage("charater.png")
    mapImg = loadImage("The Skeld (1).jpg")

}

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);
    if (getItem("2co") == null) {
        id = random(9999999);
        storeItem("2co", id)
    } else {
        id = getItem("2co")
    }
    socket.on("update", update)
    socket.on("update2", update2)
    socket.on("updateServers""play"
var myServer = "choose"
var startA = 0
var servers = 4;
var st = 0
var serverPlay = []
var mil = 0;

function doServers() {
    for (let i = 0; i < servers; i++) {
        let playSer = 0;
        for (let p = 0; p < serverPlay.length; p++) {
            if (serverPlay[p].server == i) {
                playSer++;
            }
        }
        if (bonE("Server: " + i + " " + playSer + " players", width / 2, height / 2 + ((i - servers / 2) * 60), 200, 50, 125, 125, 125, 100, 100, 100, 25)) {
            myServer = i;
            home = "wait"
        }
    }

}

function draw() {
    if (millis() > mil + 2000 && home !== "choose" && false) {
        print("You have been kicked for inactivity. You probably switched tabs.");
        background(255, 40, 40);
        noLoop();
    } else {
        draw2();
    }
    mil = millis()

}

function draw2() {
    frameRate(30)

    if (home == "play") {
        socket.emit("update2", id, myServer, player.x, player.y, player.dir)
        background(0);
        imageMode(CENTER)
        for (let i = 0; i < 3; i++) {
            player.move();

            while (touch(width / 2 + player.w2 / 2, height / 2)) {
                player.x -= player.speed;
            }

            while (touch(width / 2 - player.w2 / 2, height / 2)) {
                player.x += player.speed;
            }

            while (touch(width / 2, height / 2 + player.h2 / 2)) {
                player.y -= player.speed;
            }

            while (touch(width / 2, height / 2 - player.h2 / 2)) {
                player.y += player.speed;

            }
        }

        doWalls();
        drawMap(0, 0)
        player.show();

        drawPlayers()

    }

    function touch(x, y) {
        let m = 0
        let ar = mapImg.get(x + mapImg.width / 2 + round(player.x) * 1.35 - width / 2, y + mapImg.height / 2 + round(player.y) * 1.35 - height / 2)
        for (let i = 0; i < 3; i++) { //noprotect
            if (ar[i] > 40 && ar[i] < 52) {
                m++
            }
        }
        if (m == 3) {
            return (true)
        }
    }

    function drawPlayers() {

        for (let i = 0; i < players.length; i++) {
            if (players[i].dir == 1) {
                image(charaterImg, players[i].x - (player.x - width / 2), players[i].y - (player.y - height / 2))
            }
            if (players[i].dir == -1) {
                image(charater2Img, players[i].x - (player.x - width / 2), players[i].y - (player.y - height / 2))

            }
            players[i].time += 0.01 //2.2
            if (players[i].time > 1) {
                players.splice(i, 1);
                i--;
            }
        }
    }

    function drawMap(x, y) {
        push();

        translate(x - (player.x - width / 2), y - (player.y - height / 2))

        image(mapImg, 0, 0, mapImg.width / 1.35, mapImg.height / 1.35, 0, 0)

        pop();
        stroke(0, 0, 0, 150)
        strokeWeight(1200 - player.vision)
        noFill()
        ellipse(width / 2, height / 2, 1000 + 200)
    }

    function doWalls() {
        noStroke()
        for (let i = 0; i < walls.length; i++) {
            if (walls[i].x - (player.x - width / 2) + walls[i].w > -50 && walls[i].x - (player.x - width / 2) < width &&
                walls[i].y - (player.y - height / 2) + walls[i].h > -50 && walls[i].y - (player.y - height / 2) < height) {
                //Make sure to only include a hit box if player can see it
                //walls[i].show();
                while (player.x + (player.w / 2) > walls[i].x && player.x + (player.w / 2) < walls[i].x + (player.currentSpeed * 3) + 0.1 && player.y + (player.h / 2) + 1 > walls[i].y && player.y + (-player.h3 / 2) + 1 < walls[i].y + walls[i].h) {
                    player.x -= (player.currentSpeed * 3);
                }
                while (player.x - (player.w / 2) > walls[i].x + walls[i].w - (player.currentSpeed * 3) - 0.1 && player.x - (player.w / 2) < walls[i].x + walls[i].w && player.y - (-player.h / 2) - 1 > walls[i].y && player.y - (player.h3 / 2) - 1 < walls[i].y + walls[i].h) {
                    player.x += (player.currentSpeed * 3);
                }
                while (player.y - (player.h3 / 2) > walls[i].y + walls[i].h - (player.currentSpeed * 3) - 0.1 && player.y - (player.h3 / 2) < walls[i].y + walls[i].h && player.x - (-player.w / 2) - 1 > walls[i].x && player.x - (player.w / 2) - 1 < walls[i].x + walls[i].w) {
                    player.y += (player.currentSpeed * 3);
                }
                while (player.y + (player.h / 2) > walls[i].y && player.y + (player.h / 2) < walls[i].y + (player.currentSpeed * 3) + 0.1 && player.x + (player.w / 2) + 1 > walls[i].x && player.x + (-player.w / 2) + 1 < walls[i].x + walls[i].w) {
                    player.y -= (player.currentSpeed * 3);
                }
            }
        }
    }

}

function update(id, server) {
    if (home == "wait" && server == myServer) {
        let add = true
        for (let i = 0; i < players.length; i++) {
            if (id == players[i].id) {
                add = false
                players[i].time = 0
            }
        }
        if (add && players.length < startA) {
            players.push({
                name: "test id:" + random(999),
                id: id,
                x: 0,
                y: 0,
                time: 0
            })
        }
    }
}

function update2(id, server, x, y, dir) {
    if (home == "play" && server == myServer) {
        for (let i = 0; i < players.length; i++) {
            if (id == players[i].id) {
                players[i].x = x
                players[i].y = y
                players[i].dir = dir
                players[i].time = 0
            }
        }
    }
}

function updateServers(id, server) {
    let add = true
    for (let i = 0; i < serverPlay.length; i++) {
        if (id == serverPlay[i].id) {
            add = false
            serverPlay[i].time = 0;
            serverPlay[i].server = server;
        }
    }
    if (add) {
        serverPlay.push({
            id: id,
            server: server,
            time: 0
        })
    }

}

function Wall(x, y, w, h) {
    this.x = x
    this.y = y
    this.w = w;
    this.h = h;
    this.show = function() {
        fill(0, 200)
        push()
        rectMode(CORNER)
        rect(this.x - (player.x - width / 2), this.y - (player.y - height / 2), this.w, this.h)
        pop()
    }
}

function bonE(m, x, y, w, h, r, g, b, r2, g2, b2, s) {
    push();
    rectMode(CENTER)

    fill(r, g, b);
    noStroke();
    if ((mouseX > x - (w / 2) && mouseX < x + (w / 2)) && (mouseY > y - (h / 2) && mouseY < y + (h / 2)) && mouseIsPressed && st == 0) {
        st = 1;
        pop();
        return (true);
    }
    if ((mouseX > x - (w / 2) && mouseX < x + (w / 2)) && (mouseY > y - (h / 2) && mouseY < y + (h / 2)) && st == 0) {
        cursor(HAND);
        fill(r2, g2, b2);
    }
    rect(x, y, w, h, 5)

    noStroke();
    fill(0);
    textAlign(CENTER, CENTER)
    fill(255);
    textSize(s)
    text(m, x, y - 3)
    pop();
}