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

bubudoufu

3年前

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

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

概要
ゲーム画面の生成
ゲームのメイン処理

概要

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

ゲーム画面の生成

const x = 5; // 横のマスの数
const y = 5; // 縦のマスの数
let score = 0; // 点数
let viewScore = document.querySelector(".score"); // 点数表示
const main = document.getElementById("main");
const modal = document.getElementById("modal");
const button = document.querySelector(".button");
// スタートボタンが押された時の処理
button.addEventListener("click", () => {
  modal.setAttribute("class", "hidden2");
  main.setAttribute("class", "main");
  init();
});
// ゲーム画面生成
function init() {
  const table = document.querySelector("table");
  let id = 0;
  for (let i = 0; i < y; i++) {
    let tr = document.createElement("tr");
    for (let j = 0; j < x; j++) {
      let td = document.createElement("td");
      td.classList.add("hidden");
      td.id = id;
      id++;
      // パネルをクリックした時の処理
      td.addEventListener("click", () => {
        if (td.className === "visible") {
          td.setAttribute("class", "hidden");
          score += 2;
          viewScore.textContent = `SCORE: ${score}`;
          return;
        }
        if (td.className === "visible2") {
          td.setAttribute("class", "hidden");
          score++;
          viewScore.textContent = `SCORE: ${score}`;
          return;
        }
        if (td.className === "visible3") {
          td.setAttribute("class", "hidden");
          score--;
          viewScore.textContent = `SCORE: ${score}`;
          return;
        }
      });
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  mainLoop();
}

const x = 5; // 横のマスの数

const y = 5; // 縦のマスの数

let score = 0; // 点数

let viewScore = document.querySelector(".score"); // 点数表示

const main = document.getElementById("main");

const modal = document.getElementById("modal");

const button = document.querySelector(".button");

// スタートボタンが押された時の処理

button.addEventListener("click", () => {

modal.setAttribute("class", "hidden2");

main.setAttribute("class", "main");

init();

});

// ゲーム画面生成

function init() {

const table = document.querySelector("table");

let id = 0;

for (let i = 0; i < y; i++) {

let tr = document.createElement("tr");

for (let j = 0; j < x; j++) {

let td = document.createElement("td");

td.classList.add("hidden");

td.id = id;

id++;

// パネルをクリックした時の処理

td.addEventListener("click", () => {

if (td.className === "visible") {

td.setAttribute("class", "hidden");

score += 2;

viewScore.textContent = `SCORE: ${score}`;

return;

}

if (td.className === "visible2") {

td.setAttribute("class", "hidden");

score++;

viewScore.textContent = `SCORE: ${score}`;

return;

}

if (td.className === "visible3") {

td.setAttribute("class", "hidden");

score--;

viewScore.textContent = `SCORE: ${score}`;

return;

}

});

tr.appendChild(td);

}

table.appendChild(tr);

}

mainLoop();

}

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

ゲームのメイン処理

function mainLoop() {
  // カウントダウンタイマー
  let time = document.querySelector("h2");
  let cnt = 10;
  // 10秒たったらすべての処理を止める
  let timer = setInterval(() => {
    time.textContent = `TIME: ${cnt}`;
    cnt--;
    if (cnt < 0) {
      document.querySelector("table").style.pointerEvents = "none";
      clearInterval(timer);
      clearInterval(shwoPanel);
      time.textContent = "RETRY";
      time.style =
        "background: rgba(0, 0, 0, 0.4);color:black;width: 200px;border-radius: 8px;";
      time.addEventListener("click", () => {
        document.location.reload();
      });
    }
  }, 1000);
  // パネルをランダムに表示させる
  let shwoPanel = setInterval(() => {
    const n = Math.random();
    let id = Math.floor(Math.random() * (x * y));
    let panel = document.getElementById(id);
    if (panel.className === "hidden") {
      // 確率10%でピンクパネル
      if (n < 0.1) {
        // visibleクラスを付けてピンクパネルを表示
        panel.setAttribute("class", "visible");
        // hiddenクラスを付けてパネル非表示
        // 第二引数にパネルを非表示にするまでの時間をミリ秒で設定
        setTimeout(() => {
          panel.setAttribute("class", "hidden");
        }, 1000);
      }
      // 確率30%でブルーパネル
      else if (n < 0.4) {
        panel.setAttribute("class", "visible2");
        setTimeout(() => {
          panel.setAttribute("class", "hidden");
        }, 1500);
      }
      // 確率60%でブラックパネル
      else {
        panel.setAttribute("class", "visible3");
        setTimeout(() => {
          panel.setAttribute("class", "hidden");
        }, 2000);
      }
    }
  }, 250);
}

function mainLoop() {

// カウントダウンタイマー

let time = document.querySelector("h2");

let cnt = 10;

// 10秒たったらすべての処理を止める

let timer = setInterval(() => {

time.textContent = `TIME: ${cnt}`;

cnt--;

if (cnt < 0) {

document.querySelector("table").style.pointerEvents = "none";

clearInterval(timer);

clearInterval(shwoPanel);

time.textContent = "RETRY";

time.style =

"background: rgba(0, 0, 0, 0.4);color:black;width: 200px;border-radius: 8px;";

time.addEventListener("click", () => {

document.location.reload();

});

}

}, 1000);

// パネルをランダムに表示させる

let shwoPanel = setInterval(() => {

const n = Math.random();

let id = Math.floor(Math.random() * (x * y));

let panel = document.getElementById(id);

if (panel.className === "hidden") {

// 確率10%でピンクパネル

if (n < 0.1) {

// visibleクラスを付けてピンクパネルを表示

panel.setAttribute("class", "visible");

// hiddenクラスを付けてパネル非表示

// 第二引数にパネルを非表示にするまでの時間をミリ秒で設定

setTimeout(() => {

panel.setAttribute("class", "hidden");

}, 1000);

}

// 確率30%でブルーパネル

else if (n < 0.4) {

panel.setAttribute("class", "visible2");

setTimeout(() => {

panel.setAttribute("class", "hidden");

}, 1500);

}

// 確率60%でブラックパネル

else {

panel.setAttribute("class", "visible3");

setTimeout(() => {

panel.setAttribute("class", "hidden");

}, 2000);

}

}, 250);

}

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

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