本記事ではGoogle Chrome の恐竜ゲームの作り方について紹介しています。
JavaScriptを使っっています。
↓YouTubeに動画もあります。
【ダイジェスト版】JavaScriptでGoogle Chromeの恐竜ゲームを作る
Google Chrome の恐竜ゲームの作り方
DEMO
こちらが完成品です。(音声なしバージョン)
キーボードの「↑」を押して恐竜をジャンプさせることができます。
爆弾をジャンプして飛び越え、その爆弾が画面から外れる度にスコアが1ずつプラスされます。
ジャンプをした際には音が出るようにし、爆弾と恐竜が当たった時にも効果音が鳴るようにしました。
そして、爆弾に当たった時はゲームが止まります。
HTMLを書く
始めに以下のHTMLを書きます。
同じディレクトリ内に “dino.png”という恐竜の画像、”back.jpg”という背景写真、”bomb.png”という爆弾の画像を用意します。
JavaScript を書く
次にJavaScriptファイルを書きます。
“index.js”、”dino.js”という恐竜についてファイル、 “bomb.js” という爆弾についてのファイルと “input.js” というファイルを書きます。
Dinoクラスのコンストラクタに恐竜についての情報を書き、update() に恐竜を動かす動作について、draw() には描画について書きます。
恐竜ファイルと同様、Bomb クラスを作成し、コンストラクタには爆弾についての情報を書き、update() で爆弾が画面右から左へと流れるようにしています。
draw()関数で描画を行っています。
“input.js” にはキーボードが押されたときの動作について書いてあります。

以上、Google Chrome の恐竜ゲームについてのプログラムでした。
参考にさせていただいたコード
The Coding TrainのCC_147_Chrome_Dinosaur_Game
コメント