JavaScriptで15パズルを作ろう (全11回)

このレッスンはアーカイブされました

このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。

#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()の実装
- 動作確認

2017年9月1日

タイルが動く前に alert が出てしまいます

2018年1月24日

ギャラリー

03/26