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

<includeonly>
<style>
.jump-game-wrap {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 300px;
    background: #87CEEB;
    border-radius: 12px;
    overflow: hidden;
    margin: 15px auto;
    cursor: pointer;
    user-select: none;
}
.jump-start-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
    text-align: center;
}
.jump-plant {
    position: absolute;
    bottom: 20px;
    left: 50px;
    width: 40px;
    height: 40px;
    transition: none;
}
.jump-plant img {
    width: 100%;
    height: 100%;
}
.jump-platform {
    position: absolute;
    bottom: 20px;
    width: 60px;
    height: 15px;
    background: #8B4513;
    border-radius: 4px;
}
.jump-score {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    z-index: 5;
}
.jump-game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: rgba(0,0,0,0.7);
    padding: 10px 20px;
    border-radius: 8px;
    display: none;
    z-index: 10;
}
.jump-press-bar {
    position: absolute;
    bottom: 5px;
    left: 10px;
    width: 0%;
    height: 6px;
    background: #4CAF50;
    border-radius: 3px;
    z-index: 5;
    transition: width 0.05s;
}
</style>

<div class="jump-game-wrap" id="jump-game">
    <div class="jump-start-text" id="jump-start-text">👆 点击开始游戏</div>
    <div class="jump-score" id="jump-score" style="display:none;">0</div>
    <div class="jump-game-over" id="jump-game-over">💥 掉落！点击重试</div>
    <div class="jump-press-bar" id="jump-press-bar"></div>
</div>

<script>
(function() {
    var $game = $('#jump-game');
    var $score = $('#jump-score');
    var $gameOver = $('#jump-game-over');
    var $pressBar = $('#jump-press-bar');
    var $startText = $('#jump-start-text');

    var plant = { x: 50, y: 240, w: 40, h: 40, vx: 0, vy: 0 };
    var platforms = [];
    var score = 0;
    var gameRunning = false;
    var gameStarted = false;
    var pressing = false;
    var pressStart = 0;
    var gravity = 0.6;
    var gameLoop = null;

    function initPlatforms() {
        platforms = [];
        var px = 80;
        for (var i = 0; i < 10; i++) {
            var gap = 60 + Math.floor(Math.random() * 80);
            px += gap;
            platforms.push({ x: px, y: 240, w: 60, h: 15, scored: false });
        }
    }

    function draw() {
        $game.find('.jump-platform').remove();
        platforms.forEach(function(p) {
            $game.append('<div class="jump-platform" style="left:' + p.x + 'px;bottom:' + (260 - p.y) + 'px;width:' + p.w + 'px;"></div>');
        });
        $game.find('.jump-plant').remove();
        $game.append('<div class="jump-plant" style="left:' + plant.x + 'px;bottom:' + (260 - plant.y) + 'px;"><img src="https://new.pvzhe.wiki/images/c/ce/%E8%B1%8C%E8%B1%86%E5%B0%84%E6%89%8B.png" crossorigin="anonymous"></div>');
        $score.text(score);
    }

    function update() {
        if (!gameRunning) return;

        plant.vy += gravity;
        plant.x += plant.vx;
        plant.y += plant.vy;

        if (plant.vy > 0) {
            for (var i = 0; i < platforms.length; i++) {
                var p = platforms[i];
                if (plant.x + plant.w > p.x && plant.x < p.x + p.w &&
                    plant.y + plant.h >= p.y && plant.y + plant.h - plant.vy <= p.y) {
                    plant.vy = 0;
                    plant.y = p.y - plant.h;
                    plant.vx = 0;
                }
            }
        }

        if (plant.y > 320) {
            gameRunning = false;
            gameStarted = false;
            $gameOver.show();
            $pressBar.css('width', '0%');
            $score.hide();
            $startText.show();
            return;
        }

        for (var i = 0; i < platforms.length; i++) {
            var p = platforms[i];
            if (!p.scored && plant.x > p.x + p.w / 2 - 10 && plant.x < p.x + p.w / 2 + 10) {
                p.scored = true;
                score++;
            }
        }

        platforms.forEach(function(p) { p.x -= 2; });
        plant.x -= 2;

        if (platforms[0] && platforms[0].x + platforms[0].w < 0) {
            platforms.shift();
            var last = platforms[platforms.length - 1];
            var gap = 60 + Math.floor(Math.random() * 80);
            platforms.push({ x: last.x + gap, y: 240, w: 60, h: 15, scored: false });
        }

        draw();
    }

    function startGame() {
        score = 0;
        plant = { x: 50, y: 240, w: 40, h: 40, vx: 0, vy: 0 };
        initPlatforms();
        gameRunning = true;
        gameStarted = true;
        $gameOver.hide();
        $score.show();
        $startText.hide();
        draw();
    }

    function jump(power) {
        if (!gameRunning) return;
        plant.vy = -power * 0.25;
        plant.vx = power * 0.18;
    }

    $game.on('mousedown touchstart', function(e) {
        if (!gameStarted) {
            startGame();
            return;
        }
        if (!gameRunning) {
            startGame();
            return;
        }
        e.preventDefault();
        pressing = true;
        pressStart = Date.now();
    });

    $game.on('mouseup touchend', function(e) {
        if (!pressing || !gameRunning) return;
        e.preventDefault();
        pressing = false;
        var power = Math.min(Date.now() - pressStart, 800);
        $pressBar.css('width', '0%');
        jump(power);
    });

    $(document).on('mousemove touchmove', function(e) {
        if (!pressing || !gameRunning) return;
        var power = Math.min(Date.now() - pressStart, 800);
        var percent = (power / 800) * 100;
        $pressBar.css('width', percent + '%');
    });

    initPlatforms();
    draw();
    gameLoop = setInterval(update, 16);
})();
</script>
</includeonly>