HTMLとCSSとJavaScriptを使って連打回数測定ゲームを作ってみる

bubudoufu

3年前

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

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

概要
クリック回数を取得・保持・表示する

概要

画面をクリックするとゲームが開始されます。丸い青の円が縮小して消えるまでに何回連打できたかを競うゲームです。ランキング機能も実装していて、３位までに入るとランキングに登録することが出来ます。

ランキング機能実装関連の記事は↓にあります。

PHPとSqliteとJavaScriptを使ってランキング機能を実装してみる１

サンプルのソースコードはgithubにあります。概要過去に制作したゲームの一部に上位3位までを表示するランキング機能を実装してみました。↓のゲームは３秒間にクリックした回数を競うゲームです。３位までに入るとランキングに登録することが出来ま...

クリック回数を取得・保持・表示する

// パソコンかスマートフォンか判定
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);

// パソコンかスマートフォンか判定

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の値を代入して表示させています。

作成したゲームはコチラから
ソースコードはgithubにあります
最後までお読みいただきありがとうございました。