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

微件:JumpGame:修订间差异

来自植物大战僵尸杂交版Wiki
创建页面,内容为“<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-plant { position: absolute; bottom: 20px; left: 50px; width: 40px; height: 40px; transition: none; } .jump-plant img { width: 100%; height: 100%; } .jump-platform {…”
 
无编辑摘要
 
第12行: 第12行:
     cursor: pointer;
     cursor: pointer;
     user-select: none;
     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 {
.jump-plant {
第65行: 第77行:
     border-radius: 3px;
     border-radius: 3px;
     z-index: 5;
     z-index: 5;
    transition: width 0.05s;
}
}
</style>
</style>


<div class="jump-game-wrap" id="jump-game">
<div class="jump-game-wrap" id="jump-game">
     <div class="jump-score" id="jump-score">0</div>
    <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-game-over" id="jump-game-over">💥 掉落!点击重试</div>
     <div class="jump-press-bar" id="jump-press-bar"></div>
     <div class="jump-press-bar" id="jump-press-bar"></div>
第80行: 第94行:
     var $gameOver = $('#jump-game-over');
     var $gameOver = $('#jump-game-over');
     var $pressBar = $('#jump-press-bar');
     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 plant = { x: 50, y: 240, w: 40, h: 40, vx: 0, vy: 0 };
     var platforms = [];
     var platforms = [];
     var score = 0;
     var score = 0;
     var gameRunning = true;
     var gameRunning = false;
    var gameStarted = false;
     var pressing = false;
     var pressing = false;
     var pressStart = 0;
     var pressStart = 0;
     var gravity = 0.6;
     var gravity = 0.6;
    var gameLoop = null;


     function initPlatforms() {
     function initPlatforms() {
第95行: 第112行:
             var gap = 60 + Math.floor(Math.random() * 80);
             var gap = 60 + Math.floor(Math.random() * 80);
             px += gap;
             px += gap;
             platforms.push({ x: px, y: 240, w: 60, h: 15 });
             platforms.push({ x: px, y: 240, w: 60, h: 15, scored: false });
         }
         }
     }
     }
第116行: 第133行:
         plant.y += plant.vy;
         plant.y += plant.vy;


        // 检查平台碰撞
         if (plant.vy > 0) {
         if (plant.vy > 0) {
             for (var i = 0; i < platforms.length; i++) {
             for (var i = 0; i < platforms.length; i++) {
第129行: 第145行:
         }
         }


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


        // 得分(经过平台中心)
         for (var i = 0; i < platforms.length; i++) {
         for (var i = 0; i < platforms.length; i++) {
             var p = platforms[i];
             var p = platforms[i];
第146行: 第163行:
         }
         }


        // 移动平台
         platforms.forEach(function(p) { p.x -= 2; });
         platforms.forEach(function(p) { p.x -= 2; });
         plant.x -= 2;
         plant.x -= 2;


        // 移除屏幕外的平台并补充
         if (platforms[0] && platforms[0].x + platforms[0].w < 0) {
         if (platforms[0] && platforms[0].x + platforms[0].w < 0) {
             platforms.shift();
             platforms.shift();
第158行: 第173行:
         }
         }


        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();
         draw();
     }
     }
第168行: 第195行:


     $game.on('mousedown touchstart', function(e) {
     $game.on('mousedown touchstart', function(e) {
        if (!gameStarted) {
            startGame();
            return;
        }
         if (!gameRunning) {
         if (!gameRunning) {
             // 重试
             startGame();
            gameRunning = true;
            score = 0;
            plant = { x: 50, y: 240, w: 40, h: 40, vx: 0, vy: 0 };
            initPlatforms();
            $gameOver.hide();
            draw();
             return;
             return;
         }
         }
第201行: 第226行:
     initPlatforms();
     initPlatforms();
     draw();
     draw();
     setInterval(update, 16);
     gameLoop = setInterval(update, 16);
})();
})();
</script>
</script>
</includeonly>
</includeonly>

2026年7月19日 (日) 02:03的最新版本