Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
HTMLとCSSとJavaScriptを使ってモグラたたき風ゲームを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

HTMLとCSSとJavaScriptを使ってモグラたたき風ゲームを作ってみる

このページではソースコードの一部分を簡単な解説をしています。

作成したゲームはコチラから
ソースコードはgithubにあります

スポンサーリンク

概要

ランダムに現れるパネルをクリックして消していくモグラたたき風ゲームを作ってみました。パネルの色別に得点が決まっていて、ピンクは2点、青は1点、黒はマイナス1点となっています。制限時間10秒で得点を争うゲームです。

ゲーム画面の生成

javascriptのDOM操作を使いゲーム画面を描画しています。スタート画面とゲーム画面の切り替えは、setAttributeメソッドを使用してクラスを切り替えCSSで表示・非表示させています。addEventListenerメソッドでパネルをクリックした時の処理をしています。

ゲームのメイン処理

setIntervalメソッドを使用してカウントダウンタイマーを作成して10秒たつとすべての処理を停止させています。ランダムに現れるパネルは得点が高い順に現れる確率を低くし、setTimeoutメソッドを使いパネルが消える時間も得点が高いパネルほど短くなっています。パネルの表示・非表示はsetAttributeメソッドを使用してクラスを切り替えCSSで操作しています。

最後までお読みいただきありがとうございました。

モバイルバージョンを終了