ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
【旧版】JavaScriptで15パズルを作ろう
JavaScriptを使った15パズルを作ってみます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptで15パズルを作ろう
JavaScriptのクラス構文を使って15パズルを作る方法を見ていきます。
0%
動画レッスン一覧
(11)
質問と回答
(2)
#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()の実装
動作確認
未完了
#02 パズルの画像を表示してみよう
15puzzle.pngはどこからダウンロードできますか?
2017年9月1日
#09 タイルを入れ替えてみよう
タイルが動く前に alert が出てしまいます
2018年1月24日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2016年2月18日
バージョン情報
HTML5 / CSS3