Scratch3 拡張機能
人工知能の実験のときもScratch3の拡張機能を使いましたが、自分でこれを作るのにはどうしたらできるか、試してみました。
拡張機能は、JavaScriptで記述されますが、「子供の科学」2020年9月号の記事に詳しく書かれています。
しかし、人工知能のときと同様、外部サイトを利用した実装になります。これをすべて自前でやる方法は、下記ブログで作りました。(環境構築はこちらを参考にしてください)
どちらもWebサーバを使う必要があり、なかなかハードルが高いのですが、一度環境を構築すれば、Scratch3からJavaScriptを利用できるメリットを得ることができます。
ここではどんな使い方が面白いかという観点で、グローバル変数を使ってスプライトを動きを記憶し、後から利用するしくみを考えてみました。
まずグローバル変数のエリアにスプライトの位置のX座標、Y座標、配列のインデックスを示す数値の3つを定義します。
|
1 2 3 |
var pos_x = new Array(10); var pos_y = new Array(10); var p = 0; |
ここから下は関数の定義です。
スプライト位置を10個分記憶するrecPosと、記憶した座標を取得するgetXpos, getYposの3つの関数を作りました。
配列はローテーションにしていて、インデックスが0から9まで進むと次は0に戻ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
getInfo () { return { id: 'newblocks', name: 'New Blocks', blocks: [ { opcode: 'recPos', blockType: BlockType.COMMAND, text: 'rec x:[x] y:[y]', arguments: { x: { type: ArgumentType.NUMBER, defaultValue: '0' }, y: { type: ArgumentType.NUMBER, defaultValue: '0' } } }, { opcode: 'getXpos', blockType: BlockType.REPORTER, text: 'get x:[p]', arguments: { p: { type: ArgumentType.NUMBER, defaultValue: '0' } } }, { opcode: 'getYpos', blockType: BlockType.REPORTER, text: 'get y:[p]', arguments: { p: { type: ArgumentType.NUMBER, defaultValue: '0' } } }, ] }; } recPos(args){ if(p >= 10){ p = 0; } pos_x[p] = args.x; pos_y[p] = args.y; p ++; } getXpos(args){ return pos_x[args.p%10]; } getYpos(args){ return pos_y[args.p%10]; } |
スクラッチキャットの動きを星が後を追っかけるように表示させるために、星の1つ目は配列の4番目を取得しています。
星の2つは9番目を取得しています。
厳密に追っかけるということは、星の動きの履歴の何個前、とするのですが、簡略化のため固定値にしました。
しかしこれはこれで、また独特の動きをするので、面白いと思います。
拡張機能の本来の目的は、外部サービスやロボットなどの外部装置をつなげることが目的かもしれませんが、(そのためプログラミング学習的な環境ではない?)、私はJavaScript言語連携によって、もっと言語の面白さを膨らますことができると思っています。
Category: 未分類