simondev.FlappyBirdClone-NNEvolve/main.js

import {ffnet} from "./ffnet.js";
import {population} from "./population.js"

const _GRAVITY = 900;
const _TERMINAL_VELOCITY = 400;
const _MAX_UPWARDS_VELOCITY = -300;
const _UPWARDS_ACCELERATION = -450;
const _PIPE_SPACING_Y = 100;
const _PIPE_SPACING_X = 200;
const _TREADMILL_SPEED = -125;

const _CONFIG_WIDTH = 960;
const _CONFIG_HEIGHT = 540;
const _GROUND_Y = _CONFIG_HEIGHT;
const _BIRD_POS_X = 50;


class PipePairObject {
  constructor(scene, x) {
    const height = _CONFIG_HEIGHT * (0.25 + 0.5 * Math.random());
    this._sprite1 = scene.add.sprite(x, height + _PIPE_SPACING_Y * 0.5, 'pipe');
    this._sprite1.displayOriginX = 0;
    this._sprite1.displayOriginY = 0;

    this._sprite2 = scene.add.sprite(x, height - _PIPE_SPACING_Y * 0.5, 'pipe');
    this._sprite2.displayOriginX = 0;
    this._sprite2.displayOriginY = 0;
    this._sprite2.displayHeight = -1 * this._sprite2.height;
  }

  Destroy() {
    this._sprite1.destroy();
    this._sprite2.destroy();
  }

  Update(timeElapsed) {
    this._sprite1.x += timeElapsed * _TREADMILL_SPEED;
    this._sprite2.x += timeElapsed * _TREADMILL_SPEED;
  }

  Intersects(aabb) {
    const b1 = this._sprite1.getBounds();
    const b2 = this._sprite2.getBounds();
    b2.y -= this._sprite2.height;
    return (
        Phaser.Geom.Intersects.RectangleToRectangle(b1, aabb) ||
        Phaser.Geom.Intersects.RectangleToRectangle(b2, aabb));
  }

  Reset(x) {
    const height = _CONFIG_HEIGHT * (0.25 + 0.5 * Math.random());
    this._sprite1.x = x;
    this._sprite1.y = height + _PIPE_SPACING_Y * 0.5;
    this._sprite2.x = x;
    this._sprite2.y = height - _PIPE_SPACING_Y * 0.5;
  }

  get X() {
    return this._sprite1.x;
  }

  get Width() {
    return this._sprite1.width;
  }
}

class FlappyBirdObject {
  constructor(scene) {
    this._scene = scene;
    this._sprite = scene.add.sprite(_BIRD_POS_X, 100, 'bird');
    this._spriteTint = scene.add.sprite(_BIRD_POS_X, 100, 'bird-colour');
    this._velocity = 0;
    this._dead = false;
  }

  Destroy() {
    this._sprite.destroy();
  }

  Update(params) {
    if (this._dead) {
      return;
    }

    this._ApplyGravity(params.timeElapsed)
    this._velocity = Math.min(Math.max(
        this._velocity, _MAX_UPWARDS_VELOCITY), _TERMINAL_VELOCITY);
    this._sprite.y += this._velocity * params.timeElapsed;
    this._spriteTint.y += this._velocity * params.timeElapsed;

    const v = new Phaser.Math.Vector2(
        -1 * _TREADMILL_SPEED * params.timeElapsed, 0);
    v.add(new Phaser.Math.Vector2(0, this._velocity));
    v.normalize();

    const rad = Math.atan2(v.y, v.x);
    const deg = (180.0 / Math.PI) * rad;

    this._sprite.angle = deg * 0.75;
    this._spriteTint.angle = deg * 0.75;
  }

  get Dead() {
    return this._dead;
  }

  set Dead(d) {
    this._dead = d;

    this._scene.tweens.add({
        targets: this._sprite,
        props: {
            alpha: { value: 0.0, duration: 500, ease: 'Sine.easeInOut' },
        },
    });
    this._scene.tweens.add({
        targets: this._spriteTint,
        props: {
            alpha: { value: 0.0, duration: 500, ease: 'Sine.easeInOut' },
        },
    });
  }

  set Alpha(a) {
    this._sprite.alpha = a;
    this._spriteTint.alpha = a;
  }

  get Bounds() {
    return this._sprite.getBounds();
  }

  _ApplyGravity(timeElapsed) {
    this._velocity += _GRAVITY * timeElapsed;
  }
}

class FlappyBird_Manual extends FlappyBirdObject {
  constructor(scene) {
    super(scene);

    this._frameInputs = [];
  }

  Update(params) {
    this._HandleInput(params);

    super.Update(params);
  }

  _HandleInput(params) {
    if (!params.keys.up) {
      return;
    }

    this._velocity += _UPWARDS_ACCELERATION;
  }
}

