AI game creator

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

No:13699

←

Prev Next

→

植物大僵尸。
Developer User5997｜Date and time 23/8/29 13:23:24
Build time 32.135 sec｜Game capacity 6.148KB｜

Script

植物大僵尸游戏代码如下：

得分: 0

此为基本的植物大僵尸游戏代码，通过点击“豌豆射手”植物来射击僵尸，每命中一个僵尸得分加一，僵尸靠近到植物时游戏结束。在手机上运行此代码可以玩到一个简单的植物大僵尸游戏。

←

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 {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f3f3f3;
      font-family: Arial, sans-serif;
    }
    #game-container {
      width: 320px;
      height: 480px;
      background-color: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      border-radius: 4px;
      overflow: hidden;
    }
    #scoreboard {
      text-align: center;
      padding: 10px;
      background-color: #f1f1f1;
      font-size: 18px;
    }
    #play-area {
      position: relative;
      width: 100%;
      height: 360px;
      background-color: #d6f5d6;
    }
    #plants {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .plant {
      width: 50px;
      height: 50px;
      margin: 0 5px;
      background-color: #d6f5d6;
      cursor: pointer;
      transition: transform 0.15s;
    }
    .plant:hover {
      transform: scale(1.1);
    }
    .zombie {
      position: absolute;
      bottom: 10px;
      width: 50px;
      height: 70px;
      background-color: #f2cc93;
      border-radius: 50%;
      z-index: 1;
    }
    .bullet {
      position: absolute;
      width: 15px;
      height: 15px;
      background-color: #5dbb63;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="scoreboard">得分: <span id="score">0</span></div>
    <div id="play-area"></div>
    <div id="plants">
      <div class="plant" id="peashooter"></div>
      <div class="plant" id="sunflower"></div>
    </div>
  </div>

// 开始游戏
    function startGame() {
      intervalId = setInterval(spawnZombie, 1500); // 每隔1.5秒生成一个僵尸
    }

// 游戏结束
    function endGame() {
      isGameOver = true;
      clearInterval(intervalId);
      alert('游戏结束！得分：' + score);
    }

// 生成僵尸
    function spawnZombie() {
      if (isGameOver) return;
      var zombie = document.createElement('div');
      zombie.className = 'zombie';
      zombie.style.left = '350px';
      document.getElementById('play-area').appendChild(zombie);
      zombies.push(zombie);

moveZombies(); // 启动僵尸移动
    }

// 移动僵尸
    function moveZombies() {
      if (isGameOver) return;

for (var i = 0; i < zombies.length; i++) {
        var zombie = zombies[i];
        var zombieLeft = zombie.offsetLeft;
        var plants = document.getElementsByClassName('plant');
        var closestPlant = null;
        var closestDistance = Infinity;

// 找到最近的植物
        for (var j = 0; j < plants.length; j++) {
          var plant = plants[j];
          var plantLeft = plant.offsetLeft;
          var distance = zombieLeft - plantLeft;

if (distance >= 0 && distance < closestDistance) {
            closestPlant = plant;
            closestDistance = distance;
          }
        }

// 僵尸移动
        if (closestPlant) {
          var zombieMove = setInterval(function() {
            if (isGameOver) {
              clearInterval(zombieMove);
              return;
            }

var plantLeft = closestPlant.offsetLeft;
            var distance = zombie.offsetLeft - plantLeft;

if (distance <= 50) {
              clearInterval(zombieMove);
              gameOver();
            } else {
              zombie.style.left = parseInt(zombie.style.left) - 1 + 'px';
            }
          }, 20);
        } else {
          zombie.style.left = parseInt(zombie.style.left) - 1 + 'px';
        }
      }
    }

// 射击植物
    function shootPlant(target) {
      var bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = '50px';
      bullet.style.top = target.offsetTop + 20 + 'px';
      document.getElementById('play-area').appendChild(bullet);

// 子弹移动
      var bulletMove = setInterval(function() {
        if (isGameOver) {
          clearInterval(bulletMove);
          return;
        }

bullet.style.left = parseInt(bullet.style.left) + 3 + 'px';

// 判断是否命中僵尸
        for (var i = 0; i < zombies.length; i++) {
          var zombie = zombies[i];
          var bulletLeft = bullet.offsetLeft;
          var bulletTop = bullet.offsetTop;
          var zombieLeft = zombie.offsetLeft;
          var zombieTop = zombie.offsetTop;

if (
            bulletLeft >= zombieLeft && bulletLeft <= zombieLeft + 50 &&
            bulletTop >= zombieTop && bulletTop <= zombieTop + 70
          ) {
            // 命中僵尸
            clearInterval(bulletMove);
            document.getElementById('play-area').removeChild(bullet);
            document.getElementById('play-area').removeChild(zombie);
            zombies.splice(i, 1);
            score++;
            document.getElementById('score').innerText = score;
          }
        }

// 移除飞出界面的子弹
        if (bullet.offsetLeft >= 370) {
          clearInterval(bulletMove);
          document.getElementById('play-area').removeChild(bullet);
        }
      }, 10);
    }

// 监听点击事件
    document.addEventListener('click', function(event) {
      if (isGameOver) return;
      var target = event.target;

if (target.id === 'peashooter') {
        shootPlant(target);
      } else if (target.id === 'sunflower') {
        // 点击向日葵，暂无功能
      }
    });

// 开始游戏
    startGame();
  </script>
</body>
</html>
```