Vull que modifiquis aquest codi afegint borrant codi poc a poc (el codi és una representació del "pathfinding" d'un BFS) per que el canva sigui més gran (visualment), els quadrats també (visualment), i fes que tingui 20 files i 20 columnes en total, no 9. Després, fes que n'hi hagui una representació visual de totes les cel·les per les que passa el BFS i després, fes que el camí cap a la moneda (sense que la moneda canvi de color) sigui d'un color diferent a les cel·les recorrides. Vull que aquest color sigui: verd clar per la búsqueda, verd pel camí. Després de haver trobat aquest cami, vull que el personatje vagi caminant cap a la moneda fins estar a sobre (que és el que ja fa el codi inicialment). Vull que em doneu el codi sencer, (el que has editat) i després em feu saber absolutament cada canvi, referint-me a cada linia que exactament has afegit, substituit o borrat al codi per fer això possible pas a pas. Aquí teniu el codi:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moviment X i O en Canvas</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            min-height: 100vh;
        }
        canvas {
            border: 1px solid black;
            background-color: #ccc;
        }
        #buttonContainer {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        #buttonContainer button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="gameCanvas" width="270" height="270"></canvas>
        <div id="buttonContainer">
            <button onclick="paintCoinAndPlayer()">
                Pintar moneda i jugador
            </button>
            <button onclick="bfs()">
                BFS
            </button>
        </div>
    </div>
    <script>
        let matrix = Array(9).fill().map(() => Array(9).fill("."));
        let playerPos = { x: null, y: null };
        let coinPos = { x: null, y: null };
        let coinEaten = false;

        function random(min, max) {
            return Math.round((Math.random() * (Math.abs(max - min))) + min);
        }

        function paintCoinAndPlayer() {
            matrix = Array(9).fill().map(() => Array(9).fill("."));
            visitats = Array(9).fill().map(() => Array(9).fill(false));
            matrixpath = Array(9).fill().map(() => Array(9).fill([]));

            playerPos.x = random(0, matrix[0].length - 1);
            playerPos.y = random(0, matrix.length - 1);
            coinPos.x = random(0, matrix[0].length - 1);
            coinPos.y = random(0, matrix.length - 1);

            matrix[playerPos.y][playerPos.x] = "X";
            matrix[coinPos.y][coinPos.x] = "O";

            coinEaten = false;

            drawMatrix();
        }

        let visitats = Array(9).fill().map(() => Array(9).fill(false));
        let matrixpath = Array(9).fill().map(() => Array(9).fill([]));

        const UP = [-1, 0];
        const DOWN = [1, 0];
        const LEFT = [0, -1];
        const RIGHT = [0, 1];

        var monedaI;
        var monedaJ;

        async function bfs() {
            const i_ini = playerPos.y;
            const j_ini = playerPos.x;

            var cola = [];
            var found = false;
            cola.push([i_ini, j_ini]);

            while (found == false && cola.length != 0) {
                var currentposition = cola.shift();
                var currenti = currentposition[0];
                var currentj = currentposition[1];
                if (matrix[currenti][currentj] == 'O') {
                    found = true;
                    monedaI = currenti;
                    monedaJ = currentj;

                    for (let i = 0; i < matrixpath[monedaI][monedaJ].length; i++) {
                        await new Promise(resolve => setTimeout(resolve, 300));

                        if (matrixpath[monedaI][monedaJ][i] == DOWN) {
                            moveDown();
                        }

                        if (matrixpath[monedaI][monedaJ][i] == LEFT) {
                            moveLeft();
                        }

                        if (matrixpath[monedaI][monedaJ][i] == RIGHT) {
                            moveRight();
                        }

                        if (matrixpath[monedaI][monedaJ][i] == UP) {
                            moveUp();
                        }
                    }
                } else {
                    if (currentj >= 0 && currenti + 1 >= 0 && currentj < matrix[0].length && currenti + 1 < matrix.length && visitats[currenti + 1][currentj] == false) {
                        cola.push([currenti + 1, currentj]);
                        visitats[currenti + 1][currentj] = true;

                        matrixpath[currenti + 1][currentj] = [...matrixpath[currenti][currentj], DOWN];
                    }
                    if (currentj >= 0 && currenti - 1 >= 0 && currentj < matrix[0].length && currenti - 1 < matrix.length && visitats[currenti - 1][currentj] == false) {
                        cola.push([currenti - 1, currentj]);
                        visitats[currenti - 1][currentj] = true;

                        matrixpath[currenti - 1][currentj] = [...matrixpath[currenti][currentj], UP];
                    }
                    if (currentj + 1 >= 0 && currenti >= 0 && currentj + 1 < matrix[0].length && currenti < matrix.length && visitats[currenti][currentj + 1] == false) {
                        cola.push([currenti, currentj + 1]);
                        visitats[currenti][currentj + 1] = true;

                        matrixpath[currenti][currentj + 1] = [...matrixpath[currenti][currentj], RIGHT];
                    }
                    if (currentj - 1 >= 0 && currenti >= 0 && currentj - 1 < matrix[0].length && currenti < matrix.length && visitats[currenti][currentj - 1] == false) {
                        cola.push([currenti, currentj - 1]);
                        visitats[currenti][currentj - 1] = true;

                        matrixpath[currenti][currentj - 1] = [...matrixpath[currenti][currentj], LEFT];
                    }
                }
            }
        }

        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

        const cellSize = 30;

        function drawMatrix() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let row = 0; row < matrix.length; row++) {
                for (let col = 0; col < matrix[row].length; col++) {
                    if (matrix[row][col] === "X") {
                        ctx.fillStyle = "blue"; // Jugador en blau
                    } else if (matrix[row][col] === "O") {
                        ctx.fillStyle = "yellow"; // Moneda en groc
                    } else {
                        ctx.fillStyle = "white"; // Cel·la buida
                    }
                    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(col * cellSize, row * cellSize, cellSize, cellSize);
                }
            }
        }

        paintCoinAndPlayer();

        function moveUp() {
            if (playerPos.y > 0) {
                handleMovement(playerPos.x, playerPos.y - 1);
            }
        }

        function moveDown() {
            if (playerPos.y < matrix.length - 1) {
                handleMovement(playerPos.x, playerPos.y + 1);
            }
        }

        function moveLeft() {
            if (playerPos.x > 0) {
                handleMovement(playerPos.x - 1, playerPos.y);
            }
        }

        function moveRight() {
            if (playerPos.x < matrix[0].length - 1) {
                handleMovement(playerPos.x + 1, playerPos.y);
            }
        }

        function handleMovement(newX, newY) {
            if (newX === coinPos.x && newY === coinPos.y) {
                coinEaten = true;
            }

            matrix[playerPos.y][playerPos.x] = coinEaten && playerPos.x === coinPos.x && playerPos.y === coinPos.y ? "." : ".";

            playerPos.x = newX;
            playerPos.y = newY;
            matrix[playerPos.y][playerPos.x] = "X";

            drawMatrix();
        }

        window.addEventListener("keydown", function (e) {
            switch (e.key) {
                case "ArrowUp":
                    moveUp();
                    break;
                case "ArrowDown":
                    moveDown();
                    break;
                case "ArrowLeft":
                    moveLeft();
                    break;
                case "ArrowRight":
                    moveRight();
                    break;
            }
        });

        drawMatrix();
    </script>
</body>
</html>