Phaser 3 Tetris clone, Game freezes when trying to stack blocks

Question

In the Tetris clone I'm making, I'm only working with single blocks right now and I have been trying to stack blocks in a few rows. Here is the code for the blocks

if (this.active == false){
    this.cube = Math.floor((Math.random()* 7));
    this.testblock = this.physics.add.sprite(608, 32, this.blocks[this.cube]);
    this.testblock.body.immovable = true;
    this.testblock.body.allowGravity = false;
    //this.testblock.body.setGravityY(-100);
    this.physics.add.collider(this.walls, this.testblock);
    this.physics.add.collider(this.p1, this.testblock);
    this.activeBlock = this.testblock;
    this.active = true;
}

this.activeBlock.y = this.activeBlock.y + 0.5;

if(Phaser.Input.Keyboard.JustDown(this.keyE)){
    console.log(this.activeBlock.y);
}

if(Phaser.Input.Keyboard.JustDown(this.keyA) && this.activeBlock.x != 352) {
    this.activeBlock.x = this.activeBlock.x - 64;
}

if(Phaser.Input.Keyboard.JustDown(this.keyD) && this.activeBlock.x != 928) {
    this.activeBlock.x = this.activeBlock.x + 64;
}

if (this.activeBlock.y == 416){
    if(this.activeBlock.x == 352 && this.row4[0] != null){
        this.row5[0] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 416 && this.row4[1] != null){
        this.row5[1] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 480 && this.row4[2] != null){
        this.row5[2] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 544 && this.row4[3] != null){
        this.row5[3] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 608 && this.row4[4] != null){
        this.row5[4] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 672 && this.row4[5] != null){
        this.row5[5] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 736 && this.row4[6] != null){
        this.row5[6] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 800 && this.row4[7] != null){
        this.row5[7] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 864 && this.row4[8] != null){
        this.row5[8] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 928 && this.row4[9] != null){
        this.row5[9] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
}


if (this.activeBlock.y == 480){
    if(this.activeBlock.x == 352 && this.row3[0] != null){
        this.row4[0] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 416 && this.row3[1] != null){
        this.row4[1] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 480 && this.row3[2] != null){
        this.row4[2] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 544 && this.row3[3] != null){
        this.row4[3] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 608 && this.row3[4] != null){
        this.row4[4] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 672 && this.row3[5] != null){
        this.row4[5] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 736 && this.row3[6] != null){
        this.row4[6] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 800 && this.row3[7] != null){
        this.row4[7] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 864 && this.row3[8] != null){
        this.row4[8] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 928 && this.row3[9] != null){
        this.row4[9] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
}

if (this.activeBlock.y == 544){
    if(this.activeBlock.x == 352 && this.row2[0] != null){
        this.row3[0] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 416 && this.row2[1] != null){
        this.row3[1] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 480 && this.row2[2] != null){
        this.row3[2] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 544 && this.row2[3] != null){
        this.row3[3] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 608 && this.row2[4] != null){
        this.row3[4] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 672 && this.row2[5] != null){
        this.row3[5] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 736 && this.row2[6] != null){
        this.row3[6] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 800 && this.row2[7] != null){
        this.row3[7] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 864 && this.row2[8] != null){
        this.row3[8] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 928 && this.row2[9] != null){
        this.row3[9] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
}

if (this.activeBlock.y == 608){
    if(this.activeBlock.x == 352 && this.row1[0] != null){
        this.row2[0] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 416 && this.row1[1] != null){
        this.row2[1] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 480 && this.row1[2] != null){
        this.row2[2] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 544 && this.row1[3] != null){
        this.row2[3] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 608 && this.row1[4] != null){
        this.row2[4] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 672 && this.row1[5] != null){
        this.row2[5] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 736 && this.row1[6] != null){
        this.row2[6] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 800 && this.row1[7] != null){
        this.row2[7] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 864 && this.row1[8] != null){
        this.row2[8] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 928 && this.row1[9] != null){
        this.row2[9] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
}

if (this.activeBlock.y == 672){
    if(this.activeBlock.x == 352){
        this.row1[0] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 416){
        this.row1[1] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 480){
        this.row1[2] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 544){
        this.row1[3] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 608){
        this.row1[4] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 672){
        this.row1[5] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 736){
        this.row1[6] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 800){
        this.row1[7] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 864){
        this.row1[8] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
    else if(this.activeBlock.x == 928){
        this.row1[9] = this.activeBlock;
        this.activeBlock = null;
        this.active = false;
    }
}

I've only programmed these first five rows for testing. The first block is landing just fine, but the game freezes when the second block lands. When checking inspection mode, the error message reads Cannot read properties of null (reading 'y') and for some reason the line that triggers it is

if (this.activeBlock.y == 672)

This is supposed to trigger the landing process of the first row, which already has a block in its space at that point. It's as if the line that triggers the landing process of the second row is never triggered.

I'm certain the block passes over the y coordinate, 608, that triggers landing in the second row. And I'm pretty sure nothing is setting the active block to null again along the way. Can someone tell where things went wrong?

Answer 1

The main issue is easy to solve/fix (but it is hard to say, if this fixes all possible bugs, due to the specific coding style used), seeing your code and reading your explanations, leads me to I believe, that the first falling Cube is being placed in this if-Block:

if (this.activeBlock.y == 608){
   ...
   this.activeBlock = null; // "this" is the cause
   ...
}

in here the this.activeBlock is set to null. So after the this.activeBlock is reset, the next test of if (this.activeBlock.y == 672) throws the mentioned error, not after creation of the second block.

Solution use else if or/and adding an extra check before accessing the property of this.activeBlock, like this if (this.activeBlock && this.activeBlock.y == 672). (ofcourse for ALL if(this.activeBlock.y ...) statements)

Tipp: Checking / validating is better, than knowing/assuming the current values (humans are flawed).

btw.: It is good/best practice to check, if an object exists (is not null), before accessing its properties.