エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

【Tech Talk動画紹介】HTML+JavaScriptで作るジグソーパズル

こんにちは、Unit4の西川です。JavaScript が好きです。

エムスリー内で隔週金曜日に開催されている Tech Talk にて、これまでに何度か JavaScript 関連の発表をさせていただいていますが、そのうちの1つをブログで紹介いたします。

www.youtube.com

概要

動画内では、表題の通り、HTML と JavaScript で作られたジグソーパズルのコード解説を行っています。

HTML の <input type="file"> からアップロードされた画像を読み取り、その画像を JavaScript でピースとして分割し、<canvas> タグ上に描画しています。
せっかくなら直感的に操作できるようにしたいと思ったので、JavaScript の MouseEvent を使ってピースを動かせるようにしました。

改善点

それなりに動くコードにはなっているのですが、以下のような改善点もあるかなと思っています。

  1. ピースの情報をクラス化した方が良さそう
    • 今回は雑にグローバル変数に突っ込んだため、煩雑なコードになってしまいました
  2. JavaScript ファイルを処理ごとに分割した方が良さそう
    • 大したことないコードですが、それでもコード量が多くなり、後半、どこに何が書いてあるのかわからなくなりました…

今後の展開

実際に発表していく中で、「こうしたらもっといいね」というコメントをいただいたのでピックします。
全部できるとすごく楽しそうですね!いつか追加してまた発表できたらいいなと思っています!

  1. ピースを複数個つなげたものを操作できるようにする
  2. 凹凸をベジェ曲線にする
  3. スマホでもピースを操作できるようにする
  4. マルチプレイを実装する(!)

まとめ

今回は HTML + JavaScript でジグソーパズルを作る方法をご紹介しました。

HTML も JavaScript も、難しい環境構築など必要ではなく、メモ帳とブラウザだけですぐに遊べるものが作れる優秀な言語なので、ぜひ色々試してみましょう!

We are hiring!

社外の方も Tech Talk にご参加いただけます。以下ページの「カジュアル面談はこちら」からお申し込みください。

jobs.m3.com