-
#01 15パズルを作ってみよう (02:13) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 Canvas要素を配置しよう (01:43) 無料公開中
- canvasの配置
- canvasのスタイリング
-
#03 Puzzleクラスを作っていこう (02:21) 無料公開中
- main.jsの作成
- canvasの設定
- Puzzleクラスの作成
-
#04 指定したタイルを切り出そう (02:36) 無料公開中
- 画像の読み込み
- renderTile()の実装
-
#05 実装方針を確認しよう (02:58) 無料公開中
- 実装方針の確認
-
#06 drawImageで画像を切り出そう (01:55)
- drawImage()
- タイルの切り出し
-
#07 すべてのタイルを描画しよう (02:20)
- tilesの描画
-
#08 クリックイベントを設定しよう (02:30)
- e.clientX
- e.clientY
- getBoundingClientRect()
-
#09 クリックした位置を求めよう (01:44)
- 列と行の取得
-
#10 上下左右のタイルを調べよう (03:01)
- 空白だった場合の処理
- 上下左右の列と行の取得
-
#11 クリックしたタイルを入れ替えよう (01:45)
- 範囲のチェック
- タイルの入れ替え
-
#12 空白のタイルを動かしてみよう (02:11)
- shuffle()
- 空白の移動先の取得
-
#13 タイルをシャッフルしてみよう (02:58)
- 範囲のチェック
- タイルのシャッフル
-
#14 switch文を書き換えてみよう (01:59)
- UDLRの導入
-
#15 移動距離の差分を配列にまとめよう (02:04)
- destCol、destRowの取得
- switch文の書き換え
-
#16 swapTilesも書き換えてみよう (01:55)
- UDLRのプロパティ化
- swapTiles()への適応
-
#17 重複したコードをメソッドにまとめよう (01:52)
- isOutside()の実装
-
#18 ゲームクリア画面を作ろう (02:07)
- renderGameClear()の実装
-
#19 クリア判定を実装していこう (02:36)
- isComplete()の実装
- shuffle()の修正
-
#20 不具合を修正していこう (01:13)
- ゲームの状態管理
- 不具合の修正
-
#21 描画処理を別クラスに切り出そう (02:02)
- PuzzleRendererクラスの作成
- 描画関連処理の移動
-
#22 Puzzleクラスにアクセスしよう (02:39)
- プロパティの書き換え
- メソッドの実装
-
#23 画像を差し替えてみよう (02:50)
- 画像の差し替え
- renderTile()の修正
-
#24 マジックナンバーを無くそう (03:01)
- マジックナンバーの書き換え
- メソッドの実装
-
#25 15パズルを完成させよう (02:20)
- マジックナンバーの書き換え
- 条件の書き換え
- 15パズルの完成
