今回は，「ひし形（ターゲット）」を探し出し，ターゲットの中にある線分が垂直か，水平かを「F キー」または「Jキー」で答えるという課題にします。
半数の試行では赤色の円が出現し，残り半数の試行では出現しません。
ここまでの完成版です。
osg-simple-script-demo3-2024-05-16--11 22.study.json
zip
osg-simple-script-demo3-2024-05-16--11 22.study.json.zip
上記の方法で保存できない場合のヒント
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]);
var line_angle = [22.5,-22.5,90+22.5,90-22.5,180+22.5,180-22.5,270+22.5,270-22.5];
var rand_line_angle = this.random.shuffle([0,1,2,3,4,5,6,7]);
var resp_angle;
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);
}
resp_angle=line_angle[rand_line_angle[i]]; //回転
yu_fillLine(ctx, xloc, yloc,resp_angle);
}
}
// 以下に関数化-------------------------------
// ひし形
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();
}
// 直線
function yu_fillLine(ctx, xloc, yloc,resp_angle){
ctx.save();// この状態の設定を保存
// 色を指定
ctx.fillStyle = "black";
// 回転させる
ctx.translate(xloc, yloc); //座標を各図形の中心に移動
ctx.rotate(Math.PI / 180 * resp_angle);
ctx.translate(-xloc, -yloc); //座標を元に戻す
// 四角形を描画
ctx.fillRect(xloc-2.5,yloc-25,5,50);
ctx.restore();// 設定を戻す
}
実験を実行すると以下のように表示されます。
