ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/09/04
NEW
【週刊ドットインストール】 Seoul Startup Hubがおすすめ、レッスン制作・256timesの進捗
860
レッスン
864
質問と回答
0
文字起こし
0
ソースコード
242
件のレッスンと
618
件のレッスン動画が見つかりました。
#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の範囲をチェックしたあとに、分割代入を使ってタイルを入れ替えていきます。
#14 switch文を書き換えてみよう
JavaScriptで15パズルを作ろう
上下左右の移動距離を配列にしてswitch文を書き換えていきます。
#15 移動距離の差分を配列にまとめよう
JavaScriptで15パズルを作ろう
UDLRを使ってdestColとdestRowを求めていきます。
前へ
28
29
30
31
32
33
34
35
36
37
38
次へ