2014年11月26日水曜日

麻雀の牌を表示するJavascriptライブラリ


以前に公開したJavaの麻雀AIサーバであるSmartBirdから麻雀の牌を描画する部分だけ取り出してライブラリ化しました。

https://github.com/kentan/MahjongTileDrawingJS/tree/master




麻雀の牌はフリー素材などがいっぱいあったりしますが、今回公開したのはHTML5のcanvasタグを使ってその場で描画するタイプです。
使い方は下記のようにシンプル。
萬子はCharacter,索子はBamboo,筒子はCircleで表現しているので例えば5索を書きたい場合はdrawBamboo5("canvasタグのID")といったふうに呼び出せば、引数に指定したcanvasタグに5索が描かれます。

サンプル用のhtmlファイル
<html>
   <head></head>
   <body onload="startDrawing()">
   <canvas id = "canvas1" width="50px" height="60px"></canvas>
</body>
ライブラリを呼び出すサンプル用のjavascript
  function startDrawing(){
      tileDrawing.drawCharactor1("canvas1");
  }

詳細はgithubにあるサンプルコードを見てください

0 件のコメント:

コメントを投稿