弹簧跳跳乐：按住蓄力一弹冲天，松手蹦上云端停不下来

本案例用华为云 CodeArts 码道 TUI 作为开发入口：在终端里用自然语言描述需求，码道直接生成一个单文件 index.html 弹簧跳跳乐小游戏，浏览器打开就能玩。源码和截图全部开源，链接在文末「直接下载试玩」。

这个游戏玩什么

经典的 Doodle Jump 玩法，全部塞进一个 Canvas 页面：

星空背景里，小绿人踩着随机生成的平台一路向上跳，画面跟着向上滚动。
按住鼠标蓄力、松手起跳：蓄得越久跳得越高，力度全看手感。
平台有普通、移动、易碎三种，移动平台来回漂移，易碎平台一踩就碎。
弹簧弹得更高，一脚踩上去直冲向天；金币加 10 分，星星金币拿到手软。
摔出屏幕底部游戏结束，最高分用 localStorage 本地记录，一键重开再冲一局。

最有手感的一点是「按住蓄力、松手起飞」：蓄满力一脚弹簧，小绿人带着粒子特效直冲云霄，越往上平台越密、得分越快，根本停不下来。

码道 TUI 安装

开始之前，先在终端安装并登录码道 TUI。如果还没用过码道，可以免费开通体验版：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

Windows（仅支持在 PowerShell 中执行）

# 1. 一键安装
irm https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1 | iex

# 2. 配置环境变量
$env:CODEARTS_CLI_AK="你的AK"
$env:CODEARTS_CLI_SK="你的SK"

# 3. 启动 TUI
codearts

macOS / Linux（终端）

# 1. 一键安装
sh -c "$(curl -L https://developer.huaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=$HOME/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

如果正常回显码道 CLI 的版本号，代表安装成功。登录后按提示配置访问凭据：

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

码道能做什么

码道是华为云 CodeArts 的 AI 编程助手，运行在终端 TUI 里，用自然语言就能开发：

描述需求，直接生成项目文件，不用先搭框架。
生成过程中会边执行边汇报，完成时给出文件路径和构建信息。
支持继续对话修改已生成的代码，比如调重力、加速度、加特效。

这一次的任务就是一次典型的前端单文件生成：把玩法、物理、规则说清楚，码道自动拆出蓄力跳跃、平台生成滚动、重力碰撞、弹簧金币、粒子特效、最高分记录等子任务并逐个完成。

任务描述

向码道 TUI 输入的需求原文如下（与截图一致，可直接复制复现）：

用 HTML5 + JavaScript 做一个单文件 "弹簧跳跳乐 Doodle Jump" 网页小游戏：按住鼠标蓄力松开跳跃，小人踩到平台会反弹，踩中弹簧弹得更高，踩空或摔出屏幕底部游戏结束；平台随机生成并向上滚动，包含重力、加速下坠、粒子特效、星星金币加分、最高分本地记录、重新开始按钮，所有代码写在单个 index.html 里，双击即可运行。

开发过程

打开 codearts 进入 TUI，把上面的需求原文粘贴进输入框，回车提交。码道先回显需求，然后开始生成代码：

等待期间，TUI 显示执行进度，能看到它把「蓄力跳跃 / 平台生成 / 重力碰撞 / 弹簧金币 / 粒子特效 / 最高分记录」逐个拆解执行：

完成后，TUI 输出构建总结：文件完整写盘，单文件约 18KB、500+ 行，说明生成结束：

打开生成的 index.html，星空背景、小绿人、蓄力提示都正常出现，等待按住鼠标起飞：

关键代码解读

源码是单文件 index.html，核心逻辑都写在 <script> 里。挑三个关键部分解读。

1. 蓄力起跳

监听 mousedown / mouseup：按下进入蓄力并记录开始时间，松开时若站在平台上就起跳；蓄得越久，起跳初速度越大：

