前回記事でjavascriptをさくっとライブラリ化する方法巡りがやっと完結したので、昔作ったjavascriptをwebページコンポーネント化しようキャンペーン。

対応ブラウザならこの真上あたりに四角い物体が配置されたキャンバスができているはず。ダメでもリロードしたらもしかしたら。
あとはドラッグですぱすぱするだけ。2D物理エンジンのMatter.jsが動いているから切ってる感満載!
元々は何かゲーム作ろうと思ったもののそのまま放置してしまったからここで再利用。

コンポーネント化してるから好きな場所にさくっと設置可能。
ファイルを読み込むとコンストラクタSlashCanvasがグローバル展開されるからそれに引数与えてnewするだけ。画像や音は自前で好きなものをどうぞ。
webpack様々のビルドによってUMD対応なのでrequire環境でもOK。

// 第一引数にタグのID、第二引数にオプション(省略可)を設定してインスタンス作成
new SlashCanvas("main", {  
    image : "./resouce/image.png",              // 画像ソース
    width : 400,                                // フィールド幅
    height : 400,                               // フィールド高さ
    gravityX : 0,                               // 横重力
    gravityY : 0,                               // 縦重力
    blockScale : 0.8,                           // フィールドに対するブロックスケール
    sound : "./resouce/sound.wav"               // 斬撃サウンドソース
});

ソースやビルド後ファイルはgithubに。
まだまだ自分の中でjavascript観が固まっていないころに作ったものだから随所調所が初々しい・・・忘れたい・・・かわいい。

わざわざnewするのにインスタンスの使い道ないのかよという突っ込みへの答えは、はいそうです。特に用意するほどの機能もなかったからお手軽さ重視でnewして終わり!

すぱすぱしすぎると割と重いので注意。スペックに自信あるならとことんすぱすぱ。