const gameContainer = document.getElementById("gameContainer");

let player = {
    "position": {
        "x": 5,
        "y": 5
    }
};

function rysuj() {
    let html = '<table>';
    for(let x=0;x<tableWIDTH;x++) {
        html += '<tr>';
        for(let y=0;y<tableHEIGHT;y++) {
            html += '<td>';
            let img = '<img src="2.png">';
            for(let i=0;i<table.length;i++) {
                if(table[i].x == x&&table[i].y == y) {
                    img = '<img src="1.png">';
                }
            }

            if(player.position.x == x&&player.position.y == y) {
                img = '<img src="3.png">';
            }

            html += img+'</td>';
        }
        html += '</tr>';
    }
    html += '</table>';
    gameContainer.innerHTML = html;
}

setInterval(render, 20);

function render() {
    rysuj();
}


function checkCollision(x, y) {
    for(let i=0;i<table.length;i++) {
        if(table[i].x == x&&table[i].y == y) {
            return false;
        }
    }

    if(x>=tableWIDTH||y>=tableHEIGHT||x<0||y<0) {
        return false;
    }

    return true;
}

document.addEventListener("keydown", (e) => {
    switch(e.keyCode) {
        case 65: // Left
            if(checkCollision(player.position.x,player.position.y-1)) {
                player.position.y -= 1;
            }
        break;

        case 87: // Up
            if(checkCollision(player.position.x-1,player.position.y)) {
                player.position.x -= 1;
            }
        break;

        case 68: // Right
            if(checkCollision(player.position.x,player.position.y+1)) {
                player.position.y += 1;
            }
        break;

        case 83: // Down
            if(checkCollision(player.position.x+1,player.position.y)) {
                player.position.x += 1;
            }
        break;
    }
});

rysuj();