見出し画像

🚀P5.jsでテキストアドベンチャーゲームするときのベースコードをください


https://editor.p5js.org/setapolo/sketches/_bPm7GuwX
let currentState;

function setup() {
  createCanvas(400, 400);
  currentState = new GameState();
  // 「はい」ボタン
  buttonYes = createButton('はい');
  buttonYes.position(50, 300);
  buttonYes.mousePressed(() => currentState.answer(true));
  // 「いいえ」ボタン
  buttonNo = createButton('いいえ');
  buttonNo.position(150, 300);
  buttonNo.mousePressed(() => currentState.answer(false));
}

function draw() {
  background(220);
  currentState.display();
}

class GameState {
  constructor() {
    this.scene = 0;
    this.texts = ["あなたは暗い森の中にいます。何か怪しい音がします。進みますか?", "安全な場所に戻ります。", "奥へ進んで何か新しいものを発見します!"];
    this.currentText = this.texts[this.scene];
  }

  display() {
    fill(0);
    textSize(16);
    text(this.currentText, 20, 50, 360, 300);
  }

  answer(response) {
    if (this.scene === 0) {
      if (response) {
        this.scene = 2; // 「はい」の場合、新しい発見のシーンへ
      } else {
        this.scene = 1; // 「いいえ」の場合、安全な場所へ
      }
      this.currentText = this.texts[this.scene];
    }
  }
}

このコードは以下のように機能します:

  1. setup関数: キャンバスをセットアップし、二つのボタン「はい」と「いいえ」を作成します。これらのボタンは画面上に配置され、それぞれがクリックされたときにGameStateクラスのanswerメソッドを呼び出します。

  2. draw関数: 画面を更新して現在のゲームの状態を表示します。

  3. GameStateクラス:

    • constructor: 初期シーンとテキストを設定します。

    • display: 現在のテキストを画面に表示します。

    • answer: ユーザーの選択に応じてゲームのシナリオを進めるメソッドです。ここでシーンの変更を行います。


お願い致します