Initial commit

.eslintignore

@@ -0,0 +1,6 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint nyc coverage output
+coverage

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.cache/

.sassrc

@@ -0,0 +1,3 @@
+{
+  "includePaths": ["node_modules"],
+}

BirdGameObject.ts

@@ -0,0 +1,36 @@
+import GameObject from "./GameObject"
+import GameScene from "./GameScene"
+
+export default class BirdGameObject extends GameObject {
+  private sprite: Phaser.Physics.Arcade.Sprite
+
+  constructor(readonly scene: GameScene) {
+    super(scene)
+  }
+
+  preload(): void {
+    this.scene.load.spritesheet("bird", "/images/bird.png", { frameWidth: 16, frameHeight: 16 })
+  }
+
+  create(): void {
+    this.scene.anims.create({
+      key: "flap",
+      frames: this.scene.anims.generateFrameNumbers("bird", { frames: [1, 0, 1, 2, 3, 4, 5, 4, 3, 2] })
+    })
+    this.sprite = this.scene.physics.add.sprite(100, 100, "bird", 2)
+    this.sprite.setScale(2, 2)
+    // const spriteBody = this.sprite.body as Phaser.Physics.Arcade.Body
+    // spriteBody.allowGravity = false
+    this.scene.physics.add.collider(this.sprite, this.scene.platforms)
+    this.scene.physics.add.collider(this.sprite, this.scene.trees)
+  }
+
+  update(cursors: Phaser.Types.Input.Keyboard.CursorKeys): void {
+    if (cursors.space.isDown) {
+      if (!this.sprite.anims.isPlaying) {
+        this.sprite.anims.play("flap")
+      }
+      this.sprite.setVelocityY(-150)
+    }
+  }
+}

GameObject.ts

@@ -0,0 +1,5 @@
+import GameScene from "./GameScene"
+
+export default class GameObject {
+  constructor(readonly scene: GameScene) {}
+}

GameScene.ts

@@ -0,0 +1,71 @@
+import * as Phaser from 'phaser'
+import BirdGameObject from './BirdGameObject'
+import GroundGameObject from './GroundGameObject'
+import TreeGameObject from './TreeGameObject'
+
+export default class GameScene extends Phaser.Scene {
+  private score = 0
+  private _platformBodies: Phaser.Physics.Arcade.StaticGroup
+  private _treeBodies: Phaser.Physics.Arcade.Group
+  private bird: BirdGameObject
+  private ground: GroundGameObject
+  private treeObjects: TreeGameObject[] = []
+  private cursors: Phaser.Types.Input.Keyboard.CursorKeys
+  scoreText: Phaser.GameObjects.Text
+
+  get platforms(): Phaser.Physics.Arcade.StaticGroup {
+    return this._platformBodies
+  }
+
+  get trees(): Phaser.Physics.Arcade.Group {
+    return this._treeBodies
+  }
+
+  constructor() {
+    super({
+      active: false,
+      visible: false,
+      key: 'Game',
+    })
+    this.bird = new BirdGameObject(this)
+    this.ground = new GroundGameObject(this)
+  }
+
+  init(): void {
+    this.score = 0
+  }
+
+  preload(): void {
+    this.load.image('sky', '/images/sky.png')
+    this.load.spritesheet('nature', '/images/nature.png', { frameWidth: 16, frameHeight: 16 })
+    this.bird.preload()
+  }
+
+  create(): void {
+    this.add.image(400, 300, 'sky')
+
+    this._platformBodies = this.physics.add.staticGroup()
+    this.ground.create()
+
+    const groundPos = this.sys.game.scale.gameSize.height - 32
+    this._treeBodies = this.physics.add.group()
+    const tree = new TreeGameObject(this)
+    tree.create(this._treeBodies, 100, groundPos, 3)
+    this.treeObjects.push(tree)
+
+    this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' })
+
+    this.cursors = this.input.keyboard.createCursorKeys()
+
+    this.bird.create()
+  }
+
+  update(): void {
+    this.bird.update(this.cursors)
+    this.treeObjects.forEach(tree => tree.update())
+  }
+
+  end(): void {
+    // Nothing to do yet
+  }
+}

