ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/12
NEW
【週刊ドットインストール】 CSSバージョンのお話、レッスン制作の進捗、代表のひとりごと
PREMIUM
JavaScriptで迷路を作ってみよう
Canvasを使って迷路を描画していく方法を見ていきます。
0%
動画レッスン一覧
(13)
質問と回答
(13)
#01 迷路を作ってみよう
(02:29)
無料公開中
完成版の確認
index.htmlの作成
未完了
#02 Canvasの設定をしていこう
(02:43)
無料公開中
main.jsの作成
canvas要素の取得
即時関数
未完了
#03 Mazeクラスを作っていこう
(02:09)
無料公開中
Mazeクラスの作成
コンストラクタの設定
未完了
#04 迷路を描画しよう
(01:59)
render()
fillRect()
未完了
#05 迷路のアルゴリズムを理解しよう
(01:29)
棒倒し法
ステップごとの手順
未完了
#06 棒倒し法を実装していこう
(02:13)
getData()
壁の描画
未完了
#07 格子状に棒を配置しよう
(02:06)
外周の設定
棒の配置
未完了
#08 棒を倒す位置を計算しよう
(02:49)
棒を倒す位置の計算
ランダムな整数値の生成
未完了
#09 上下左右のどれかに棒を倒そう
(02:27)
壁の描画
do ... while ()
未完了
#10 迷路の実装を仕上げていこう
(02:40)
2行目以降の条件分岐
迷路のサイズ変更
未完了
#11 迷路のサイズを変更していこう
(02:55)
マジックナンバー
canvasの設定
未完了
#12 描画処理を切り出していこう
(02:00)
MazeRendererクラスの作成
描画処理の切り出し
未完了
#13 MazeRendererクラスを完成させよう
(02:19)
render()の実装
迷路の完成
未完了
#06 棒倒し法を実装していこう
data[row] = [] がなぜ必要なのかわかりません
2022年4月4日
行数を表現する際に this.data[col].length としないのはなぜですか?
2022年1月27日
getData メソッド内での空配列と for 文の関係性がわかりません
2022年1月27日
#07 格子状に棒を配置しよう
for (let row = 1; row < 9 - 1; row++) として配列を表示すると”なし”という値が出るのはなぜですか?
2022年1月27日
空配列の宣言が必要なときと、そうでないときがあるのですか?
2022年1月27日
#09 上下左右のどれかに棒を倒そう
レッスン通りに書いても袋小路になります
2022年5月24日
do ... while() の条件が必要なのはなぜですか?
2022年2月18日
#10 迷路の実装を仕上げていこう
if 文ではなく三項演算子を使うのはなぜですか?
2022年1月27日
2 行目以降の条件分岐がよくわかりません
2022年1月27日
if で条件分岐ができません
2022年1月27日
#12 描画処理を切り出していこう
Maze インスタンスに renderer プロパティを設定するのはなぜですか?
2022年1月27日
MazeRendererクラスを作ったのはなぜですか?
2022年1月27日
#13 MazeRendererクラスを完成させよう
ループでdata[0]にする理由を教えて下さい
2022年1月27日
リリース情報(note)
今週は『JavaScriptで迷路を作ってみよう』をリリースしました
詳細情報
最終更新日
2020年7月28日
バージョン情報
Chrome 84 / Visual Studio Code 1.47.2