JavaScriptで15パズルを作ろう
(全11回)
JavaScriptを使った15パズルを作ってみます。
このレッスンでは HTML5 / CSS3 を使用しています。
-
#01 15パズルを作ろう (02:34) 無料公開中
- 完成版の確認
- 必要となる知識
- 必要となるツール
- index.htmlの作成
-
#02 パズルの画像を表示してみよう (03:00) 無料公開中
- Canvasの準備
- 画像の表示
- 動作確認
-
#03 タイルを初期化していこう (02:53) 無料公開中
- tilesの初期化
-
#04 任意の画像を切り出してみよう (02:39)
- 画像の切り出し
-
#05 すべての画像を表示させてみよう (02:44)
- 切り出し処理の最終化
- 処理の一般化
-
#06 右下のタイルを空白にしてみよう (03:00)
- TILE_WIDTH, TILE_HEIGHTの設定
- 空白タイルの設定
- 動作確認
-
#07 タイルをクリックしてみよう (02:57)
- クリックイベントの設定
- 座標の取得
- 行、列の計算
-
#08 タイルの周囲を調べてみよう (02:59)
- UDLRの設定
- 上下左右にあるタイルの調査
-
#09 タイルを入れ替えてみよう (02:55)
- 入れ替え処理
- 終了判定処理
-
#10 タイルをシャッフルしてみよう (02:55)
- moveBlank()の実装
-
#11 15パズルを完成させよう (03:01)
- moveBlank()の実装
- 動作確認
このレッスンで出てくる 15puzzle.png なのですが、どこからダウンロードができるのでしょうか？
パズルが揃ったときに最後に出るアラートですが、 Chrome で試すと数字が動く前にアラートが出てしまいます。
...
