查看“︁微件:ZombieGame”︁的源代码

<includeonly>
<style>
.shooter-game {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 350px;
    background: linear-gradient(180deg, #87CEEB 0%, #87CEEB 60%, #5a8f4a 60%, #5a8f4a 100%);
    border: 4px solid #3a5c2f;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px auto;
    cursor: crosshair;
    user-select: none;
    touch-action: manipulation;
}
.shooter-game .plant {
    position: absolute;
    bottom: 15px;
    left: 30px;
    width: 70px;
    height: 70px;
}
.shooter-game .plant img {
    width: 100%;
    height: 100%;
}
.shooter-game .zombie {
    position: absolute;
    bottom: 15px;
    width: 55px;
    height: 70px;
    transition: left 0.1s linear;
}
.shooter-game .zombie img {
    width: 100%;
    height: 100%;
}
.shooter-game .bullet {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #4CAF50;
    border-radius: 50%;
    pointer-events: none;
}
.shooter-game .score {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}
.shooter-game .game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px 6px #000;
    display: none;
    text-align: center;
    line-height: 1.6;
    z-index: 10;
}
.shooter-game .restart-btn {
    display: block;
    margin: 10px auto;
    padding: 10px 24px;
    font-size: 18px;
    background: #f44336;
    color: #fff;
    border: none;
    border-radius: 8px;
    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>

<div class="shooter-game" id="shooter-game">
    <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="shooter-score">0 分</div>
    <div class="game-over" id="shooter-game-over">
        💀 僵尸入侵！<br>
        <span style="font-size:18px;">得分: <span id="shooter-final-score">0</span></span>
        <br><button class="restart-btn" id="shooter-restart">再来一局</button>
    </div>
</div>

<script>
(function() {
    var game = document.getElementById('shooter-game');
    var scoreEl = document.getElementById('shooter-score');
    var gameOverEl = document.getElementById('shooter-game-over');
    var finalScoreEl = document.getElementById('shooter-final-score');
    var restartBtn = document.getElementById('shooter-restart');

    var score = 0;
    var isGameOver = false;
    var zombies = [];
    var bullets = [];
    var zombieSpeed = 1.5;
    var spawnTimer = null;
    var gameLoop = null;

    function spawnZombie() {
        if (isGameOver) return;
        var zombie = document.createElement('div');
        zombie.className = 'zombie';
        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 = '-60px';
        zombie.x = game.offsetWidth;
        zombie.hp = 3;
        zombie.scored = false;
        game.appendChild(zombie);
        zombies.push(zombie);
    }

    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;

        // 移动子弹
        for (var i = bullets.length - 1; i >= 0; i--) {
            var b = bullets[i];
            var left = parseFloat(b.style.left) || 70;
            left += 8;
            b.style.left = left + 'px';

            // 碰撞检测
            var hit = false;
            for (var j = zombies.length - 1; j >= 0; j--) {
                var z = zombies[j];
                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);
            }
        }

        // 移动僵尸
        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();
                return;
            }
        }
    }

    function gameOver() {
        isGameOver = true;
        clearInterval(spawnTimer);
        clearInterval(gameLoop);
        finalScoreEl.textContent = score;
        gameOverEl.style.display = 'block';
    }

    function restart() {
        isGameOver = false;
        score = 0;
        zombieSpeed = 1.5;
        scoreEl.textContent = '0 分';
        gameOverEl.style.display = 'none';
        zombies.forEach(function(z) { z.remove(); });
        bullets.forEach(function(b) { b.remove(); });
        zombies = [];
        bullets = [];
        spawnTimer = setInterval(spawnZombie, 1800);
        gameLoop = setInterval(update, 20);
    }

    game.addEventListener('click', function(e) {
        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(); });

    restart();
})();
</script>
</includeonly>