mariyadavydova / starfall-phaser3-typescript Goto Github PK

npm live-server works and reports as running but in the browser either page not found or response error. I spent a bit of time trying to resolve but it was obviously something related to the location of the index.html etc. I tried all of the command line options but still no luck.

git clone
npm install
npm run build
npm start

So I swapped out live-server for webpack-dev-server (watch mode is by default) with following package.json config changes. New dependancy and new npm start command. This worked first time. Not sure if you have a local setup that is setup to run the way it is in the repo or you have something installed globally etc.
I just wanted to get it to run straight off a git clone without any local setup.

--package.json
{
"name": "Starfall",
"version": "0.1.0",
"description": "Starfall game (Phaser 3 + TypeScript)",
"main": "webpack.config.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --port 8085"
},
"author": "Mariya Davydova",
"license": "MIT",
"devDependencies": {
"webpack-dev-server": "^3.2.1",
"phaser": "^3.15.1",
"ts-loader": "^5.3.0",
"typescript": "^3.1.6",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2"
}
}

Hi Mariya, thank you for writing the article at freecodecamp. I found it from the Latest Tutorials list on phaser.io. At the end of the article you mention any feedback is highly appreciated and this is the only place I could find to give feedback so here's mine.

The code formatting in the article text itself needs some fixing. I type everything in by hand when learning/practicing to better retain what I'm doing and it's quite difficult to do that with the way the code is formatted in the article now.

In GameScene's onClick and onFall functions a function is returned that's then registered as an event handler. I'd wrap the onClick and onFall calls in functions when registering the event handler rather than in the onClick or onFall calls themselves in case there are other times you need to invoke them in the future that you don't want wrapped.
Ex:

private onClick(star: Phaser.Physics.Arcade.Image):  void { /* etc... */ }
private onFall(star: Phaser.Physics.Arcade.Image):  void { /* etc... */ }

star.on('pointerdown', () => this.onClick(star), this);
this.physics.add.collider(star, this.sand, () => this.onFall(star), null, this);

In GameScene's onFall when the star is destroyed, after 100 ms it checks if more than two stars have been destroyed and ends the game. I converted that to a lambda function and it wasn't ending the game so there might be some this problems there (I haven't looked into it, probably shouldn't have made it a lambda function though). I moved the game ending check to the update() function to be closer to the rest of the game update operations, it's easier for me to reason about the class if the game ending check isn't stuck away in some event handler somewhere.

Again, thanks for the time you took to write the article. It's a good introduction to setting up a Phaser project with Typescript.