├── .gitignore
├── LICENSE
├── README.md
├── assets
├── sand.jpg
└── star.png
├── index.html
├── package.json
├── src
├── app.ts
├── gameScene.ts
├── phaser.d.ts
├── scoreScene.ts
└── welcomeScene.ts
├── tsconfig.json
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | dist
3 | node_modules
4 | package-lock.json
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Mariya Davydova
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # starfall-phaser3-typescript
2 | A tiny game written on Phaser 3 on Typescript
3 |
--------------------------------------------------------------------------------
/assets/sand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariyadavydova/starfall-phaser3-typescript/f1da33cd19bfe552e5df6f3c1fc498a213a957fc/assets/sand.jpg
--------------------------------------------------------------------------------
/assets/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mariyadavydova/starfall-phaser3-typescript/f1da33cd19bfe552e5df6f3c1fc498a213a957fc/assets/star.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Starfall
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Starfall",
3 | "version": "0.1.0",
4 | "description": "Starfall game (Phaser 3 + TypeScript)",
5 | "main": "webpack.config.js",
6 | "scripts": {
7 | "build": "webpack",
8 | "start": "webpack --watch & live-server --port=8085"
9 | },
10 | "author": "Mariya Davydova",
11 | "license": "MIT",
12 | "devDependencies": {
13 | "live-server": "^1.2.1",
14 | "phaser": "^3.15.1",
15 | "ts-loader": "^5.3.0",
16 | "typescript": "^3.1.6",
17 | "webpack": "^4.26.0",
18 | "webpack-cli": "^3.1.2"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
1 | import "phaser";
2 | import { WelcomeScene } from "./welcomeScene";
3 | import { GameScene } from "./gameScene";
4 | import { ScoreScene } from "./scoreScene";
5 |
6 | const config: GameConfig = {
7 | title: "Starfall",
8 | width: 800,
9 | height: 600,
10 | parent: "game",
11 | scene: [WelcomeScene, GameScene, ScoreScene],
12 | physics: {
13 | default: "arcade",
14 | arcade: {
15 | debug: false
16 | }
17 | },
18 | backgroundColor: "#18216D"
19 | };
20 |
21 | export class StarfallGame extends Phaser.Game {
22 | constructor(config: GameConfig) {
23 | super(config);
24 | }
25 | };
26 |
27 | window.onload = () => {
28 | var game = new StarfallGame(config);
29 | };
30 |
--------------------------------------------------------------------------------
/src/gameScene.ts:
--------------------------------------------------------------------------------
1 | import "phaser";
2 |
3 | export class GameScene extends Phaser.Scene {
4 | delta: number;
5 | lastStarTime: number;
6 | starsCaught: number;
7 | starsFallen: number;
8 | sand: Phaser.Physics.Arcade.StaticGroup;
9 | info: Phaser.GameObjects.Text;
10 |
11 | constructor() {
12 | super({
13 | key: "GameScene"
14 | });
15 | }
16 |
17 | init(/*params: any*/): void {
18 | this.delta = 1000;
19 | this.lastStarTime = 0;
20 | this.starsCaught = 0;
21 | this.starsFallen = 0;
22 | }
23 |
24 | preload(): void {
25 | this.load.setBaseURL("https://raw.githubusercontent.com/mariyadavydova/" +
26 | "starfall-phaser3-typescript/master/");
27 | this.load.image("star", "assets/star.png");
28 | this.load.image("sand", "assets/sand.jpg");
29 | }
30 |
31 | create(): void {
32 | this.sand = this.physics.add.staticGroup({
33 | key: 'sand',
34 | frameQuantity: 20
35 | });
36 | Phaser.Actions.PlaceOnLine(this.sand.getChildren(),
37 | new Phaser.Geom.Line(20, 580, 820, 580));
38 | this.sand.refresh();
39 |
40 | this.info = this.add.text(10, 10, '',
41 | { font: '24px Arial Bold', fill: '#FBFBAC' });
42 | }
43 |
44 | update(time: number): void {
45 | var diff: number = time - this.lastStarTime;
46 | if (diff > this.delta) {
47 | this.lastStarTime = time;
48 | if (this.delta > 500) {
49 | this.delta -= 20;
50 | }
51 | this.emitStar();
52 | }
53 | this.info.text =
54 | this.starsCaught + " caught - " +
55 | this.starsFallen + " fallen (max 3)";
56 | }
57 |
58 | private onClick(star: Phaser.Physics.Arcade.Image): () => void {
59 | return function () {
60 | star.setTint(0x00ff00);
61 | star.setVelocity(0, 0);
62 | this.starsCaught += 1;
63 | this.time.delayedCall(100, function (star) {
64 | star.destroy();
65 | }, [star], this);
66 | }
67 | }
68 |
69 | private onFall(star: Phaser.Physics.Arcade.Image): () => void {
70 | return function () {
71 | star.setTint(0xff0000);
72 | this.starsFallen += 1;
73 | this.time.delayedCall(100, function (star) {
74 | star.destroy();
75 | if (this.starsFallen > 2) {
76 | this.scene.start("ScoreScene", { starsCaught: this.starsCaught });
77 | }
78 | }, [star], this);
79 | }
80 | }
81 |
82 | private emitStar(): void {
83 | var star: Phaser.Physics.Arcade.Image;
84 | var x = Phaser.Math.Between(25, 775);
85 | var y = 26;
86 | star = this.physics.add.image(x, y, "star");
87 |
88 | star.setDisplaySize(50, 50);
89 | star.setVelocity(0, 200);
90 | star.setInteractive();
91 |
92 | star.on('pointerdown', this.onClick(star), this);
93 | this.physics.add.collider(star, this.sand, this.onFall(star), null, this);
94 | }
95 | };
96 |
--------------------------------------------------------------------------------
/src/scoreScene.ts:
--------------------------------------------------------------------------------
1 | import "phaser";
2 |
3 | export class ScoreScene extends Phaser.Scene {
4 | score: number;
5 | result: Phaser.GameObjects.Text;
6 | hint: Phaser.GameObjects.Text;
7 |
8 | constructor() {
9 | super({
10 | key: "ScoreScene"
11 | });
12 | }
13 |
14 | init(params: any): void {
15 | this.score = params.starsCaught;
16 | }
17 |
18 | create(): void {
19 | var resultText: string = 'Your score is ' + this.score + '!';
20 | this.result = this.add.text(200, 250, resultText,
21 | { font: '48px Arial Bold', fill: '#FBFBAC' });
22 |
23 | var hintText: string = "Click to restart";
24 | this.hint = this.add.text(300, 350, hintText,
25 | { font: '24px Arial Bold', fill: '#FBFBAC' });
26 |
27 | this.input.on('pointerdown', function (/*pointer*/) {
28 | this.scene.start("WelcomeScene");
29 | }, this);
30 | }
31 | };
32 |
--------------------------------------------------------------------------------
/src/welcomeScene.ts:
--------------------------------------------------------------------------------
1 | import "phaser";
2 |
3 | export class WelcomeScene extends Phaser.Scene {
4 | title: Phaser.GameObjects.Text;
5 | hint: Phaser.GameObjects.Text;
6 |
7 | constructor() {
8 | super({
9 | key: "WelcomeScene"
10 | });
11 | }
12 |
13 | create(): void {
14 | var titleText: string = "Starfall";
15 | this.title = this.add.text(150, 200, titleText,
16 | { font: '128px Arial Bold', fill: '#FBFBAC' });
17 |
18 | var hintText: string = "Click to start";
19 | this.hint = this.add.text(300, 350, hintText,
20 | { font: '24px Arial Bold', fill: '#FBFBAC' });
21 |
22 | this.input.on('pointerdown', function (/*pointer*/) {
23 | this.scene.start("GameScene");
24 | }, this);
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5"
4 | },
5 | "include": [
6 | "src/*"
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | entry: './src/app.ts',
5 | module: {
6 | rules: [
7 | {
8 | test: /\.tsx?$/,
9 | use: 'ts-loader',
10 | exclude: /node_modules/
11 | }
12 | ]
13 | },
14 | resolve: {
15 | extensions: [ '.ts', '.tsx', '.js' ]
16 | },
17 | output: {
18 | filename: 'app.js',
19 | path: path.resolve(__dirname, 'dist')
20 | },
21 | mode: 'development'
22 | };
23 |
--------------------------------------------------------------------------------