Pixi.jsでつくるスワイプスタイルのクイズアプリ[その3]

クイズで使う画像（金の斧）をスワイプさせて一定の領域に持っていったら除去し次の問題に遷移する処理を作っていきます。

はまったところ、スマホにはクリックはない。not CLICK but TAPである。

先に前回の処理の一部ではまったところ、書きます。
前回　スタートボタンの処理を'click'にていたのですが、
スマートフォンのブラウザで試したときに無応答となってしまうことがわかりました。
調べたみたところ、スマホでの場合'pointertap'で制御しないといけないらでしいです。
AndroidのChrome、iPhoneのSafari,Chromeで動作確認できました。PCでも'click'同様の処理をするため、以降すべて'pointertap'にしようと思います。

//〇
      button
        .on('pointertap', function () {
           //一旦部品をすべて除去
           destroySceneObjects();
           g_container = new PIXI.Container();
           gameScene();
         })

//×スマホブラウザでは動かない。
      button
        .on('click', function () {
           destroySceneObjects();
           g_container = new PIXI.Container();
           gameScene();
        })

本記事の実装

まずはおおまかな流れ

[問題画像][問題文表示] 2
↓
[問題画像]をスワイプ
↓
[一定領域でドラッグエンド]
右＝〇 or 左＝×　で判定
↓
[次の問題へ遷移]

今回画像を表示させ、スワイプで除去し次の画像を表示させていく。

まず問題のコントロール部分をつくっていく。多分あとで色々変える。
問題数や正当数、進捗状況を確認用。

      class QuestionControl {
        constructor(numberOfQuestions, numberOfRightQuestions) {
          this.numberOfQuestions = numberOfQuestions;
          this.numberOfRightQuestions = numberOfRightQuestions;
          this.progress = 1;//0
          var questironArray = new Array(10);
        }

        addProgress(value){
          this.progress += value;
        }
        getProgress() {
          return this.progress;
        }
      }

/**問題文表示用UIを表示　木の板に書く予定なのでboardという名称にしている。
　　Container引数いらないかも・・いまは検証フェーズだからapp.stage一番下のレイヤーに置いてる**/
      function setQuestionBoard(container) {
            // Create a new texture
            console.log("setQuestionBoard this=" + this);
            console.log("setQuestionBoard container=" + container);
            let board_img_file_name = 'img/question_board.png';
            let board_texture = PIXI.Texture.from(board_img_file_name);
            let boardImage = new PIXI.Sprite(board_texture);
            boardImage.anchor.x = 0.5;
            boardImage.anchor.y = 0.5;
            boardImage.position.x = 250;
            boardImage.position.y = 700;
            app.stage.addChildAt(boardImage,BOARD_IMAGE_SPRITE_TAG);

    }

//問題画像を描画
    function setQuestionImage(container) {
      // Create a new texture
      img_file_name = 'img/quiz_img_'+questionControl.getProgress()+'.png'
      let quiz_texture = PIXI.Texture.from(img_file_name);
      let questionImage = new PIXI.Sprite(quiz_texture, QUESTION_IMAGE_SPRITE_TAG);
      questionImage.anchor.x = 0.5;
      questionImage.anchor.y = 0.5;
      questionImage.position.x =250;
      questionImage.position.y = 300;

      touchQuestionImage(questionImage);
      app.stage.addChildAt(questionImage, QUESTION_IMAGE_SPRITE_TAG+questionControl.getProgress()-2);

//正誤判定制御位置
    function touchQuestionImage(questionImage) {
      questionImage.interactive = true;
      questionImage.buttonMode = true;
      //questionImage.anchoser.set(0.5);
      questionImage
        .on('mousedown', onDragStart)
        .on('touchstart', onDragStart)

        // 判定
        if (this.position.x > 280) { alert("〇　右"); 
        PIXI.sound.play('seikai'); nextQuestion();}
        if (this.position.x < 180) { alert("×　左");
        PIXI.sound.play('fuseikai');nextQuestion();}
      }

次の問題へ遷移
画像の除去 本来であれば、同じスプライトを使いまわして画像だけ差し替えて
座標を戻す方が吉かもしれないが今回はあくまで検証なので・・・
前問題画像を除去して、問題番号+1のタグで画像を生成していく・・。

   function nextQuestion(){
      removeQuestionImage();
      setQuestionImage(g_container);
      setQuestionBoard(g_container);
      questionControl.addProgress(1);
      console.log(questionControl.getProgress());
    }

    function removeQuestionImage(){
       app.stage.removeChildAt(QUESTION_IMAGE_SPRITE_TAG+ questionControl.getProgress()-2);
    }