Tetris: Uncaught type errors

[Wraithiia]

So I'm following your JS tetris tutorial, and I'm trying to test collision and update but they don't seem to be working... here are what the errors are and my current code.

I've spent some time looking at the code written in github and comparing the two and I'm just not seeing where I could be going wrong...

But I also copied and ran the script in my own set up to test and it doesn't seem to be working either....

script.js:65 Uncaught TypeError: Cannot set property '6' of undefined
at script.js:65
at Array.forEach ()
at script.js:63
at Array.forEach ()
at merge (script.js:62)
at playerDrop (script.js:75)
at update (script.js:91)

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

context.scale(20, 20);

context.fillStyle = '#000';
context.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);

const matrix = [
    [0, 0, 0],
    [1, 1, 1],
    [0, 1, 0],
];

function collide(arena, player) {
    const m = player.matrix;
    const o = player.pos;
    for (let y = 0; y < m.length; ++y){
        for (let x = 0; x <m[y].length; ++x) {
            if (m[y][x] !== 0 &&
                (arena[y + o.y] &&
                 arena[y + o.y][x + o.x]) !== 0){
                 return true;
                }
        }
    }
    return false;
}

function createMatrix(w, h) {
    const matrix = [];
    while (h--) {
        matrix.push(new Array(w).fill(0));
    }
    return matrix; 
}

function drawMatrix(matrix, offset) {
    matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
            context.fillStyle = 'red';
            context.fillRect(x + offset.x, 
                             y + offset.y, 
                             1, 1);
            }
        });
    });
}

function draw(){
    context.fillStyle = '#000';
    context.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);
    
    drawMatrix(arena, {x: 0, y: 0, });
    drawMatrix(player.matrix, player.pos);
}



function merge(arena, player){
    player.matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                arena[y + player.pos.y][x + player.pos.x] = value;
            }
        });
    });
}

function playerDrop(){
    player.pos.y++;
    if(collide(arena, player)) {
        player.pos.y--;
        merge(arena, player);
        player.pos.y = 0;
    }
    dropCounter = 0;
}

let dropCounter = 0;
let dropInterval = 1000;

let lastTime = 0;
function update(time = 0){
    const deltaTime = time - lastTime;
    
    dropCounter += deltaTime;
    if (dropCounter > dropInterval) {
        player.pos.y++;
        playerDrop();
    }

    lastTime = time;

    draw();
    requestAnimationFrame(update);
}

const arena = createMatrix(12, 20);

const player = {
    pos: {x: 5, y: 5},
    matrix: matrix,
}

document.addEventListener('keydown', event => {
    if (event.keyCode === 37){
        player.pos.x--;
    } else if(event.keyCode === 39) {
        player.pos.x++;
    } else if(event.keyCode === 40) {
        player.pos.y++;
        playerDrop();
    } 
});

update();