ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2021/02/19
NEW
今週は『PHPでTodo管理アプリを作ろう 非同期通信編』をリリースしました。
2021/02/03
NEW
ブラウザだけで学べる『マークダウン記法入門』をリリースしました。
PREMIUM
JavaScriptでピンポンゲームを作ろう
Canvasを使って、シンプルなピンポンゲームを作る方法について見ていきます。
0%
動画レッスン一覧
(16)
質問と回答
(6)
未完了
#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()の実装
#03 Gameクラスを作っていこう
即時関数を使うメリットを教えてください
2021年3月26日
#07 ボールを跳ね返してみよう
vx, vyの意味がわかりません
2021年2月10日
#09 Paddleクラスを作っていこう
this.ctx.beginPath() が必要なのはどういう場合ですか?
2021年1月12日
#14 ゲームオーバー処理を実装しよう
returnを書く場合と書かない場合の違いを教えて下さい
2020年12月3日
#16 スコアが加算されるようにしよう
addScore()が呼び出されるまでの挙動がわかりません
2020年12月18日
addScoreメソッドをPaddleではなく、Ballクラスで呼び出しても良いですか?
2020年12月18日
ギャラリー
このレッスンについて
最終更新日
2020年11月5日
バージョン情報
Chrome86.0 / Visual Studio Code 1.50.1
関連キーワード
(5)
基礎講座
(324)
初心者向け
(323)
HTML
(83)
JavaScript (ES2017)
(35)
ゲームプログラミング
(46)
このレッスンを共有する