用途別リファレンス

ゲージを表示する

$panelを使うと、画面に四角形などの図形を描くことができます。

これを利用してゲージなどを描画することができます。

Main

$progress=0;

while(true) {
    $panel.setFillStyle("#f00");
    $panel.fillRect(10,100,100,20);
    $panel.setFillStyle("#0f0");
    $panel.fillRect(10,100,$progress,20);
    if ($progress<100)$progress++;
    update();
}

※$panelの内容はページを切り替えても残ります．パネルの内容をクリアしたい場合は次のようにします．

$panel.clearRect(0,0,$screenWidth,$screenHeight);

オブジェクト毎に個別のゲージを表示する

キャラクタの体力表示などを各キャラクタに個別に出す場合は，キャラクタごとにパネルを作成します．

Main

new Enemy{x:100,y:100,life:100};
new Enemy{x:150,y:300,life:70};

Enemy

// パネルをgauge(ゲージ)という名前で作成．
// lifeKeeper=this は，このオブジェクトが消えたときにゲージも消えるための設定．
gauge=new Panel{lifeKeeper=this};
gauge.resize(100,10);
while(true) {
    // パネルを自分の頭上に移動
    gauge.x=x;
    gauge.y=y-20;
    // パネルの描画
    gauge.fillStyle="red";
    gauge.fillRect(0,0,100,10);
    gauge.fillStyle="green";
    gauge.fillRect(0,0,life,10);
    life--;
    if (life<=0) die();
    x++;
    update();
}

ライブデモ