ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
新着のお知らせはありません
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日
ギャラリー
このレッスンについて
最終更新日
2016年2月18日
バージョン情報
HTML5 / CSS3
関連キーワード
(4)
ミニプログラム
(136)
初心者向け
(342)
JavaScript
(137)
ゲームプログラミング
(46)
このレッスンを共有する