ブックマーク / zenn.dev/ringo_to (1)

  • HTML&CSSとピュアなJavaScriptだけでパズルゲームを作る方法

    概要 □ スライドパズルのゲームを作る □ 基に立ち返りHTMLCSSとピュアなJavaScriptだけで作成する ・パズルの実装はシンプルで簡単。 ・考え方さえ理解すれば早いため、実装の前にイメージで説明する。 □ パズルを試したい人は https://jd253t.csb.app (codesandboxのpreview)から試せる ※下の埋め込み表示ではJavascriptが想定通り動作しないので上記のURLから試してください ※パズルはPCからの操作のみ対応 ※codesandboxのpreviewが安定しないことがあります。もし表示が崩れていたらソースコードを貼っているのでローカルで試してください イメージ.パズルを作る方法 □ 1.canvas要素(390×390で)を作成する □ 2.写真を390×390でcanvas内に描画する □ 3.スライドパズル画像を作る定義を作

    HTML&CSSとピュアなJavaScriptだけでパズルゲームを作る方法
    yug1224
    yug1224 2024/01/30
  • 1