index.html

<canvas id="c" width="900" height="900" style="border: 1px solid #000000;"></canvas>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/Room.js"></script>
<!-- <script src="js/map.js"></script> -->
<!-- <script src=""></script> -->
<script>
    let canvas;
    let ctx;
    let background;
    let squareSize = 60;
    const rows = 15;
    const cols = 15;
    let mapCounter = 0;
    let room;
    let swapRoom = false;
    let data;


    canvas = document.getElementById("c");
    /*     canvas.width = 900;
        canvas.height = 900; */
    let cWidth = canvas.width;
    let cHeight = canvas.height;
    ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";

    function drawBoard() {
        for (let i = 0; i < cols; i++) {
            for (let j = 0; j < rows; j++) {
                let x = i * squareSize;
                let y = j * squareSize;

                ctx.strokeRect(x, y, squareSize, squareSize);
            }
        }

    }
    function loadRoom(maps) {
        data = maps;

        room = new Room("start", true, [["tree", [1,2]],["stone"], ["chest"]], [0,0], [14,14]);
        /* if (room == null || swapRoom) {
            /* room = new Room(data.roomName, data.outside,
                data.obstacles, data.entryPoint,
                data.exitPoint, cols, rows); */
         /*   room.generateRoom(squareSize, false);
            if (swapRoom) {
                player.xPos = data.entryPoint[0];
                player.yPos = data.entryPoint[1];
                player.show;
                swapRoom = false;
            }
        } else {
            room.generateRoom(squareSize, true);
        } */

    }
    function play(maps) {
        loadRoom();
        /*
        player = new Player(room.entryPoint, "Dude", squareSize, mapCounter);
        player.show(); */
    }

    let socket = io();

    window.onload = () => {
        $.ajax({
            type: "GET",
            url: "http://localhost:2000/ajaxcall",
            dataType: "json",
            success: (data) => {
                drawBoard();
                play(data);
                console.log(data);
            }
        }).fail((jqXHR, textStatus, err) => {
            console.log("AJAX ERROR: ", textStatus);
        });
    /*
    drawBoard();
    play(maps);
     */

    }


    socket.on("newPos", (data) => {
        /* ctx.clearRect(0, 0, cWidth, cHeight);
        for (let i = 0; i < data.length; i++) {
            ctx.fillText(data[i].number, data[i].x, data[i].y);
        } */
    });

    // send keyPress
    document.onkeydown = function (event) {
        if (event.keyCode === 68)
            socket.emit("keyPress", { inputId: "right", state: true });
        else if (event.keyCode === 65)
            socket.emit("keyPress", { inputId: "left", state: true });
        else if (event.keyCode === 87)
            socket.emit("keyPress", { inputId: "up", state: true });
        else if (event.keyCode === 83)
            socket.emit("keyPress", { inputId: "down", state: true });
    }

    // send keyRelease
    document.onkeyup = function (event) {
        if (event.keyCode === 68)
            socket.emit("keyPress", { inputId: "right", state: false });
        else if (event.keyCode === 65)
            socket.emit("keyPress", { inputId: "left", state: false });
        else if (event.keyCode === 87)
            socket.emit("keyPress", { inputId: "up", state: false });
        else if (event.keyCode === 83)
            socket.emit("keyPress", { inputId: "down", state: false });
    }


</script>