打开/关闭搜索
打开/关闭菜单
933
1525
112
1.4万
植物大战僵尸杂交版Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

微件:ZombieGame：修订间差异

来自植物大战僵尸杂交版Wiki
更多操作
创建页面，内容为“<includeonly> <style> .zombie-game { position: relative; width: 100%; max-width: 600px; height: 250px; background: #5a8f4a; border: 4px solid #3a5c2f; border-radius: 12px; overflow: hidden; margin: 20px auto; cursor: pointer; user-select: none; touch-action: manipulation; } .zombie-game .nut { position: absolute; bottom: 20px; left: 50px; width: 50px; height: 60px; background: #8B4513;…”
 
无编辑摘要
 
第1行： 第1行：
<includeonly>
<includeonly>
<style>
<style>
.zombie-game {
.shooter-game {
     position: relative;
     position: relative;
     width: 100%;
     width: 100%;
     max-width: 600px;
     max-width: 700px;
     height: 250px;
     height: 350px;
     background: #5a8f4a;
     background: linear-gradient(180deg, #87CEEB 0%, #87CEEB 60%, #5a8f4a 60%, #5a8f4a 100%);
     border: 4px solid #3a5c2f;
     border: 4px solid #3a5c2f;
     border-radius: 12px;
     border-radius: 12px;
     overflow: hidden;
     overflow: hidden;
     margin: 20px auto;
     margin: 20px auto;
     cursor: pointer;
     cursor: crosshair;
     user-select: none;
     user-select: none;
     touch-action: manipulation;
     touch-action: manipulation;
}
}
.zombie-game .nut {
.shooter-game .plant {
     position: absolute;
     position: absolute;
     bottom: 20px;
     bottom: 15px;
     left: 50px;
     left: 30px;
     width: 50px;
     width: 70px;
     height: 60px;
     height: 70px;
     background: #8B4513;
}
     border-radius: 10px 10px 0 0;
.shooter-game .plant img {
     transition: top 0.15s;
     width: 100%;
     display: flex;
     height: 100%;
     align-items: center;
}
     justify-content: center;
.shooter-game .zombie {
     font-size: 30px;
     position: absolute;
     bottom: 15px;
     width: 55px;
     height: 70px;
     transition: left 0.1s linear;
}
}
.zombie-game .nut.jumping {
.shooter-game .zombie img {
     bottom: 80px;
     width: 100%;
    height: 100%;
}
}
.zombie-game .zombie {
.shooter-game .bullet {
     position: absolute;
     position: absolute;
    bottom: 20px;
     width: 12px;
    right: -50px;
     height: 12px;
     width: 40px;
     background: #4CAF50;
     height: 60px;
     border-radius: 50%;
     background: #4a4a4a;
     pointer-events: none;
     border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
     font-size: 30px;
}
}
.zombie-game .score {
.shooter-game .score {
     position: absolute;
     position: absolute;
     top: 10px;
     top: 10px;
     right: 15px;
     right: 15px;
     font-size: 18px;
     font-size: 20px;
     font-weight: bold;
     font-weight: bold;
     color: #fff;
     color: #fff;
     text-shadow: 1px 1px 2px #000;
     text-shadow: 2px 2px 2px #000;
}
}
.zombie-game .game-over {
.shooter-game .game-over {
     position: absolute;
     position: absolute;
     top: 50%;
     top: 50%;
     left: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     font-size: 28px;
     font-size: 30px;
     font-weight: bold;
     font-weight: bold;
     color: #fff;
     color: #fff;
     text-shadow: 2px 2px 4px #000;
     text-shadow: 3px 3px 6px #000;
     display: none;
     display: none;
     text-align: center;
     text-align: center;
     line-height: 1.5;
     line-height: 1.6;
    z-index: 10;
}
}
.zombie-game .restart-btn {
.shooter-game .restart-btn {
     display: block;
     display: block;
     margin: 10px auto;
     margin: 10px auto;
     padding: 8px 20px;
     padding: 10px 24px;
     font-size: 16px;
     font-size: 18px;
     background: #f44336;
     background: #f44336;
     color: #fff;
     color: #fff;
第77行： 第78行：
     border-radius: 8px;
     border-radius: 8px;
     cursor: pointer;
     cursor: pointer;
}
@media screen and (max-width: 500px) {
    .shooter-game { height: 280px; }
    .shooter-game .plant { width: 55px; height: 55px; left: 15px; bottom: 10px; }
    .shooter-game .zombie { width: 42px; height: 55px; bottom: 10px; }
}
}
</style>
</style>


<div class="zombie-game" id="zombie-game">
<div class="shooter-game" id="shooter-game">
     <div class="nut" id="nut">🌰</div>
     <div class="plant"><img src="https://new.pvzhe.wiki/images/c/ce/%E8%B1%8C%E8%B1%86%E5%B0%84%E6%89%8B.png" alt="豌豆射手"></div>
     <div class="score" id="score">0 分</div>
     <div class="score" id="shooter-score">0 分</div>
     <div class="game-over" id="game-over">
     <div class="game-over" id="shooter-game-over">
         💀 游戏结束<br>
         💀 僵尸入侵！<br>
         <span style="font-size:16px;">得分: <span id="final-score">0</span></span>
         <span style="font-size:18px;">得分: <span id="shooter-final-score">0</span></span>
         <br><button class="restart-btn" id="restart-btn">再来一局</button>
         <br><button class="restart-btn" id="shooter-restart">再来一局</button>
     </div>
     </div>
</div>
</div>
第92行： 第98行：
<script>
<script>
(function() {
(function() {
     var game = document.getElementById('zombie-game');
     var game = document.getElementById('shooter-game');
    var nut = document.getElementById('nut');
     var scoreEl = document.getElementById('shooter-score');
     var scoreEl = document.getElementById('score');
     var gameOverEl = document.getElementById('shooter-game-over');
     var gameOverEl = document.getElementById('game-over');
     var finalScoreEl = document.getElementById('shooter-final-score');
     var finalScoreEl = document.getElementById('final-score');
     var restartBtn = document.getElementById('shooter-restart');
     var restartBtn = document.getElementById('restart-btn');


     var score = 0;
     var score = 0;
    var isJumping = false;
     var isGameOver = false;
     var isGameOver = false;
     var zombies = [];
     var zombies = [];
     var gameSpeed = 3;
     var bullets = [];
    var zombieSpeed = 1.5;
     var spawnTimer = null;
     var spawnTimer = null;
     var moveTimer = null;
     var gameLoop = null;
 
    function jump() {
        if (isJumping || isGameOver) return;
        isJumping = true;
        nut.classList.add('jumping');
        setTimeout(function() {
            nut.classList.remove('jumping');
            isJumping = false;
        }, 400);
    }


     function spawnZombie() {
     function spawnZombie() {
第121行： 第116行：
         var zombie = document.createElement('div');
         var zombie = document.createElement('div');
         zombie.className = 'zombie';
         zombie.className = 'zombie';
         zombie.textContent = '🧟';
         zombie.innerHTML = '<img src="https://new.pvzhe.wiki/images/f/fa/%E6%99%AE%E9%80%9A%E5%83%B5%E5%B0%B8.png" alt="僵尸">';
         zombie.style.right = '-50px';
         zombie.style.right = '-60px';
        zombie.x = game.offsetWidth;
        zombie.hp = 3;
        zombie.scored = false;
         game.appendChild(zombie);
         game.appendChild(zombie);
         zombies.push({ el: zombie, x: -50 });
         zombies.push(zombie);
     }
     }


     function moveZombies() {
     function shoot(x, y) {
        if (isGameOver) return;
        var bullet = document.createElement('div');
        bullet.className = 'bullet';
        bullet.style.left = '70px';
        bullet.style.top = (y - 6) + 'px';
        bullet.destX = x;
        bullet.destY = y;
        game.appendChild(bullet);
        bullets.push(bullet);
    }
 
    function update() {
         if (isGameOver) return;
         if (isGameOver) return;
         for (var i = zombies.length - 1; i >= 0; i--) {
 
             var z = zombies[i];
        // 移动子弹
             z.x += gameSpeed;
         for (var i = bullets.length - 1; i >= 0; i--) {
             z.el.style.right = z.x + 'px';
             var b = bullets[i];
             var left = parseFloat(b.style.left) || 70;
            left += 8;
             b.style.left = left + 'px';


             // 碰撞检测
             // 碰撞检测
             var nutLeft = 50;
             var hit = false;
             var nutRight = 100;
             for (var j = zombies.length - 1; j >= 0; j--) {
            var zombieLeft = 600 - z.x - 40;
                var z = zombies[j];
            var zombieRight = 600 - z.x;
                var zLeft = z.x - 55;
                var zRight = z.x;
                var zTop = game.offsetHeight - 85;
                var zBottom = game.offsetHeight - 15;
                if (left > zLeft && left < zRight) {
                    z.hp--;
                    hit = true;
                    if (z.hp <= 0) {
                        if (!z.scored) { score++; z.scored = true; }
                        z.remove();
                        zombies.splice(j, 1);
                        scoreEl.textContent = score + ' 分';
                        if (score % 10 === 0) zombieSpeed += 0.3;
                    }
                    break;
                }
            }
            if (hit || left > game.offsetWidth + 20) {
                b.remove();
                bullets.splice(i, 1);
            }
        }


             if (zombieLeft < nutRight && zombieRight > nutLeft && !isJumping) {
        // 移动僵尸
        for (var k = zombies.length - 1; k >= 0; k--) {
            var zz = zombies[k];
            zz.x -= zombieSpeed;
            zz.style.right = (game.offsetWidth - zz.x) + 'px';
             if (zz.x < 60) {
                 gameOver();
                 gameOver();
                 return;
                 return;
            }
            // 跳过僵尸加分
            if (zombieLeft < nutRight && zombieRight > nutLeft && isJumping && !z.scored) {
                z.scored = true;
                score++;
                scoreEl.textContent = score + ' 分';
                if (score % 10 === 0) gameSpeed += 0.5;
            }
            // 移除屏幕外的僵尸
            if (z.x > 700) {
                z.el.remove();
                zombies.splice(i, 1);
             }
             }
         }
         }
第164行： 第189行：
         isGameOver = true;
         isGameOver = true;
         clearInterval(spawnTimer);
         clearInterval(spawnTimer);
         clearInterval(moveTimer);
         clearInterval(gameLoop);
         finalScoreEl.textContent = score;
         finalScoreEl.textContent = score;
         gameOverEl.style.display = 'block';
         gameOverEl.style.display = 'block';
第172行： 第197行：
         isGameOver = false;
         isGameOver = false;
         score = 0;
         score = 0;
         gameSpeed = 3;
         zombieSpeed = 1.5;
         scoreEl.textContent = '0 分';
         scoreEl.textContent = '0 分';
         gameOverEl.style.display = 'none';
         gameOverEl.style.display = 'none';
         zombies.forEach(function(z) { z.el.remove(); });
         zombies.forEach(function(z) { z.remove(); });
        bullets.forEach(function(b) { b.remove(); });
         zombies = [];
         zombies = [];
         spawnTimer = setInterval(spawnZombie, 1500);
        bullets = [];
         moveTimer = setInterval(moveZombies, 30);
         spawnTimer = setInterval(spawnZombie, 1800);
         gameLoop = setInterval(update, 20);
     }
     }


     game.addEventListener('click', jump);
     game.addEventListener('click', function(e) {
     game.addEventListener('touchstart', function(e) { e.preventDefault(); jump(); });
        var rect = game.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;
        shoot(x, y);
    });
 
     game.addEventListener('touchstart', function(e) {
        e.preventDefault();
        var rect = game.getBoundingClientRect();
        var touch = e.touches[0];
        var x = touch.clientX - rect.left;
        var y = touch.clientY - rect.top;
        shoot(x, y);
    });
 
     restartBtn.addEventListener('click', function(e) { e.stopPropagation(); restart(); });
     restartBtn.addEventListener('click', function(e) { e.stopPropagation(); restart(); });


2026年7月19日 (日) 01:57的最新版本

检索自“https://new.pvzhe.wiki/index.php?title=微件:ZombieGame&oldid=9273”