ブラウザゲームを作ってみよう(その5:図形表示)

はじめに

その4ではファイル分割を行いました。
今回は図形表示を行いたいと思います。

図形を表示してみよう

実は既に今までのサンプルで使用していました。
(毎回ループの最初で画面をクリアするときに使用)

ライブラリに以下のメソッドを定義しています。

shape.js

//-----------------------------------------------------------
// drawRect : 矩形描画
//     引数 : X,Y,幅,高さ,色,透明度
//   戻り値 : 無し
//-----------------------------------------------------------
function drawRect( x, y, w, h, c, alpha )
{
    c = hexToRGB( c );  // 色を16進数へ変換

    if( alpha == null ){    // 透明度なし
        c = "rgb( "+c.r+", "+c.g+", "+c.b+" )";
    } else {                // 透明度あり
        c = "rgba( "+c.r+", "+c.g+", "+c.b+", "+alpha+" )";
    }

    x += SC_X;
    y += SC_Y;

    g.strokeStyle = c;          // 色
    g.strokeRect( x, y, w, h ); // 描画
}

//-----------------------------------------------------------
// drawFill : 塗りつぶし矩形描画
//     引数 : X,Y,幅,高さ,色,透明度
//   戻り値 : 無し
//-----------------------------------------------------------
function drawFill( x, y, w, h, c, alpha )
{
    c = hexToRGB( c );  // 色を16進数へ変換

    if( alpha == null ){    // 透明度なし
        c = "rgb( "+c.r+", "+c.g+", "+c.b+" )";
    } else {                // 透明度あり
        c = "rgba( "+c.r+", "+c.g+", "+c.b+", "+alpha+" )";
    }

    x += SC_X;
    y += SC_Y;

    g.fillStyle = c;            // 色
    g.fillRect( x, y, w, h );   // 描画
}

使用用途はそれぞれ以下となります。
drawRect・・指定した大きさと色の枠を表示する
drawFill・・指定した大きさと色で塗りつぶして表示する

実行イメージ

sample.js

drawRect( 30, 30, 50, 50, 0x000000, null );
drawFill( 100, 30, 50, 50, 0xFF0000, null );

上記のソースで、以下のような表示になります。

See the Pen
Qiita16_sample01(図形表示) by nojima (@noji505)
on CodePen.

キャンバスを使えば他にも線(Line)や円弧(Arc)を描画することが出来ます。

最後に

自分はあまり絵が描けないので図形を駆使して表現することが多いです。
上手く活用すれば表現の幅が広がると思います。