function pointerDown(e) {
  if (state !== PLAY) return;
  charging = true;
  chargeStart = performance.now();
  chargePower = CHARGE_MIN;
}
function pointerUp(e) {
  if (state !== PLAY) return;
  if (charging && player.onGround) doJump();
  charging = false;
  chargePower = 0;
}
function doJump() {
  const p = clamp(chargePower, CHARGE_MIN, CHARGE_MAX);
  player.vy = -BASE_JUMP * p;         // 向上为负，蓄力越大蹦得越高
  player.onGround = false;
  emitParticles(player.x, player.y + player.h / 2, 12, "#8be9ff", { dy: 60, maxSp: 120 });
  shake(0.12, 4);
}

每帧 update() 里蓄力值随时间平滑抬升，约 0.8 秒充满；起跳瞬间粒子特效加屏幕震动，手感很带劲。

2. 重力与平台碰撞

每帧先叠加重力再位移：player.vy += GRAVITY * dt; player.y += player.vy * dt;。落地检测只在下降时（vy>0）做，用「上一帧脚底与当前脚底是否穿过平台顶面」判断踩中：

p.vy += GRAVITY * dt;
if (p.vy > 0) {
  const feet = p.y + p.h / 2;
  const prevFeet = feet - p.vy * dt;
  for (const pl of platforms) {
    if (prevFeet <= pl.y && feet >= pl.y && 水平重叠) {
      p.y = pl.y - p.h / 2;
      // 先检测是否踩中弹簧：是则弹得更高
      if (onSpring) { p.vy = -SPRING_V; onSpring = false; }
      else p.vy = -BOUNCE_V;
      if (pl.type === "break") pl.broken = true;   // 易碎平台一踩就碎
      break;
    }
  }
}

普通反弹 BOUNCE_V=560，弹簧 SPRING_V=1000，踩弹簧接近两倍弹力，惊喜感一步到位。

3. 平台生成与向上滚动

初始平台从屏幕底部按随机间距往上铺：小绿人超过屏幕上部 SCROLL_LINE 后，平台整体下移（视觉像向上滚动），顶部继续补新平台，同时清理低于屏幕的旧平台：

if (player.y < SCROLL_LINE) {
  const d = SCROLL_LINE - player.y;
  player.y = SCROLL_LINE;
  cameraY += d;
  score += Math.round(d * 0.05);
  for (const p of platforms) p.y += d;
  // 顶部继续 genPlatform() 铺台，底部同步清理
}

平台里还有移动台、易碎台、弹簧和金币随机挂载，越往上机关越多。

4. 金币得分与最高分

吃金币 +10 分并喷出金色粒子；游戏结束把 best 写入 localStorage，刷新浏览器最高分也不丢，重新开始 按钮一键再战：

if (score > best) {
  best = score;
  localStorage.setItem("doodleSpringBest", String(best));
}

运行效果

实际运行验证：蓄力、起跳、踩台反弹、踩弹簧冲天、吃金币分散、画面向上滚动全部正常，摔出底部会弹出结算面板并保留最高分。界面是深紫星空配荧光小绿人，节奏爽快。

不足点：蓄力时不能左右移动，想吃高处的金币要靠落点预判；但没门槛的玩法也让最高分越冲越上瘾。

能力总结

这一轮验证下来，码道对「前端单文件小游戏」需求完成度很高：重力、弹簧、易碎台、金币粒子、最高分记录一口气全做齐，不是空骨架，作为快速原型工具很顺。

直接下载试玩

这个 Demo 已开源（源码、本文档、全部截图），托管在 Demo Park 公开仓库，可直接下载来玩：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-doodle-jump

打开上面的链接进入 codearts-doodle-jump 文件夹，把 index.html 下载到本地用浏览器打开即可运行，无需安装任何依赖。

总结

一次需求生成一个能跳到停不下来的弹簧跳跳乐，从蓄力物理、平台滚动到金币与最高分，全部由码道 TUI 完成，我只需要把玩法、物理、界面说清楚。想体验这种从自然语言直接到产品的流程，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-08-20 15:16 新科技观察员阅读(9) 评论(0) 收藏举报

刷新页面返回顶部