body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', sans-serif; user-select: none; } #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; color: #0ff; text-shadow: 0 0 5px #0ff; } #hud { display: flex; justify-content: space-around; padding: 20px; background: linear-gradient(to bottom, rgba(0, 20, 40, 0.8), transparent); } .bar-wrapper { width: 250px; margin-bottom: 5px; } .bar-container { height: 12px; border: 1px solid #0ff; background: rgba(0,0,0,0.5); position: relative; border-radius: 3px; overflow: hidden; } .hp-fill { height: 100%; width: 100%; background: #0f0; transition: width 0.3s ease-out; } .shield-fill { height: 100%; width: 100%; background: #0cf; transition: width 0.3s ease-out; } .enemy-hp-fill { height: 100%; width: 100%; background: #f00; transition: width 0.3s ease-out; } .label { font-size: 12px; margin-bottom: 2px; } #crosshair { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border: 2px solid #0ff; border-radius: 50%; transform: translate(-50%, -50%); } #stats-panel { position: absolute; bottom: 20px; right: 20px; font-size: 14px; background: rgba(0, 20, 40, 0.7); padding: 15px; border: 1px solid #0ff; border-radius: 10px; text-shadow: none; color: #fff; } #weapon-info { position: absolute; bottom: 20px; left: 20px; font-size: 20px; background: rgba(0, 20, 40, 0.6); padding: 10px 20px; border: 1px solid #0ff; border-radius: 10px; } #instructions, #skill-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 10, 20, 0.95); padding: 30px; border: 2px solid #0ff; border-radius: 15px; text-align: center; pointer-events: auto; z-index: 1000; } #skill-menu { display: none; width: 450px; } .skill-option { background: rgba(0, 255, 255, 0.1); border: 1px solid #0ff; margin: 10px 0; padding: 15px; cursor: pointer; border-radius: 8px; transition: all 0.2s; text-align: left; pointer-events: auto; } .skill-option:hover { background: rgba(0, 255, 255, 0.3); transform: scale(1.02); } .skill-title { font-weight: bold; color: #0ff; display: block; margin-bottom: 5px; } .skill-desc { font-size: 13px; color: #ccc; }
點擊畫面開始對戰
1-6 切換武器 | WASD 移動 | 空白鍵跳躍
提示:贏得對決可升級屬性