概要 □ スライドパズルのゲームを作る □ 基本に立ち返りHTMLとCSSとピュアなJavaScriptだけで作成する ・パズルの実装はシンプルで簡単。 ・考え方さえ理解すれば早いため、実装の前にイメージで説明する。 □ パズルを試したい人は https://jd253t.csb.app (codesandboxのpreview)から試せる ※下の埋め込み表示ではJavascriptが想定通り動作しないので上記のURLから試してください ※パズルはPCからの操作のみ対応 ※codesandboxのpreviewが安定しないことがあります。もし表示が崩れていたらソースコードを貼っているのでローカルで試してください イメージ.パズルを作る方法 □ 1.canvas要素(390×390で)を作成する □ 2.写真を390×390でcanvas内に描画する □ 3.スライドパズル画像を作る定義を作
![HTML&CSSとピュアなJavaScriptだけでパズルゲームを作る方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/df0b2068295800d773b983a4f575cffe994d3218/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--e-bbtOUy--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHTML%252526CSS%2525E3%252581%2525A8%2525E3%252583%252594%2525E3%252583%2525A5%2525E3%252582%2525A2%2525E3%252581%2525AAJavaScript%2525E3%252581%2525A0%2525E3%252581%252591%2525E3%252581%2525A7%2525E3%252583%252591%2525E3%252582%2525BA%2525E3%252583%2525AB%2525E3%252582%2525B2%2525E3%252583%2525BC%2525E3%252583%2525A0%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252582%25258B%2525E6%252596%2525B9%2525E6%2525B3%252595%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aakide_su%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2NmNmM2YzZkYWIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)