-
#01 ピンポンゲームを作ってみよう (01:59) 無料公開中
- 完成版の確認
- index.htmlの作成
-
#02 Canvas要素を配置しよう (01:36) 無料公開中
- canvasの配置
- canvasのスタイリング
-
#03 Gameクラスを作っていこう (02:32) 無料公開中
- main.jsの作成
- canvasの設定
- Gameクラスの作成
-
#04 ゲームループを実装しよう (02:44) 無料公開中
- requestAnimationFrame()
- thisに関する注意点
- ゲームループの実装
-
#05 Ballクラスを作っていこう (02:27)
- Ballクラスの作成
- draw()の実装
-
#06 ボールを動かしてみよう (01:34)
- 速度の導入
- update()の実装
- clearRect()
-
#07 ボールを跳ね返してみよう (02:04)
- 壁との衝突判定
- 半径を考慮した調整
-
#08 ボールの動きをランダムにしよう (01:51)
- rand()の作成
-
#09 Paddleクラスを作っていこう (02:48)
- Paddleクラスの作成
- draw()の実装
-
#10 マウスでパドルを動かそう (02:51)
- イベントリスナーの設定
- e.clientX
- getBoundingClientRect()
-
#11 ボールを跳ね返す条件を理解しよう (02:34)
- ボールが跳ね返るときの条件
- ボールを跳ね返すときの処理
-
#12 パドルでボールを跳ね返そう (02:45)
- ボールが跳ね返るときの条件
- 定数の定義
-
#13 ボールの動きを制御しよう (01:30)
- bounce()の実装
- reposition()の実装
-
#14 ゲームオーバー処理を実装しよう (02:08)
- ゲームの状態管理
- drawGameOver()の実装
-
#15 ゲームオーバー処理を完成させよう (01:30)
- ボールの状態管理
- getMissedStatus()の実装
-
#16 スコアが加算されるようにしよう (02:42)
- drawScore()の実装
- addScore()の実装
