JavaScript で検索した結果 - プログラミングならドットインストール

完成版を確認したあとに必要なファイルを作っていきます。

Canvasを配置したあとにスタイルを整えていきます。

update()とdraw()を定義したあとに、requestAnimationFrame()を使ってゲームループを実装していきます。

GameクラスでBallのインスタンスを作ったあとに、Ballクラスを定義して描画処理を実装していきます。

Ballクラスのupdate()を実装してボールを動かしていきます。

ボールが壁に当たったら跳ね返るように実装していきます。

ボールの生成される位置や速度をランダムにするための関数を作っていきます。

GameクラスでPaddleのインスタンスを作ったあとに、Paddleクラスを定義して描画処理を実装していきます。

clientXの値を使ってPaddleを動かせるようにしていきます。

パドルがボールを跳ね返す際の条件について図で解説していきます。

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