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

No:9612

←

Prev Next

→

Zombie Games
Developer User4392｜Date and time 23/7/26 17:19:09
Build time 47.552 sec｜Game capacity 5.147KB｜

Script

了解しました。以下はスマートフォンで遊べる簡単なゾンビゲームの例です。

ゾンビゲーム

ゾンビを倒せ！

このHTMLファイルをブラウザ上で開くと、スタートボタンが表示されます。スタートボタンを押すと、ゾンビが出現し始め、残り時間とスコアが表示されます。ゾンビをクリックするとスコアが加算され、一定の時間が経つと次のゾンビが出現します。制限時間内でゾンビを倒し尽くすことが目標です。ゲーム終了後はスコアが表示されます。 ※ このコードはスマホでも動作するようにレスポンシブデザインを施していますが、表示によってはスタイリングが崩れる場合がありますので、必要に応じて調整してください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました。以下はスマートフォンで遊べる簡単なゾンビゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ゾンビゲーム</title>
  <style>
    body {
      text-align: center;
      font-size: 20px;
    }
    
    #game-container {
      display: none;
    }
    
    #start-button {
      font-size: 30px;
      padding: 10px 20px;
    }
    
    #countdown {
      font-size: 40px;
      margin: 20px 0;
    }
    
    .zombie {
      font-size: 50px;
      margin: 10px;
      cursor: pointer;
    }
    
    .score {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="welcome-container">
    <h1>ゾンビゲーム</h1>
    <button id="start-button">スタート</button>
  </div>
  
  <div id="game-container">
    <h2>ゾンビを倒せ！</h2>
    <p id="countdown"></p>
    <p id="score" class="score"></p>
    <div id="zombie-container"></div>
  </div>

let score = 0; // スコア
    let timeLeft = TOTAL_TIME; // 残り時間
    let gameTimerId; // タイマーのID
    let countdownTimerId; // カウントダウンタイマーのID

// ページのロード時の処理
    window.addEventListener('load', () => {
      const startButton = document.getElementById('start-button');
      const welcomeContainer = document.getElementById('welcome-container');
      const gameContainer = document.getElementById('game-container');
      const countdownElement = document.getElementById('countdown');
      const zombieContainer = document.getElementById('zombie-container');
      const scoreElement = document.getElementById('score');

// スタートボタンがクリックされた時の処理
      startButton.addEventListener('click', () => {
        welcomeContainer.style.display = 'none';
        gameContainer.style.display = 'block';
        countdownElement.textContent = TOTAL_TIME;

// ゾンビの表示
        for (let i = 0; i < ZOMBIE_COUNT; i++) {
          const zombie = document.createElement('span');
          zombie.classList.add('zombie');
          zombie.textContent = '🧟';
          zombie.addEventListener('click', () => {
            // ゾンビが倒された時の処理
            score++;
            scoreElement.textContent = `スコア: ${score}`;
            zombie.style.display = 'none';
          });
          zombieContainer.appendChild(zombie);
        }

// カウントダウンの開始
        countdown(countdownElement, () => {
          // ゲーム終了時の処理
          gameContainer.style.display = 'none';
          alert(`ゲーム終了！スコア: ${score}`);
          resetGame();
        });

// ゲームの開始
        startGame();
      });
    });

// カウントダウンの処理
    function countdown(element, callback) {
      countdownTimerId = setInterval(() => {
        timeLeft--;
        element.textContent = timeLeft;

// 指定時間が経過したら終了
        if (timeLeft === 0) {
          clearInterval(countdownTimerId);
          callback();
        }
      }, 1000);
    }

// ゲームの開始処理
    function startGame() {
      score = 0;
      timeLeft = TOTAL_TIME;
      gameTimerId = setInterval(spawnZombie, 1000);
    }

// ゾンビの表示処理
    function spawnZombie() {
      const zombies = document.getElementsByClassName('zombie');
      const visibleZombies = Array.from(zombies).filter(zombie => zombie.style.display !== 'none');
      
      if (visibleZombies.length === 0) {
        clearInterval(gameTimerId);
        alert('ゾンビを倒し尽くしました！');
        resetGame();
      } else {
        const randomIndex = Math.floor(Math.random() * visibleZombies.length);
        const zombie = visibleZombies[randomIndex];
        zombie.style.display = 'block';
      }
    }

// ゲームのリセット処理
    function resetGame() {
      const zombieContainer = document.getElementById('zombie-container');
      const scoreElement = document.getElementById('score');
      clearInterval(gameTimerId);
      clearInterval(countdownTimerId);
      scoreElement.textContent = '';
      zombieContainer.innerHTML = '';
    }
  </script>
</body>
</html>
```

※ このコードはスマホでも動作するようにレスポンシブデザインを施していますが、表示によってはスタイリングが崩れる場合がありますので、必要に応じて調整してください。