ピース＆ブロック

[tkwonn]

対応遅れてしまって申し訳ないです！みなさんのCanvas APIを使用するやり方を参考にしてみました！

ピースの作成

ユーザの手持ちのカードにピースを収める場合、各ピースの中心とそれ以外の部分で分けることにより、中心からの相対的な座標を知ることができ、描画する際に位置を統一できると思います（以下のようなイメージ）

ピースを描画する関数では、無条件でまず中心を描画し、2次元配列で格納された各ピース（中心以外）の座業を元に他の部分を描画していくというイメージです。

このようにすると２１個のピースをそれぞれ一つの関数で描画できるようになると思います。

drawPiece(2darray, ..., ..., ...):
    // Draw center piece

    // Draw other pieces
    for piece of 2darray:
        canvas api処理

各ピースのDOM要素を取得

これには、VueJSのrefが使用できそうです。refにより21個ある

<canvas width=? height=? />

に直接DOMアクセスすることができ、それを元にcanvas apiの関数をそれぞれ適用することができます。

ボードについて

ボードも簡単でのようにすることで直接DOMにアクセスし、そこからcanvas apiの関すを使用することができます。

ピースとの違いは、ピースはこの

<canvas ref=? width=? height=? />

が21個あるので、refを動的にする必要があります。

Refについて https://vuejs.org/guide/essentials/template-refs.html https://stackoverflow.com/questions/45563329/how-to-add-dynamic-ref-in-vue-js