class FlappyBird_NeuralNet extends FlappyBirdObject {
  constructor(scene, populationEntity, params) {
    super(scene);

    this._model = new ffnet.FFNeuralNetwork(params.shapes);
    this._model.fromArray(populationEntity.genotype);
    this._populationEntity = populationEntity;
    this._spriteTint.setTint(params.tint);
  }

  Update(params) {
    function _PipeParams(bird, pipe) {
      const distToPipe = (
          (pipe.X + pipe.Width) - bird.Bounds.left) / _CONFIG_WIDTH;
      const distToPipeB = (
          (pipe._sprite1.y - bird.Bounds.bottom) / _CONFIG_HEIGHT) * 0.5 + 0.5;
      const distToPipeT = (
          (pipe._sprite2.y - bird.Bounds.top) / _CONFIG_HEIGHT) * 0.5 + 0.5;
      return [distToPipe, distToPipeB, distToPipeT];
    }

    function _Params(bird, pipes) {
      const inputs = pipes.map(p => _PipeParams(bird, p)).flat();

      inputs.push((bird._velocity / _GRAVITY) * 0.5 + 0.5);

      return inputs;
    }

    const inputs = _Params(this, params.nearestPipes);
    const decision = this._model.predict(inputs);

    if (decision > 0.5) {
      this._velocity += _UPWARDS_ACCELERATION;
    }

    super.Update(params);

    if (!this.Dead) {
      this._populationEntity.fitness += params.timeElapsed;
    }
  }
}

class FlappyBirdGame {
  constructor() {
    this._game = this._CreateGame();
    this._previousFrame = null;
    this._gameOver = true;

    this._statsText1 = null;
    this._statsText2 = null;
    this._gameOverText = null;
    this._pipes = [];
    this._birds = [];

    this._InitPopulations();
  }

  _InitPopulations() {
    const NN_DEF1 = [
        {size: 7},
        {size: 5, activation: ffnet.relu},
        {size: 1, activation: ffnet.sigmoid}
    ];

    const NN_DEF2 = [
        {size: 7},
        {size: 12, activation: ffnet.relu},
        {size: 1, activation: ffnet.sigmoid}
    ];

    const NN_DEF3 = [
        {size: 7},
        {size: 8, activation: ffnet.relu},
        {size: 8, activation: ffnet.relu},
        {size: 1, activation: ffnet.sigmoid}
    ];

    this._populations = [
      this._CreatePopulation(64, NN_DEF1, 0xFF0000),
      this._CreatePopulation(64, NN_DEF2, 0x0000FF),
      this._CreatePopulation(64, NN_DEF3, 0x00FF00),
    ];
  }

  _CreatePopulation(sz, shapes, colour) {
    const t = new ffnet.FFNeuralNetwork(shapes);

    const params = {
      population_size: sz,
      genotype: {
        size: t.toArray().length,
      },
      mutation: {
        magnitude: 0.5,
        odds: 0.1,
        decay: 0,
      },
      breed: {
        selectionCutoff: 0.2,
        immortalityCutoff: 0.05,
        childrenPercentage: 0.5,
      },
      shapes: shapes,
      tint: colour,
    };

    return new population.Population(params);
  }

  _Destroy() {
    for (let b of this._birds) {
      b.Destroy();
    }
    for (let p of this._pipes) {
      p.Destroy();
    }
    this._statsText1.destroy();
    this._statsText2.destroy();
    if (this._gameOverText !== null) {
      this._gameOverText.destroy();
    }
    this._birds = [];
    this._pipes = [];
    this._previousFrame = null;
  }

  _Init() {
    for (let i = 0; i < 5; i+=1) {
      this._pipes.push(
          new PipePairObject(this._scene, 500 + i * _PIPE_SPACING_X));
    }

    this._gameOver = false;
    this._stats = {
      alive: 0,
      score: 0,
    };

    const style = {
      font: "40px Roboto",
      fill: "#FFFFFF",
      align: "right",
      fixedWidth: 210,
      shadow: {
        offsetX: 2,
        offsetY: 2,
        color: "#000",
        blur: 2,
        fill: true
      }
    };
    this._statsText1 = this._scene.add.text(0, 0, '', style);

    style.align = 'left';
    this._statsText2 = this._scene.add.text(
        this._statsText1.width + 10, 0, '', style);

    this._birds = [];
    for (let curPop of this._populations) {
      curPop.Step();

      this._birds.push(...curPop._population.map(
          p => new FlappyBird_NeuralNet(
              this._scene, p, curPop._params)));
    }
  }

  _CreateGame() {
    const self = this;
    const config = {
        type: Phaser.AUTO,
        scene: {
            preload: function() { self._OnPreload(this); },
            create: function() { self._OnCreate(this); },
            update: function() { self._OnUpdate(this); },
        },
        scale: {
          mode: Phaser.Scale.FIT,
          autoCenter: Phaser.Scale.CENTER_BOTH,
          width: _CONFIG_WIDTH,
          height: _CONFIG_HEIGHT
        }
    };

    return new Phaser.Game(config);
  }

