JavaScript で Google Chrome の恐竜ゲームを作る

JavaScript

2019.11.172019.09.27

本記事ではGoogle Chrome の恐竜ゲームの作り方について紹介しています。

JavaScriptを使っっています。

↓YouTubeに動画もあります。

【ダイジェスト版】JavaScriptでGoogle Chromeの恐竜ゲームを作る

Google Chrome の恐竜ゲームの作り方

こちらが完成品です。（音声なしバージョン）

キーボードの「↑」を押して恐竜をジャンプさせることができます。

爆弾をジャンプして飛び越え、その爆弾が画面から外れる度にスコアが１ずつプラスされます。

ジャンプをした際には音が出るようにし、爆弾と恐竜が当たった時にも効果音が鳴るようにしました。

そして、爆弾に当たった時はゲームが止まります。

始めに以下のHTMLを書きます。

同じディレクトリ内に “dino.png”という恐竜の画像、”back.jpg”という背景写真、”bomb.png”という爆弾の画像を用意します。

次にJavaScriptファイルを書きます。

“index.js”、”dino.js”という恐竜についてファイル、 “bomb.js” という爆弾についてのファイルと “input.js” というファイルを書きます。

Dinoクラスのコンストラクタに恐竜についての情報を書き、update() に恐竜を動かす動作について、draw() には描画について書きます。

恐竜ファイルと同様、Bomb クラスを作成し、コンストラクタには爆弾についての情報を書き、update() で爆弾が画面右から左へと流れるようにしています。

draw()関数で描画を行っています。

“input.js” にはキーボードが押されたときの動作について書いてあります。

以上、Google Chrome の恐竜ゲームについてのプログラムでした。