ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2026/05/28
NEW
【週刊ドットインストール】 AI関連レッスン、第四弾を準備中
862
レッスン
864
質問と回答
0
文字起こし
0
ソースコード
244
件のレッスンと
618
件のレッスン動画が見つかりました。
#04 指定したタイルを切り出そう
JavaScriptで15パズルを作ろう
画像を読み込んだあとに指定したタイルを好きな位置に切り出す方法について見ていきます。
#05 実装方針を確認しよう
JavaScriptで15パズルを作ろう
パネルを切り出して描画する方法について図を使って確認していきます。
#06 drawImageで画像を切り出そう
JavaScriptで15パズルを作ろう
drawImage()の引数に必要な情報を与えてパネルを切り出していきます。
#07 すべてのタイルを描画しよう
JavaScriptで15パズルを作ろう
タイルの状態をプロパティに保持しておいてそのとおりに描画する方法を見ていきます。
#08 クリックイベントを設定しよう
JavaScriptで15パズルを作ろう
canvasの左上を原点とした座標を求める方法を見ていきます。
#09 クリックした位置を求めよう
JavaScriptで15パズルを作ろう
クリックした座標の列と行を求める方法を見ていきましょう。
#10 上下左右のタイルを調べよう
JavaScriptで15パズルを作ろう
クリックしたタイルの上下左右を調べる方法について見ていきます。
#11 クリックしたタイルを入れ替えよう
JavaScriptで15パズルを作ろう
destCol、destRowを使ってタイルを入れ替えていきます。
#12 空白のタイルを動かしてみよう
JavaScriptで15パズルを作ろう
空白のタイルを入れ替えるために必要な移動先の列と行を求めていきます。
#13 タイルをシャッフルしてみよう
JavaScriptで15パズルを作ろう
destColとdestRowの範囲をチェックしたあとに、分割代入を使ってタイルを入れ替えていきます。
前へ
28
29
30
31
32
33
34
35
36
37
38
次へ