この演習用にSnap!を設定メニューから調整する。
https://snap.berkeley.edu/を開いて「Run Snap! Now」をクリックする。
設定変更：
・歯車アイコン → 言語 → 日本語
・歯車アイコン → ブロックをズーム → 1.3（見やすいサイズに）
・歯車アイコン → Fade blocks → 90（見やすい配色に）
・歯車アイコン → JavaScript extentions（ONにする）
・歯車アイコン → Flat design（お好みでONにする）
設定メニュー
Webclassの資料の添付ファイル
ファイル名 BreakOut202109027c.xml
ファイルアイコン → 開く → ファイルを選択 → 開く
練習用のブロックやコードの半完成品が配置されている状態になる。
以下のシナリオに従ってブロックの機能を確認しながらコードを作成して演習を進める。
※このSnap!ファイルには幾つかの拡張ブロックを予めLibraryから読み込ませてある。新規作成から自習する際に見当たらないブロックがあるが拡張ブロックです。
2重のリスト（表）の要素を行と列を指定してアクセスする。
下のコードで、リストxsの2行1列目の要素は「１」となる。
flatten リストを平滑化する。多重リストの各要素を先頭から順に辿って（深さ有線探索）、単純なリストに変換する。リストは1重になる。
reverse 要素を逆に並べたリストを作る。リストのトップレベル（もっとも外側）の要素だけを逆順にする。
columns 2重のリスト（表）の行と列を入れ替える。元が2行10列なら、10行2列になる。
numbers from X to Y XからYまでの数値リストを生成する
map リストの各要素を１つずつ順に変換する。変換内容はコードを（リング化して）引数で与える
コードのブロックの空欄にリストの要素が適用され、コードが実行される
Unicode 数値をUNICODEの文字コードとして扱い、文字に変換する
変数をリストの要素に指定した場合の挙動を確かめる。変数の値がコピーされてリストに入る。
変数自体をリストの要素に持たせる。変数の参照渡しやポインターという概念を扱うにはSnap!ではブロックの右クリックメニュー リング化・非リング化 と「呼ぶ」ブロックを組み合わせて書く。上のコードで下の例では ys の中の変数xsにアクセスして値123 を取り出すことができる。
Emojiスプライトの中のコードでテキスト処理の例を示す。
Snap!の文字列はUnicodeを使用している。Unicodeはマルチバイトのコードで1文字が1バイトまたは複数バイトで構成されているため文字列処理で注意が必要になる。
ここではJavaScriptをSnap!と組み合わせて処理する例を示す。
zip 複数のリストを引数に取り、各リストから１つづつ順に要素を取り出して1行（複数列）のリストにまとめた2重リストに変換する。
zipに1行4列のリストを2個与えると、4行2列のリストに変換する。
assoc 見出し(key)と値(value)をペアにしたリストのリストから見出しを指定してその値（と見出し語のペアのリスト）を取り出す。
見出し(key)と値(value)をペアにしたリストのリストは、連想配列や辞書とも呼ばれる。
※以下のコードを実行するには設定が必要。
歯車アイコン → JavaScript Extention をON にする
Animスプライトの中のコードで以下を確認する。
文字列（絵文字）から文字スプライトを生成してアニメーションさせる。
tell スプライト（またはそのクローン）を指定し、そのスプライトに引数で与えたコードを実行させる。
for each of 引数のリストから各要素を先頭から順に item変数に格納して順にループ処理する。＃変数はループ回数に対応する。
起動 引数のコードを並列実行する。引数のコードの実行完了を待たずに続くコード並列実行する。
reshape リストのサイズ（行と列のサイズも）を指定したサイズに変形する（元の要素はパックし直される）。
※以下のコードでは、元のリストの要素数が2個で変形に必要な要素数８に足りない。その場合は、元のリストの要素が循環リピートして再利用される。
※以下のコードを実行するには設定が必要。
歯車アイコン → JavaScript Extention をON にする
コードの実行手順：
既にコードを実行している場合、「●」停止ボタンを押してスクリプトの実行を止める。
変数 xs ys op1 op2 を設定してからメインのコードを実行する。変数を設定するには変数に代入するブロックをクリックする。
リスト変数 ys を for each で処理して各要素のスプライトのコスチュームを設定する。
アニメーション用のコードを実行する。
以下の実行例を参考に、キネティック・タイポブラフィ（モーションタイポグラフィー）をアレンジする。
上記のコードをそのまま実行した結果
全ての文字が移動完了した状態
左側のコードでは一文字移動完了後に次の文字が移動する
右側のコードでは全ての文字が同時に移動する（並列実行）
解答例1（真似してもOK）
ランダムな位置に移動してから元の位置に戻って来る
解答例2（真似してもOK）
初期配置とは逆向きの位置に並べ替わるように移動する
op4として2つの引数の位置に移動するコマンドを用意する
op4をスプライトで実行する部分です。変数 xxyyとzzzは スクリプト変数 で用意しても動きます。
解説動画
コードをアレンジした例
上記動画の加減速（イージング）の設定例のコードではピッタリ元の位置に戻らない。
原因は、移動方向を巻き戻す際に変数ｔを巻き戻すタイミングが早いため。
変数ｔを更新するタイミングを以下のように修正するとピッタリ元の位置に戻るようになる。
