やり方

盤面とパイプの描画

ゲームを設置せずにSVGを描きます。

SVG画像を作る

import {decodeLayout} from "@johnmorrisdotca/suido";
import {drawSuidoThumb,drawPiece} from "@johnmorrisdotca/suido/draw";
import {SUIDO_5X5} from "@johnmorrisdotca/suido/levels-5x5";
console.log(drawSuidoThumb(decodeLayout(SUIDO_5X5[0][0])!,{label:"最初の問題"}).startsWith("<svg"));
console.log(drawPiece(3,{label:"曲がり管"}).startsWith("<svg"));

true
true

描画関数はSVG文字列を返します。操作ボタンを設置したり、ゲームを始めたりはしません。意味のある画像には読み上げ用のラベルを付けます。全体の盤面はdrawSuido、小さな画像はdrawSuidoThumb、ピースの説明図はdrawGuidePieceを使います。スタイルは標準で含まれ、多数の盤面では共通のスタイルを一度だけ用意できます。

遊べる盤面を更新する

paintSuidoは標準SVGに向き、回転数、水を反映します。別の構造のSVGには使えません。キーボード操作、ヒント、ボタン、後片付けにはmountSuidoを使います。拡大の計算は盤面の描画単位です。DOMの操作を付けるattachSuidoViewは、撤去時に破棄してください。

描画の詳細、ピースの形、埋め込みも参照してください。

ソースを見る GitHub で編集@johnmorrisdotca/suido 1.7.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。