You mentioned you were able to get it working, but here's more context.
this contains all the properties of the class that you're accessing this from. As you can see, all your code is within the definition of the PlayScene class that extends Phaser.Scene. Class properties are declared in the class, outside of any function, e.g.:
class PlayScene extends Phaser.Scene {
classProp = 5;
constructor() {
super('PlayScene');
}
//... more code
}
In the above case, classProp is accessed via this: this.classProp.
In your code, you attempt to access some variables such as stars using this, when you decarded them as local variables to the create function. That means stars is only available to create() and is accessed directly, without using this.
Now here's the tricky part. You can still set this.stars even if you never declared it. this.stars = 5; is valid, and the next time you access this.stars, you will get 5 instead of undefined. But, if you declare var stars; and then set this.stars = 5, these are two different variables! So when you access stars without this, you will get undefined. An example:
class Scene {
constructor() {}
create() {
let stars;
this.stars = 5;
console.log(`stars: ${stars}`);
console.log(`this.stars: ${this.stars}`);
}
}
const scene = new Scene()
scene.create();
So, on these lines:
//Error on "is parent undefined"
this.physics.add.overlap(player, stars, () => {
You accessed stars, the local variable you declared. But when you actually created stars, you did so like this:
this.stars = this.physics.add.group({
// ...
stars is undefined, while this.stars points to the object you created.
I hope all of that helps!
For further information, I use TypeScript instead of JavaScript to avoid making mistakes like this, as TypeScript uses a typing system that wouldn't allow me to assign to a variable I haven't explicitly declared yet.