あむちょです。

HTML5の<video>を使ってスライドパズルを作りました。

スマホだと、プレイヤーが起動してしまうので、PC専用です。

Move 8 Puzzle

あいたマスにドラッグでマスを動かしてパズルを完成させます。動画だと、かなり難易度が高いので、隣に完成図を表示してます。

停止ボタンを押せば、動画が止まるので、ただのスライドパズルになります。難易度によって、マスの数がかわり、また完成後に再生される動画が変わります。

動画はあいかわらずNHKのを使ってます。
NHKクリエイティブ・ライブラリー

やり方は、まずHTML側で<video>を設定

<br />
&lt;video id=&quot;v&quot; src=&quot;test.mp4&quot; width=&quot;500&quot; height=&quot;400&quot; autoplay loop&gt;<br />
&lt;/video&gt;<br />

つぎにjs側で、videoをcanvasに書き込み、画像化する

<br />
context.drawImage(video,0,0,video.width,video.height);<br />
img.src=canvas.toDataURL(&quot;image/jpeg&quot;);<br />

あとは画像を分割して表示してます。本来のスライドパズルでは、上下左右のブロックしか動かせないけど、難易度を下げるため、どのブロックも動かせるようにしてます。もしやるなら、ブロックの移動量から判定できそうです。

実際のソースはこんな感じ。

main
puzzle

これを作ったのが2か月前なので、詳しいことは

覚えてない

[ad]