ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/03/24
NEW
『Nuxt入門 基礎編』をリリースしました
2025/03/20
NEW
【週刊ドットインストール】 レッスン制作の進捗、社内開発のススメ
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
【旧版】HTML5で作るピンポンゲーム
HTML5 CanvasとJavaScriptを使ってピンポンゲームを作る方法を説明していきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでピンポンゲームを作ろう
Canvasを使って、シンプルなピンポンゲームを作る方法について見ていきます。
0%
動画レッスン一覧
(11)
質問と回答
(2)
#01 ピンポンゲームを作ろう
(02:41)
無料公開中
完成版の確認
必要となる知識
index.htmlの作成
未完了
#02 画面を作りこんでいこう
(02:42)
無料公開中
スタイルの作成
画面の確認
未完了
#03 Canvasを使えるようにしよう
(02:44)
無料公開中
jQueryの導入
Canvasの準備
パドルオブジェクトの作成
未完了
#04 パドルを描いてみよう
(02:44)
パドルの描画
画面の確認
未完了
#05 パドルを動かせるようにしよう
(03:02)
マウス座標の取得
マウスによるパドル移動処理
未完了
#06 ボールを動かしてみよう
(02:57)
ボールオブジェクトの作成
未完了
#07 壁にあたった時の処理を作ろう
(02:33)
壁との衝突判定
未完了
#08 パドルとの衝突判定をしよう
(02:51)
パドルとの衝突判定
未完了
#09 スコア管理をしてみよう
(02:58)
スコア管理
ラベルオブジェクトの作成
未完了
#10 リプレイ処理を作ってみよう
(02:53)
ボタンの動作設定
リプレイ処理
未完了
#11 乱数でゲーム性を高めてみよう
(02:25)
乱数の利用
動作確認
未完了
#08 パドルとの衝突判定をしよう
パドルとボールの衝突判定について
2022年1月27日
if文の中の条件は両方必要ですか?
2022年1月27日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2014年3月17日
バージョン情報
HTML5