Skip to content

例題:ずっと繰り返す ​

ずっと繰り返す

旗クリックのときのスレッドの中で「ずっと」動き続けるコードを書きましょう。 ずっと繰り返すは、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 = function( this: Sprite ) {
    // ずっと繰り返す
    for( ;; ) {
        // Motion: 「動き」系
        // move: 「動かす」系
        // Motion.move.ifOnEdgeBounce: もし端についていたら跳ね返る
        this.Motion.move.steps(5);
        this.Motion.move.ifOnEdgeBounce();
        
        // 1回の繰り返しごとに次のフレームになるまで一時停止します。
        // これはTypescratcherの独自機能です。
    }
}

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

index.ts

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

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

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

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

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

『繰り返しの最後』

TypeScratcherは、繰り返し構文のとき『次のフレームになるまで一時停止』します。
30FPS(1秒間に30フレーム)の場合、登場キャラクターの変化を 1秒間に30回描画し直すわけですが、フレームとフレームの間で『一時停止』する仕様になっています。

この『一時停止』がない繰り返し構文はフレームの切り替えに関係なく超高速動作をし、たいていの場合はブラウザハングを引き起こします。
ブラウザハングを予防するため、TypeScratcherの繰り返し構文では、TypeScratcherが自動的に『一時停止』を発生させています。