Webノウハウ

「canvasについて」に描いた詰将棋を、実際に動くようにしてみました。

おかげでHTMLとJavascriptについて、大変勉強になりました。canvasを3枚重ねて使っているのですが、下手をすると、下にある「一覧表示 ▶︎ Webノウハウ, スタッフの日記, ブログ」とある箱まで重なってしまって、何やらわからないことになってしまうのに苦労しました。

上図の駒をマウスでドラッグすると、将棋のルールに則って、動かすことができます。ぜひ、やってみてください。

もし動かない場合は、タイトル「canvasについて続編―詰将棋をちゃんと動くようにしてみた」をクリックして単独表示にしてみてください。

なお、canvasを重ねて使う方法については、けーちゃんのプログラム開発ノート【JavaScript】 Canvasでレイヤーを表現する(https://note.affi-sapo-sv.com/js-canvas-layer.php)を参考にさせていただきました。