Hello, I am new to phaser and have been working to add some small phaser games to an angular portfolio website I have built. I am by no measure an expert in Typescript or Javascript but have successfully implemented the tutorial game in my website already. I am now creating a second similarly simple game but think I am running into some scope issues. The idea of the game is you control a sprite dodging objects that spawn every five second with a random velocity. I have already created a timed event that triggers every 5 seconds and calls a function “bombsAway” which is supposed to implement adding a bomb to the dynamic group “bombs”.
Whenever the “bombsAway” method is called the program encounters an error: “ERROR TypeError: Cannot read properties of undefined (reading ‘create’)”. Regardless of if I pass the bombs group to the function from the timed event or not I get this same error. I’m sure someone with a better grasp on typescript/Phaser can point out my error easily, thank you in advance.
This is the link to the medium article I followed to embed Phaser in angular projects for ease of reproducing the bug.
P.S. I apologize for not attaching the file, new users are not allowed to upload files 
import { Component, OnInit, OnDestroy } from '@angular/core';
import Phaser, { Physics } from 'phaser';
@Component({
selector: 'app-circle-game',
templateUrl: './circle-game.component.html',
styleUrls: ['./circle-game.component.css']
})
export class CircleGameComponent implements OnDestroy, OnInit{
phaserGame: Phaser.Game;
config: Phaser.Types.Core.GameConfig;
constructor() {
this.config = {
type: Phaser.AUTO,
height: 600,
width: 800,
scene: [ MainScene ],
parent: 'gameContainer',
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0 },
debug: false
}
},
scale: {
autoCenter: Phaser.Scale.CENTER_BOTH,
},
}
}
ngOnInit() {
this.phaserGame = new Phaser.Game(this.config);
}
ngOnDestroy() {
this.phaserGame.destroy(true, false);
}
}
class MainScene extends Phaser.Scene {
constructor() {
super({ key: 'main' });
}
player : Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
bombs: Phaser.Physics.Arcade.Group;
timer: Phaser.Types.Time.TimerEventConfig;
text: any;
emmitter: Phaser.Time.TimerEvent;
preload() {
this.load.image('bckgrnd', 'assets/background-neon.png');
this.load.spritesheet('spaceman', 'assets/spaceman.png', {frameWidth: 16, frameHeight: 16})
this.load.image('bombs', 'assets/bomb.png');
}
create() {
this.add.image(400, 300, 'bckgrnd');
this.player = this.physics.add.sprite(400,300, 'spaceman').setScale(2).refreshBody();
this.player.setBounce(0.0);
this.player.setCollideWorldBounds(true);
this.bombs = this.physics.add.group();
this.text = this.add.text(16, 16, 'Time: 0', { fontSize: '32px' });
this.emmitter = this.time.addEvent({args: [this.player, this.bombs], delay: 5000, callback: this.bombsAway, loop:true,})
this.physics.add.collider(this.player, this.bombs, this.gameOver, undefined, this);
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('spaceman', {start:1, end:2}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('spaceman', {start:8, end:9}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'up',
frames: this.anims.generateFrameNumbers('spaceman', {start:11, end:12}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'down',
frames: this.anims.generateFrameNumbers('spaceman', {start:4, end:6}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'dead',
frames: [{ key:'spaceman', frame: 15}],
frameRate: 10,
});
this.anims.create({
key: 'turn',
frames: [{ key: 'spaceman', frame: 4}],
frameRate: 20,
});
}
override update() {
var cursor = this.input.keyboard.createCursorKeys();
if (cursor.left.isDown) {
this.player.setVelocityX(-150);
// this.player.anims.play('left', true);
} else if (cursor.right.isDown)
{
this.player.setVelocityX(150);
// this.player.anims.play('right', true);
} else
{
this.player.setVelocityX(0);
}
if (cursor.down.isDown)
{
this.player.setVelocityY(150);
// this.player.anims.play('down', true);
} else if (cursor.up.isDown)
{
this.player.setVelocityY(-150);
// this.player.anims.play('up', true);
} else
{
this.player.setVelocityY(0);
}
if(cursor.left.isDown)
{
this.player.anims.play('left', true);
} else if(cursor.right.isDown)
{
this.player.anims.play('right', true);
} else if(cursor.up.isDown)
{
this.player.anims.play('up', true);
} else if(cursor.down.isDown)
{
this.player.anims.play('down', true);
} else if (!cursor.up.isDown &&
!cursor.down.isDown &&
!cursor.left.isDown &&
!cursor.right.isDown)
{
this.player.anims.play('turn', true);
}
}
bombsAway(player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody){
var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
var y = (player.y < 300) ? Phaser.Math.Between(300, 600) : Phaser.Math.Between(0, 300);
var bomb = this.bombs.create(x, y, 'bomb');
bomb.setBounce(1);
bomb.setCollideWorldBounds(true);
bomb.setVelocity(Phaser.Math.Between(-200, 200), Phaser.Math.Between(-200, 200));
bomb.allowGravity = false;
}
gameOver() {
}
}