ドットインストール - 3分動画でマスターできるプログラミング学習サービス

運営からのお知らせ
- 2025年10月24日 NEW
  『Figma入門コンポーネント編』をリリースしました
- 2025年10月23日 NEW
  【週刊ドットインストール】レッスン制作の状況、256timesの現場から
すべて見る

PREMIUM

JavaScriptで迷路を作ってみよう

Canvasを使って迷路を描画していく方法を見ていきます。

0%

#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日