やり方

標準盤の描画と埋め込み

画像のSVGと操作する設置を使い分けます。

操作なしのSVG

import {buildMaze} from "@johnmorrisdotca/meikyuu";
import {drawMaze} from "@johnmorrisdotca/meikyuu/draw";
const maze = buildMaze({shape:"square",w:5,h:5,algorithm:"backtracker",mode:"to-goal",seed:42});
console.log(drawMaze(maze,{label:"迷路の例",board:"paper"}).startsWith("<svg"));

true

描画はSVG、設置は入力、移動、拡大、ヒント、合成音を提供します。ホストを取り除くときはハンドルを破棄します。

import {mountMeikyuu} from "@johnmorrisdotca/meikyuu/play";
const host = document.createElement("div");document.body.append(host);
const board = mountMeikyuu(host,{kind:"maze",level:1,hints:true});
console.log(board?.kind());board?.destroy();

要素とiframe

/element/defineを読み、<meikyuu-board kind="maze" level="12" size="medium"></meikyuu-board>を置きます。ビルダーで迷路・矢印・混合を確認し、各種コードをコピーできます。表示幅、テーマ、ラベルは設定を変えません。独自設定は日替わりより優先し、todayは設置時に決まり、切替タイマーはありません。

イベントはShadow DOMを越え、iframeからも送られるのでoriginと送信元を確認します。全仕様はcallableなfitと表示操作、プロパティ、ホストの描画設定、保存しないフレームを説明します。デモとビルダーのDocsは選んだ言語に従います。

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

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