Phaser 3 Textadventure Example

Simple demo for phaser forum request

by ragesoft

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<div id="main">

</div>

JavaScript

class Demo extends Phaser.Scene {
  constructor() {
    super({
      key: 'examples'
    })
  }

  preload() {

  }
  create() {

    /// Placeholder text
    this.counter = 0;
    this.countertext = this.add.text( 10, 100, "Counter: " + this.counter );

    this.textElement = this.add.text(10, 280, "Ort:");
    this.textElement2 = this.add.text(10, 300, "Großraumbüro");
    this.textElement3 = this.add.text(10, 340, "Bewege dich mit den Pfeiltasten. Tippe oder klicke Leute/ Gegenstände an");
    this.antwort1 = this.add.text(10, 470, "Start").setInteractive();
    this.antwort2 = this.add.text(400, 470, "");
    
    this.antwort1.on("pointerdown", function(pointer) {
    this.letsGo(this.scenario.one);
    this.linkGo(this.linkAction.one);

      }, this);


    /// Text data

    this.scenario = exampleJSON;


    /// find the right text and the right answers

    this.letsGo = function(s) {

      this.textElement.text = "Security:";
      this.textElement2.text = s.text;
      this.textElement3.text = "Was antwortest du? Wähle aus:";
      this.antwort1.text = s.ant1;
      this.antwort1.setInteractive();
      this.antwort2.text = s.ant2;
      this.antwort2.setInteractive();
    };

    /// set answers interactive and go the related text
    this.linkGo = function(l) {
      this.antwort1.on("pointerdown", function(pointer) {
      	this.updateCounter();
        this.letsGo(l.link1);
        this.linkGo(l.next1);
      }, this);
      this.antwort2.on("pointerdown", function(pointer) {
      	this.updateCounter();
        this.letsGo(l.link2);
        this.linkGo(l.next2);
      }, this);
    };
   



  }
  
  updateCounter(){
  	this.counter++;
    this.countertext.setText("Counter: " + this.counter );
    return this;
  }

  update() {

    /// a construct to assign the correct text to the respective answer options

    this.linkAction = {

      one: {
        link1: this.next2,
        link2: this.next3,
        next1: this.linkNext2,
        next2:...