以下，小林先生のチュートリアルへ

反応に応じてcanvasに要素を追加

1. 反応キーで画面を描き変えるには？

「Screen」コンポーネントに「options.content」で図形要素を追加する方法が，簡単なのですが，この方法は，画面内に画像を何度も描き変えるということが出来ません。GUI のビルダーで図形を配置するのと同じことを，Scriptsでやっているため（？）だからだと思います。lab.jsは，キー入力で画面を描き変えたり，動的な刺激を描画するようなことをやろうとすると，ハードルが急に高くなるような気がします。

反応キーでオンラインで画面を切り替えるためには，Canvasの描画関数を利用する必要があるようです。今回は，小林先生のチュートリアルでも使われている方法で画面を描き変えてみます。

以下のコードをScriptsにコピーしてください。このプログラムは，「numdata」という変数の中身を入れ替えて，それを画面に表示します。初期値は0で，「Fキー」を押すたびに「+1」となり，「Jキー」を押すたびに「-1」となるようにしました。数字が20を超えたところで実験が終了となります。

var numdata = 0;

this.options.events['keydown'] = function(e) {
    
    if(numdata > 20){
      //コンポーネントを終了
      this.end();
    }

    if(e.key == "f"){
      numdata = numdata +1;
    }else if(e.key == "j"){
      numdata = numdata -1; 
    }
        if(numdata > 20){
          //コンポーネントを終了
          this.end();
        }else{
          // 新しくキャンバスに要素を追加する
          const canvas = this.options.el.querySelector('canvas');
          const ctx = canvas.getContext("2d");

          // 画面の初期化（消す）
          ctx.clearRect(-ctx.canvas.clientWidth/2, -ctx.canvas.clientHeight/2, ctx.canvas.clientWidth, ctx.canvas.clientHeight);

          // 画面を書き換える
          ctx.font = "40px 'sans-serif'";
          ctx.textAlign = "center"
          ctx.fillStyle = "red";
          ctx.fillText(numdata, 0, -50); 
        }

    }

最初の画面は以下のような教示画面です。

20を超えると以下のように実験が終了します。

以下のコマンドで Canvasに要素を追加します。

const canvas = this.options.el.querySelector('canvas');
const ctx = canvas.getContext("2d");

Canvasの描画関数についてはここでは詳しくは説明しません。「HTML5 Canvas」などをキーワードに検索してください。

以下，プログラムのファイルです。