ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/03/24
NEW
『Nuxt入門 基礎編』をリリースしました
2025/03/20
NEW
【週刊ドットインストール】 レッスン制作の進捗、社内開発のススメ
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
JavaScriptでピンポンゲームを作ろう
Canvasを使って、シンプルなピンポンゲームを作る方法について見ていきます。
0%
動画レッスン一覧
(16)
質問と回答
(12)
#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クラスを作っていこう
即時関数を使うメリットを教えてください
2022年1月27日
#04 ゲームループを実装しよう
引数の関数をアロー関数とした場合と、関数そのものを渡した場合の違いはなんですか?
2022年1月27日
#06 ボールを動かしてみよう
clearRect() を Ball クラスに書いても問題ありませんか?
2022年6月10日
#07 ボールを跳ね返してみよう
vx, vyの意味がわかりません
2022年1月27日
#09 Paddleクラスを作っていこう
this.ctx.beginPath() が必要なのはどういう場合ですか?
2022年1月27日
#10 マウスでパドルを動かそう
this.x と this.mouseX と e.clientX の関係性について教えてください
2024年8月20日
-(this.w / 2) の意味が分かりません
2022年8月23日
#12 パドルでボールを跳ね返そう
別クラスのプロパティにアクセスする際は、メソッドを使うのが一般的ですか?
2022年2月28日
#13 ボールの動きを制御しよう
なぜメソッド内で定義されている定数が別クラスのメソッドで使えるのですか?
2022年3月2日
#14 ゲームオーバー処理を実装しよう
returnを書く場合と書かない場合の違いを教えて下さい
2022年1月27日
#16 スコアが加算されるようにしよう
addScore()が呼び出されるまでの挙動がわかりません
2022年1月27日
addScoreメソッドをPaddleではなく、Ballクラスで呼び出しても良いですか?
2022年1月27日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2020年11月5日
バージョン情報
Chrome86.0 / Visual Studio Code 1.50.1