例題：ずっと繰り返す

ずっと繰り返す

旗クリックのときのスレッドの中で「ずっと」動き続けるコードを書きましょう。ずっと繰り返すは、for( ; ; ){ } の文法を使ってみましょう。

動作例

緑の旗をクリックすると、ずっとスプライトを移動させます。
スプライトが端に触れたとき、反転させます。

※ TypeScratcherロゴをクリックで表示、緑の旗クリックで動作開始

index.ts

typescript

import { Typescratcher as Ts } from "@tscratch3/typescratcher";
import type { Sprite } from "@tscratch3/typescratcher";

// イメージ作成
import { CatAImage, BlueskyImage } from './sub/images';

// スプライト作成
const cat = new Ts.Sprite( "cat" );
cat.Costume.add( CatAImage ); // イメージを追加

// ステージ作成
const stage = new Ts.Stage();
stage.Backdrop.add( BlueskyImage ); // 背景を追加

// 【旗クリックされたとき】のイベント定義
cat.Event.flagPresser().func = async function*( this: Sprite ) {
    // ずっと繰り返す
    for( ;; ) {
        // Motion: 「動き」系
        // move: 「動かす」系
        // Motion.move.ifOnEdgeBounce: もし端についていたら跳ね返る
        this.Motion.move.steps(5);
        this.Motion.move.ifOnEdgeBounce();
        
        yield; // 次のフレームになるまで一時停止する
    }
}

// 開始
Ts.engine.start();

index.ts

ここでは『旗クリックされたときのイベント』として用意したスレッドの中で『ずっと繰り返す』のコードを書いています。

なお、Scratch3にならい、『永久ループ』とは呼ばすに『ずっと繰り返す』と呼ぶことにしています。

TypsScratcherの『ずっと繰り返す』の書き方としては、『for( ;; ) { }』の形で統一しています。

他に『while( true ) { }』や『while( 1 == 1 ) { }』がありますが、繰り返し構文は『for』で統一したいという『個人的コダワリ』がありまして、本サイトでは『for( ;; ) { }』を多用しています。

TypeScratcherでは制限はありませんので、お好きなやり方でＯＫです。

『yield』

TypeScratcherは、構文チェックをしますので、繰り返し構文の最後に『yield』がないと『エラー』になります。
30FPS（1秒間に30フレーム)の場合、登場キャラクターの変化を 1秒間に30回描画しなおすわけですが、１回の繰り返しとフレーム切り替えを同期させるために『yield』を必要とします。

『yield』がないと繰り返し構文はフレームの切り替えに関係なく超高速動作をし、たいていの場合はブラウザハングを引き起こします。
ブラウザハングを予防するため、TypeScratcherの繰り返し構文では、TypeScratcherが強制的に『yield』を付けるように誘導します。

なお、Scratch3のターボモードのように高速で繰り返し構文を実行したい!という場合(『yield』無視せせたい場合)があります。
意図的に『yield』を無視する方法については、ここでは割愛します（別の箇所で解説をします）。

例題：ずっと繰り返す ​

動作例 ​

index.ts ​

例題：ずっと繰り返す

動作例

index.ts