小猴子爬树闯关·不一样的树

by StealthShark80

93 lines3.8 KB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小猴子爬树闯关·不一样的树</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;font-family:微软雅黑}
        body{background:#f8f0e3;overflow:hidden}
        .game-box{width:900px;height:1100px;margin:10px auto;background:#b89c80;padding:20px;border-radius:12px;position:relative}
        .title{text-align:center;font-size:48px;font-weight:bold;margin-bottom:15px;color:#111}
        .score{position:absolute;top:20px;right:30px;font-size:28px;background:#fff;padding:6px 16px;border-radius:8px}
        .tree-wrap{display:grid;grid-template-columns: 1fr 1fr;gap:12px;height:920px}
        .tree-item{border:3px solid #222;border-radius:6px;position:relative;cursor:pointer}
        #tree1{background:#fcf9bc}
        #tree2{background:#73b8e8}
        #tree3{background:#f25790}
        #tree4{background:#e9dff7}
        .monkey{
            width:60px;height:70px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);
            transition:all 0.6s ease;z-index:9;font-size:50px;text-align:center;
        }
        .tip{position:absolute;bottom:-35px;left:50%;transform:translateX(-50%);font-size:18px;color:#222}
        .win-tip{
            position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
            background:#fff;padding:40px 60px;font-size:36px;border-radius:12px;display:none;
            box-shadow:0 0 20px #666;text-align:center
        }
        button{margin-top:20px;padding:10px 25px;font-size:22px;border:none;background:#ff9933;color:#fff;border-radius:6px;cursor:pointer}
    </style>
</head>
<body>
<div class="game-box">
    <div class="title">不一样的树</div>
    <div class="score">积分：<span id="score-num">0</span></div>
    <div class="tree-wrap">
        <div class="tree-item" id="tree1" onclick="climbTree(1)">
            <div class="monkey" id="m1">🐒</div>
            <div class="tip">第1关 糖果树</div>
        </div>
        <div class="tree-item" id="tree2" onclick="climbTree(2)">
            <div class="monkey" id="m2">🐒</div>
            <div class="tip">第2关 星星茶壶树</div>
        </div>
        <div class="tree-item" id="tree3" onclick="climbTree(3)">
            <div class="monkey" id="m3">🐒</div>
            <div class="tip">第3关 蔬菜魔法树</div>
        </div>
        <div class="tree-item" id="tree4" onclick="climbTree(4)">
            <div class="monkey" id="m4">🐒</div>
            <div class="tip">第4关 菠萝果树</div>
        </div>
    </div>
</div>
<div class="win-tip" id="winBox">
    恭喜全部闯关完成！总积分：<span id="finalScore">0</span>
    <br>
    <button onclick="resetGame()">重新开始游戏</button>
</div>

<script>
    let score = 0;
    let finish = [false,false,false,false];
    const scoreDom = document.getElementById('score-num');
    const winBox = document.getElementById('winBox');
    const finalScore = document.getElementById('finalScore');

    function climbTree(num){
        if(finish[num-1]) return;
        const monkey = document.getElementById('m'+num);
        monkey.style.bottom = '85%';
        score += 1;
        scoreDom.innerText = score;
        finish[num-1] = true;
        if(finish.every(i=>i===true)){
            setTimeout(()=>{
                finalScore.innerText = score;
                winBox.style.display = 'block';
            },800)
        }
    }
    function resetGame(){
        score = 0;
        finish = [false,false,false,false];
        scoreDom.innerText = 0;
        winBox.style.display = 'none';
        for(let i=1;i<=4;i++){
            document.getElementById('m'+i).style.bottom = '0';
        }
    }
</script>
</body>
</html>

Game Source: 小猴子爬树闯关·不一样的树

Creator: StealthShark80

Libraries: none

Complexity: moderate (93 lines, 3.8 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-stealthshark80" to link back to the original. Then publish at arcadelab.ai/publish.