奶龙跑酷
by BraveLion99103 lines4.3 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>奶龙跑酷</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 游戏主容器 -->
<div id="game-container">
<!-- 游戏画布 -->
<canvas id="gameCanvas"></canvas>
<!-- 开始界面 -->
<div id="start-screen" class="overlay">
<div class="overlay-content">
<!-- 游戏标题 -->
<h1 class="game-title">
<span class="title-icon">🐉</span>
奶龙跑酷
<span class="title-icon">🐉</span>
</h1>
<p class="subtitle">收集金币，躲避障碍，变身奶蛙！</p>
<!-- 音响提醒 -->
<p class="audio-warning">🔊 一定要打开音响！</p>
<!-- 开始按钮 -->
<button id="start-btn" class="game-btn start-btn">开始游戏</button>
<!-- 操作提示 -->
<div class="controls-hint">
<h3>操作说明</h3>
<div class="control-row">
<span class="key">← →</span> 或 <span class="key">A D</span>
<span>切换车道（左右移动）</span>
</div>
<div class="control-row">
<span class="key">↑</span> 或 <span class="key">W</span> 或 <span class="key">空格</span>
<span>跳跃</span>
</div>
<div class="control-row">
<span class="key">↓</span> 或 <span class="key">S</span>
<span>下蹲滑行</span>
</div>
<div class="control-row mobile-only">
<span>📱 手机玩家可使用屏幕按钮</span>
</div>
</div>
</div>
</div>
<!-- 游戏结束界面 -->
<div id="gameover-screen" class="overlay hidden">
<div class="overlay-content">
<h2 class="gameover-title">游戏结束</h2>
<div class="score-display">
<p class="final-score-label">本局得分</p>
<p class="final-score-value" id="final-score">0</p>
</div>
<p class="best-score-text">最高分：<span id="best-score">0</span></p>
<button id="restart-btn" class="game-btn restart-btn">再来一次</button>
<button id="menu-btn" class="game-btn menu-btn">返回主页</button>
</div>
</div>
<!-- 游戏内HUD -->
<div id="hud" class="hidden">
<div class="hud-left">
<span class="score-label">得分</span>
<span class="score-value" id="score">0</span>
</div>
<div class="hud-right">
<div id="powerup-indicator" class="powerup-indicator hidden">
<span id="powerup-icon"></span>
<span id="powerup-timer"></span>
</div>
<div id="combo-text" class="combo-text hidden"></div>
</div>
</div>
<!-- 移动端触控按钮 -->
<div id="touch-controls" class="touch-controls hidden">
<div class="touch-row">
<button class="touch-btn" id="touch-left">◀</button>
<button class="touch-btn touch-btn-main" id="touch-jump">跳</button>
<button class="touch-btn" id="touch-right">▶</button>
</div>
<div class="touch-row">
<button class="touch-btn touch-btn-wide" id="touch-slide">滑行</button>
</div>
</div>
</div>
<!-- 音效预加载 -->
<audio id="audio-coin" src="coin.mp3" preload="auto"></audio>
<audio id="audio-powerup" src="powerup.mp3" preload="auto"></audio>
<audio id="audio-laugh" src="nailong_laugh.mp3" preload="auto"></audio>
<!-- 加载游戏脚本 -->
<script src="game.js"></script>
</body>
</html>
Game Source: 奶龙跑酷
Creator: BraveLion99
Libraries: none
Complexity: moderate (103 lines, 4.3 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: -bravelion99" to link back to the original. Then publish at arcadelab.ai/publish.