このページではソースコードの一部分を簡単な解説をしています。
作成したゲームはコチラから
ソースコードはgithubにあります
概要
画面をクリックするとゲームが開始されます。丸い青の円が縮小して消えるまでに何回連打できたかを競うゲームです。ランキング機能も実装していて、３位までに入るとランキングに登録することが出来ます。
ランキング機能実装関連の記事は↓にあります。
クリック回数を取得・保持・表示する
// パソコンかスマートフォンか判定
const eventType = window.ontouchstart !== null ? "click" : "touchstart";
const countDisplay = document.querySelector(".countDisplay");
let count = 0;
const addCount = function () {
// クリックをカウント・表示
count++;
countDisplay.textContent = count;
};
const body = document.querySelector("body");
body.addEventListener(eventType, addCount);body要素にaddEventListenerを使用して、クリックイベントを取得し、変数countでクリック回数を保持をしています。HTMLの表示にはtextContentプロパティへ変数countの値を代入して表示させています。