GroundGameObject.ts

@@ -0,0 +1,18 @@
+import GameObject from "./GameObject"
+import GameScene from "./GameScene"
+
+export default class GroundGameObject extends GameObject {
+  constructor(readonly scene: GameScene) {
+    super(scene)
+  }
+
+  create() {
+    const gameWidth = this.scene.sys.game.scale.gameSize.width
+    const gameHeight = this.scene.sys.game.scale.gameSize.height
+
+    console.log(`WxH = ${gameWidth}x${gameHeight}`)
+
+    const sprite = this.scene.add.tileSprite(0, gameHeight - 16, gameWidth, 16, "nature", 1).setScale(2)
+    this.scene.platforms.add(sprite)
+  }
+}

ReactGame.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import * as Phaser from 'phaser'
+import GameScene from './GameScene'
+
+export class ReactGame extends React.Component {
+  private gameDivRef = React.createRef<HTMLDivElement>()
+
+  render(): JSX.Element {
+    return <div id="game" ref={this.gameDivRef}></div>
+  }
+
+  componentDidMount(): void {
+    const game = new Phaser.Game({
+      title: 'Sample',
+      type: Phaser.AUTO,
+
+      scale: {
+        mode: Phaser.Scale.FIT,
+        width: 800,
+        height: 600,
+      },
+
+      physics: {
+        default: 'arcade',
+        arcade: {
+          gravity: { y: 300 },
+          debug: true,
+        },
+      },
+
+      parent: 'game',
+      backgroundColor: '#000000',
+      scene: GameScene,
+    })
+  }
+}

TreeGameObject.ts

@@ -0,0 +1,48 @@
+import GameObject from "./GameObject"
+import GameScene from "./GameScene"
+
+export default class TreeGameObject extends GameObject {
+  private sprites: Phaser.GameObjects.Sprite[] = []
+  private body: Phaser.Physics.Arcade.Body
+
+  constructor(readonly scene: GameScene) {
+    super(scene)
+  }
+
+  create(physicsGroup: Phaser.Physics.Arcade.Group, x: number, y: number, ht: number): void {
+    let vPos = y - 16
+
+    const htPixels = ht * 32
+    const bodyRect = this.scene.add.rectangle(x, y - htPixels / 2, 32, htPixels, 0)
+    bodyRect.setVisible(false)
+    physicsGroup.add(bodyRect)
+    this.body = bodyRect.body as Phaser.Physics.Arcade.Body
+    this.body.allowGravity = false
+    this.body.immovable = true
+    this.body.setVelocityX(5)
+
+    const bottom = this.scene.add.sprite(x, vPos, "nature", 37)
+    bottom.setScale(2)
+    this.sprites.push(bottom)
+    for (let h = 0; h < (ht - 2); h++) {
+      vPos -= 32
+      const sprite = this.scene.add.sprite(x, vPos, "nature", 30)
+      sprite.setScale(2)
+      this.sprites.push(sprite)
+    }
+    vPos -= 32
+    const top = this.scene.add.sprite(x, vPos, "nature", 23)
+    top.setScale(2)
+    this.sprites.push(top)
+  }
+
+  update(): void {
+    const x = this.body.position.x + 16
+    let y = this.body.position.y + this.body.height - 16
+    this.sprites.forEach(sprite => {
+      sprite.setX(x)
+      sprite.setY(y)
+      y -= 32
+    })
+  }
+}

app.scss

@@ -0,0 +1,5 @@
+@import "~bootstrap/scss/bootstrap";
+
+#game {
+  max-height: 720;
+}

index.html

@@ -0,0 +1,6 @@
+<html>
+<body>
+  <div id="root"></div>
+  <script src="./index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import './app.scss'
+import Button from 'react-bootstrap/Button'
+import { ReactGame } from './ReactGame'
+
+function Example() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = React.useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <Button onClick={() => setCount(count + 1)}>
+        Click me
+      </Button>
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <div>
+    <Example />
+    <ReactGame />
+    <Example />
+  </div>,
+  document.getElementById('root'),
+)