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

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

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

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

対象読者様

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

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

【5*5将棋　サンプル】

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

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

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

作成コードの概要説明

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

【5*5将棋　サンプル】

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

解説方針

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

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

まとめ

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

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

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

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

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

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

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