1.復習：ひし形がランダムな位置に呈示

ここまでをまとめると以下のようになります。

var xloc,yloc;
var angle = [0,45,90,135,180,225,270,315];
var radius = 200;
var rand_loc = this.random.shuffle([0,1,2,3,4,5,6,7]);

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  for(i=0; i<8; i++){
    xloc = Math.cos(angle[rand_loc[i]]*(Math.PI/180))*radius; // x座標
    yloc = Math.sin(angle[rand_loc[i]]*(Math.PI/180))*radius; // y座標
    
    if(i==0){
      yu_strokeRect(ctx, xloc, yloc);
    }else{
      yu_arc(ctx, xloc, yloc);
    }
  }
}

// 以下に関数化-------------------------------
// ひし形
function yu_strokeRect(ctx, xloc, yloc){
      ctx.save();// この状態の設定を保存
      // 色と線の幅を指定
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 回転させる
      ctx.translate(xloc, yloc); //座標を各図形の中心に移動
      ctx.rotate(Math.PI / 180 * 45); //45度回転
      ctx.translate(-xloc, -yloc); //座標を元に戻す
      // 四角形を描画
      ctx.strokeRect(xloc-50,yloc-50,100,100);
      ctx.stroke();
      ctx.restore();// 設定を戻す 
}
// 円
function yu_arc(ctx, xloc, yloc){
      // 色と線の幅を指定
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 円を描画
      ctx.beginPath(); // パスの初期化
      ctx.arc(xloc,yloc,50,0,2 * Math.PI);
      ctx.stroke();  
}

実験を実施すると以下のようにターゲット（ひし形）の位置がランダムに変化します。

2. 1つだけ赤色の円を呈示しよう

次は，１つだけ赤色の円を表示するようにしてみましょう。「else if」を使い，「i==1」の時には赤色の円が表示されるようにします。「yu_arc_red」という関数を新たに作成します。

    if(i==0){
      yu_strokeRect(ctx, xloc, yloc);
    }else if(i==1){
      yu_arc_red(ctx, xloc, yloc);
    }else{
      yu_arc(ctx, xloc, yloc);
    }

関数の中身は以下のように設定します。

// 赤い円
function yu_arc_red(ctx, xloc, yloc){
      // 色と線の幅を指定
      ctx.strokeStyle = "red";
      ctx.lineWidth = 5; // 線の幅は5px
      // 円を描画
      ctx.beginPath(); // パスの初期化
      ctx.arc(xloc,yloc,50,0,2 * Math.PI);
      ctx.stroke();  
}

ここまでのプログラムをまとめると以下のようになります。

var xloc,yloc;
var angle = [0,45,90,135,180,225,270,315];
var radius = 200;
var rand_loc = this.random.shuffle([0,1,2,3,4,5,6,7]);

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  for(i=0; i<8; i++){
    xloc = Math.cos(angle[rand_loc[i]]*(Math.PI/180))*radius; // x座標
    yloc = Math.sin(angle[rand_loc[i]]*(Math.PI/180))*radius; // y座標
    
    if(i==0){
      yu_strokeRect(ctx, xloc, yloc);
    }else if(i==1){
      yu_arc_red(ctx, xloc, yloc);
    }else{
      yu_arc(ctx, xloc, yloc);
    }
  }
}

// 以下に関数化-------------------------------
// ひし形
function yu_strokeRect(ctx, xloc, yloc){
      ctx.save();// この状態の設定を保存
      // 色と線の幅を指定
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 回転させる
      ctx.translate(xloc, yloc); //座標を各図形の中心に移動
      ctx.rotate(Math.PI / 180 * 45); //45度回転
      ctx.translate(-xloc, -yloc); //座標を元に戻す
      // 四角形を描画
      ctx.strokeRect(xloc-50,yloc-50,100,100);
      ctx.stroke();
      ctx.restore();// 設定を戻す 
}
// 円
function yu_arc(ctx, xloc, yloc){
      // 色と線の幅を指定
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 円を描画
      ctx.beginPath(); // パスの初期化
      ctx.arc(xloc,yloc,50,0,2 * Math.PI);
      ctx.stroke();  
}
// 赤い円
function yu_arc_red(ctx, xloc, yloc){
      // 色と線の幅を指定
      ctx.strokeStyle = "red";
      ctx.lineWidth = 5; // 線の幅は5px
      // 円を描画
      ctx.beginPath(); // パスの初期化
      ctx.arc(xloc,yloc,50,0,2 * Math.PI);
      ctx.stroke();  
}

プログラムを実行すると以下のように呈示されます。赤色の円の位置もランダムです。