スポンサーリンク

【html】将棋の作り方解説!コピペだけで簡単に動く!【javascript】


「勉強の為にhtmlとJavaScriptで将棋を作りたい」
という方向け、初学者向けの解説記事となります。

この記事を読んでできること

将棋の作り方を理解することができる
コピペするだけでブラウザで将棋を遊ぶことができる

対象読者様

【想定される読者層】
「html/javascript」で将棋アプリを作成したい方
②初学者で将棋の作成方法を理解したい方
③とりあえず動くコードをコピペしたい方

上記のような読者様を想定しております。

まずは③方向けに実際の挙動をご覧いただくのがよいと思います。
下記をご覧ください。※0.5Xでご使用ください

【5*5将棋 サンプル】

htmlとJavascriptをコピペするだけで将棋を指すことができるようになっております。
ご活用ください。

ただ、将棋は大変シンプルかつ完成度の高いゲームです。
その為「駒を動く」コードの理解だけでは成立しない処理が多数ございます。

①②の読者様にも、③で目的を達成された方にもお役立ちする解説をお届けできればと考え、当記事を作成致しました。

作成コードの概要説明

今一度、完成品をご覧ください。

【5*5将棋 サンプル】

今回、投稿者の力不足で恐縮ですが、実現できたことできなかったことがあります。

【実装できたこと】
・先手後手のターンが交互に続く
・駒を動かし、相手の駒を取ることができる
・成り駒を作成することができる
・持ち駒を使用することできる
【実装できなかったこと】
・「詰み」「王手放置」でゲームを終了する
・「王手」のアナウンス
・人間 VS CPU
・人間同士のオンライン対戦

解説方針

解説にあたりまして、下記ようにブロックに分けて解説しようと考えております。

全く0から順を追って作成方法を知りたい方は当コードの全体像
ある程度分かるのでピンポイントでここだけ知りたいな、という方はそれぞれのリンクを飛んでみて下さい。

【解説ブロック】
1.当コードの全体像
2 変数定義① 駒の本体を作ろう![駒の動き/初期配置]
3 変数定義② 全体を描画しよう![盤本体・駒台の大きさ/色/手番]
4 当コードの関数まとめ
5 init    駒と盤の初期配置の描画
6 redraw   再描画
7 isinside  盤上の中かどうかの判定
8 drawpiece マス目/駒の名前の描画
9 touchpiece① 「駒をタッチした時」のイベント登録
10 touchpiece② 登録したイベントを動す
11 movestart 動けるマスの表示
12 moveend  指定したマスに駒を動す
※11/10時点「2.変数定義①」まで作成
2022年12月末までに全てのブロックの解説完了を予定しておりますm(__)m

まとめ

今回、多数のサイトを参考にさせていただきました。
執筆者様、解説者様に感謝申し上げます。

Canvasの使い方 – HTMLクイックリファレンス
HTML5 canvas.getContext(“2d”) リファレンス
配列(Array) – とほほのWWW入門
将棋

フロント勉強中の方、Javascriptで将棋などのゲームを作ってみたい方などの
一助になれば幸いでございます。

また、html/cssに関しては初学者向けの解説記事を作成しております。
よろしければこちらもご覧くださいませ。

display flexで縦並びにする方法を解説

CSSが効かない時の対処法を解説

皆様のよいコーデイングライフと将棋ライフを祈っております。