JavaScriptで虫取りゲームを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

今回で、いよいよ最後の講義です。

実装するもの

今回は、虫取りゲームを作成します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

画像は、pingimg.comから取得しています。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

要素を取得

最初に、画面操作に必要な要素を取得します。

プロパティを定義

プログラム全体で使用するプロパティを定義します。

Play Gameイベントの登録

Play Gameボタンを押下した時に、clickイベントを発火するようにします。

虫選択イベントの登録

虫選択時にclickイベントを発火するようにします。

このイベントが発火したら、以下の処理を実行します。

  • インセクト情報を取得
  • 虫の増加処理を1秒後に停止
  • ゲームの開始

虫作成処理

次は、虫を作成する処理を実装します。

虫の表示ポジション

次は、虫の表示ポジションを取得する処理を実装します。

虫をキャッチ

次は、虫を捕まえる処理を実装します。

画面上の虫は、CSSスタイルのcaughtクラスを付与すれば消すことができます。

スコア追加

虫を捕まえたらスコアを追加する処理を実装しましょう。

虫の追加

虫を捕まえたら画面上に新しい虫を追加します。

ゲーム開始処理

最後に、ゲーム開始処理を実装します。

これで完成です。

おわりに

本記事で「50 Projects In 50 Days – HTML, CSS & JavaScript」の講義は以上です。50日間の学習で、だいぶJavaScriptの実装に慣れたと思います。

次は、CSSを勉強したいですね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す