菲比糯糯大冒险 | 鸣潮二创

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>菲比糯糯大冒险 | 鸣潮二创</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Microsoft Yahei',sans-serif}
body{overflow:hidden;background:#f0f0f0}
#gameCanvas{display:block;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}

/* 开始界面 */
.start-screen{
    position:absolute;inset:0;background:rgba(0,0,0,0.85);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    z-index:100;gap:20px
}
.game-title{font-size:48px;font-weight:bold;color:#ffe699;text-shadow:0 0 8px #000}
.char-select{display:flex;gap:30px;margin:20px 0}
.char-card{
    width:180px;padding:20px;border-radius:16px;border:4px solid transparent;
    background:#2b2d42;cursor:pointer;text-align:center;transition:0.3s
}
.char-card:hover{transform:scale(1.05);border-color:#ffd166}
.char-card.selected{border-color:#ffd166;background:#3a3d5c}
.char-avatar{width:120px;height:120px;margin:0 auto 12px;image-rendering:pixelated}
.phoebe-avatar{background:url('https://i.imgur.com/7Z7Z7Z7.png') center/contain no-repeat}
.nuonuo-avatar{background:url('https://i.imgur.com/9X9X9X9.png') center/contain no-repeat}
.char-name{font-size:24px;margin-bottom:8px;color:#fff}
.char-desc{font-size:14px;color:#ccc;line-height:1.5}
.start-btn{
    padding:16px 48px;font-size:24px;border:none;border-radius:12px;
    background:#ff9f1c;color:#000;font-weight:bold;cursor:pointer;
    display:none;transition:0.2s
}
.start-btn:hover{background:#ffb74d;transform:scale(1.05)}

/* 游戏UI */
.game-ui{position:absolute;top:20px;left:20px;z-index:10;color:#fff;text-shadow:0 0 4px #000}
.score-text,.level-text{font-size:24px;margin-bottom:8px}
.tip{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);opacity:0.8;font-size:16px;color:#fff;text-shadow:0 0 4px #000}
.pause-btn{position:absolute;top:20px;right:20px;padding:8px 16px;background:rgba(0,0,0,0.5);color:#fff;border:none;border-radius:4px;cursor:pointer;z-index:10}

/* 暂停界面 */
.pause-panel{
    position:absolute;inset:0;background:rgba(0,0,0,0.7);
    display:none;flex-direction:column;align-items:center;justify-content:center;
    gap:20px;z-index:20
}
.pause-title{font-size:36px;color:#fff}
.resume-btn,.restart-btn{
    padding:12px 32px;font-size:20px;border-radius:8px;border:none;cursor:pointer;margin:4px
}
.resume-btn{background:#4cc9f0;color:#000}
.restart-btn{background:#adb5bd;color:#000}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

<!-- 开始界面 -->
<div class="start-screen" id="startScreen">
    <div class="game-title">菲比糯糯大冒险</div>
    <div class="char-select">
        <div class="char-card" data-char="phoebe" id="card-phoebe">
            <div class="char-avatar phoebe-avatar"></div>
            <div class="char-name">菲比丘比</div>
            <div class="char-desc">技能：二段跳<br>特点：活泼好动，擅长跳跃</div>
        </div>
        <div class="char-card" data-char="nuonuo" id="card-nuonuo">
            <div class="char-avatar nuonuo-avatar"></div>
            <div class="char-name">弗糯糯</div>
            <div class="char-desc">技能：短暂悬浮<br>特点：温柔可爱，擅长滑翔</div>
        </div>
    </div>
    <button class="start-btn" id="startBtn">开始冒险！</button>
</div>

<!-- 游戏UI -->
<div class="game-ui" id="gameUI" style="display:none">
    <div class="score-text">分数：<span id="score">0</span></div>
    <div class="level-text">关卡：<span id="level">1</span>/3</div>
</div>
<button class="pause-btn" id="pauseBtn" style="display:none">暂停</button>
<div class="tip" id="tip" style="display:none">空格/点击跳跃 | 长按释放技能</div>

<!-- 暂停界面 -->
<div class="pause-panel" id="pausePanel">
    <div class="pause-title">旅行暂停</div>
    <button class="resume-btn" id="resumeBtn">继续旅行</button>
    <button class="restart-btn" id="restartBtn">重新开始</button>
</div>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 画布尺寸
function resize(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize',resize);

// ========== 音频系统（还原角色专属音效） ==========
let audioCtx;
function initAudio(){
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}

// 菲比丘比音效：清脆啾比声
function playPhoebeSound(){
    if(!audioCtx) return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(720, audioCtx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(950, audioCtx.currentTime+0.12);
    gain.gain.setValueAtTime(0.4, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime+0.22);
    osc.connect(gain); gain.connect(audioCtx.destination);
    osc.start(); osc.stop(audioCtx.currentTime+0.22);
}

// 弗糯糯音效：软糯委屈声
function playNuonuoSound(){
    if(!audioCtx) return;
    const osc = audi