  _OnPreload(scene) {
    this._scene = scene;
    this._scene.load.image('sky', 'assets/sky.png');
    this._scene.load.image('bird', 'assets/bird.png');
    this._scene.load.image('bird-colour', 'assets/bird-colour.png');
    this._scene.load.image('pipe', 'assets/pipe.png');
  }

  _OnCreate(scene) {
    const s = this._scene.add.image(0, 0, 'sky');
    s.displayOriginX = 0;
    s.displayOriginY = 0;
    s.displayWidth = _CONFIG_WIDTH;
    s.displayHeight = _CONFIG_HEIGHT;

    this._keys = {
      up: this._scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP),
      f: this._scene.input.keyboard.addKey('F'),
      r: this._scene.input.keyboard.addKey('R'),
    }

    this._keys.f.on('down', function () {
      if (this._scene.scale.isFullscreen) {
        this._scene.scale.stopFullscreen();
      } else {
        this._scene.scale.startFullscreen();
      }
    }, this);

    this._keys.r.on('down', function () {
      this._Destroy();
      this._Init();
    }, this);

    this._Init();
  }

  _OnUpdate(scene) {
    if (this._gameOver) {
      this._DrawStats();
      return;
    }

    const currentFrame = scene.time.now;
    if (this._previousFrame == null) {
      this._previousFrame = currentFrame;
    }

    const timeElapsedInS = Math.min(
        (currentFrame - this._previousFrame) / 1000.0, 1.0 / 30.0);

    this._UpdateBirds(timeElapsedInS);
    this._UpdatePipes(timeElapsedInS);
    this._CheckGameOver();
    this._DrawStats();

    this._previousFrame = currentFrame;
  }

  _CheckGameOver() {
    const results = this._birds.map(b => this._IsBirdOutOfBounds(b));

    this._stats.alive = results.reduce((t, r) => (r ? t: t + 1), 0);

    if (results.every(b => b)) {
      this._GameOver();
    }
  }

  _IsBirdOutOfBounds(bird) {
    const birdAABB = bird.Bounds;
    birdAABB.top += 10;
    birdAABB.bottom -= 10;
    birdAABB.left += 10;
    birdAABB.right -= 10;

    if (bird.Dead) {
      return true;
    }

    if (birdAABB.bottom >= _GROUND_Y || birdAABB.top <= 0) {
      bird.Dead = true;
      return true;
    }

    for (const p of this._pipes) {
      if (p.Intersects(birdAABB)) {
        bird.Dead = true;
        return true;
      }
    }
    return false;
  }

  _GetNearestPipes() {
    let index = 0;
    if (this._pipes[0].X + this._pipes[0].Width <= _BIRD_POS_X) {
      index = 1;
    }
    return this._pipes.slice(index, 2);
  }

  _UpdateBirds(timeElapsed) {
    const params = {
        timeElapsed: timeElapsed,
        keys: {up: Phaser.Input.Keyboard.JustDown(this._keys.up)},
        nearestPipes: this._GetNearestPipes(),
    };

    for (let b of this._birds) {
      b.Update(params);
    }
  }

  _UpdatePipes(timeElapsed) {
    const oldPipeX = this._pipes[0].X + this._pipes[0].Width;

    for (const p of this._pipes) {
      p.Update(timeElapsed);
    }

    const newPipeX = this._pipes[0].X + this._pipes[0].Width;

    if (oldPipeX > _BIRD_POS_X && newPipeX <= _BIRD_POS_X) {
      this._stats.score += 1;
    }

    if ((this._pipes[0].X + this._pipes[0].Width) <= 0) {
      const p = this._pipes.shift();
      p.Reset(this._pipes[this._pipes.length - 1].X + _PIPE_SPACING_X);
      this._pipes.push(p);
    }
  }

  _GameOver() {
    const text = "GAME OVER";
    const style = {
      font: "100px Roboto",
      fill: "#FFFFFF",
      align: "center",
      fixedWidth: _CONFIG_WIDTH,
      shadow: {
        offsetX: 2,
        offsetY: 2,
        color: "#000",
        blur: 2,
        fill: true
      }
    };

    this._gameOverText = this._scene.add.text(
        0, _CONFIG_HEIGHT * 0.25, text, style);
    this._gameOver = true;

    setTimeout(() => {
      this._Destroy();
      this._Init();
    }, 2000);
  }

  _DrawStats() {
    function _Line(t, s) {
      return t + ': ' + s + '\n';
    }

    const text1 = 'Generation:\n' + 'Score:\n' + 'Alive:\n';
    this._statsText1.text = text1;

    const text2 = (
        this._populations[0]._generations + '\n' +
        this._stats.score + '\n' +
        this._stats.alive + '\n');
    this._statsText2.text = text2;
  }
}

const _GAME = new FlappyBirdGame();