Super Ultimate Mole Whacker's game

Click here for free DL of the app version that can save data.

No:940

295

←

Prev Next

→

Super Ultimate Mole Whacker
Developer User3198｜Date and time 23/6/17 22:53:11
Build time 42.928 sec｜Game capacity 3.945KB｜

Script

[概要] このアプリは、「スーパーアルティメットモグラ叩き」という名前のゲームです。制限時間内に現れるモグラを叩いて得点を稼ぎます。モグラはランダムに穴から現れるため、素早い反射が必要となります。得点と残り時間を表示し、スタートボタンでゲームを開始します。スマートフォンでも遊べるように、ボタンやテキストサイズは大きめに設定されています。絵文字も多用して、かわいい雰囲気を出しています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>スーパーアルティメットモグラ叩き</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #444;
    }
    #board {
      width: 80vw;
      height: 80vw;
      background-color: #ddd;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      box-shadow: 0 0 10px #000;
    }
    .hole {
      width: 22%;
      height: 22%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 5vw;
    }
    .hole.active {
      background-color: #27ae60;
      color: #fff;
      cursor: pointer;
    }
    .hole.hit {
      background-color: #c0392b;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="board"></div>

let timeLimit = 30;
    let score = 0;
    let isActive = false;

scoreBoard.style.marginRight = '20px';
    scoreText.textContent = '得点: 0';
    scoreText.style.fontSize = '5vw';
    timeText.textContent = `残り時間: ${timeLimit}`;
    timeText.style.fontSize = '5vw';
    btn.textContent = 'スタート！';
    btn.style.fontSize = '5vw';

scoreBoard.appendChild(scoreText);
    timeBoard.appendChild(timeText);
    document.body.appendChild(scoreBoard);
    document.body.appendChild(timeBoard);
    document.body.appendChild(btn);

function randomTime(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    }

function randomHole(holes) {
      const idx = Math.floor(Math.random() * holes.length);
      const hole = holes[idx];
      if (hole === lastHole) {
        return randomHole(holes);
      }
      lastHole = hole;
      return hole;
    }

function startGame() {
      isActive = true;
      score = 0;
      timeLimit = 30;
      scoreText.textContent = '得点: 0';
      timeText.textContent = `残り時間: ${timeLimit}`;
      btn.disabled = true;
      peep();

setTimeout(() => {
        isActive = false;
        btn.disabled = false;
        scoreText.textContent = `得点: ${score}`;
        timeText.textContent = 'ゲームオーバー';
        holes.forEach(hole => hole.classList.remove('active'));
      }, timeLimit * 1000);
    }

holes.forEach(hole => hole.addEventListener('click', bonk));
    btn.addEventListener('click', startGame);
  </script>
</body>
</html>

[概要]
このアプリは、「スーパーアルティメットモグラ叩き」という名前のゲームです。制限時間内に現れるモグラを叩いて得点を稼ぎます。モグラはランダムに穴から現れるため、素早い反射が必要となります。得点と残り時間を表示し、スタートボタンでゲームを開始します。スマートフォンでも遊べるように、ボタンやテキストサイズは大きめに設定されています。絵文字も多用して、かわいい雰囲気を出しています。