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

JavaScript
スポンサーリンク

本記事では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

 

コメント