从零打造一个“跳一跳”：在HarmonyOS模拟器上用Canvas复刻经典

前言2017年底一款叫“跳一跳”的小游戏突然刷爆了朋友圈。玩法简单得不可思议按屏幕蓄力松手跳出去跳到下一个台子上。但就是这么个规则简单到一行字就能说完的游戏让几亿人上瘾了好一阵子。我好奇的不是它为什么火而是——这么个玩意儿自己能不能做出来正好手边装着DevEco Studio 6.0.2 Release华为的PC模拟器也跑得挺顺。于是有了接下来这篇文章用Canvas画个小球通过触摸按压来蓄力再套个抛物线的物理公式让它飞起来。整个过程不调用任何游戏引擎纯手写从零搭。写完之后才发现原来高中物理老师说的“学物理有用”是这么个意思。核心原理重力和抛物线这事得从牛顿老爷子说起。你把一个东西扔出去它会怎么飞忽略空气阻力的话它在水平方向上是匀速直线运动没什么阻力让它停下来垂直方向上却有一个恒定的向下的加速度——重力加速度。在游戏里模拟这个说白了就是每帧更新速度和位置。水平速度基本不变垂直速度每帧减去一个固定值模拟重力。位置再根据速度累加——小球就这么画出一条抛物线。真实的物理引擎会考虑质量、阻尼、碰撞、摩擦这些参数但我们这个简易版本只需要水平速度根据蓄力大小和方向决定垂直速度同样来自蓄力但每帧减去重力常量着陆检测当小球Y坐标碰到“地面”时停下来就这么简单。用不着sin和cos也能搞定——因为小球只能往一个固定的方向跳角度是死的蓄力大小只影响速度的绝对值。Canvas是怎么画出来的HarmonyOS的Canvas组件用的是CanvasRenderingContext2D对象来绘制图形。每帧清空画布、重绘所有元素连起来就是动画。这和翻页动画是一个道理。但Canvas在HarmonyOS里有个小“坑”——它自己不会自动刷新。状态变了画布不会自己动。得主动调用重绘系统才会在下一帧帮你更新。所以我们需要一个定时器每帧去触发重绘。实现过程环境准备我的DevEco Studio版本信息如下DevEco Studio 6.0.2 Release Build Version: 6.0.2.642, built on March 5, 2026 Runtime version: 21.0.81-b1038.71 amd64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. Windows 10.0这套工具支持的API范围是4.0.0到6.0.2默认compileSdkVersion是6.0.2(22)。创建新工程的时候选Empty Ability模板就行语言选ArkTS。核心数据结构需要维护这几个关键变量// 小球状态 State ballX: number 100; State ballY: number 500; State ballVX: number 0; State ballVY: number 0; // 物理参数 readonly GRAVITY: number 0.5; readonly GROUND_Y: number 550; readonly BALL_RADIUS: number 20; readonly MAX_POWER: number 15; // 蓄力状态 State isPressing: boolean false; State pressStartTime: number 0; State currentPower: number 0;地面高度是550像素重力常量设成0.5——这个值可以自己调太大了小球掉得快太小了飞得飘。触摸事件处理在模拟器上鼠标操作和触屏有对应关系左键单击是轻触按住左键拖动就是滑动按住不放就是长按。我们的蓄力逻辑需要长按在模拟器上按住鼠标左键就行。触摸回调里需要处理三种事件.onTouch((event: TouchEvent) { if (event.type TouchType.Down) { this.isPressing true; this.pressStartTime Date.now(); } else if (event.type TouchType.Move) { if (this.isPressing) { const elapsed (Date.now() - this.pressStartTime) / 1000; this.currentPower Math.min(elapsed * 10, this.MAX_POWER); } } else if (event.type TouchType.Up) { if (this.isPressing) { this.isPressing false; this.jump(this.currentPower); } } })蓄力时间乘10得到力度上限设成15。这里有一个细节模拟器和真机的触摸事件行为不太一样真机上即使手指不动也可能不断触发Move事件。不过在这个简易场景下影响不大我们只看时间差。物理更新jump(power: number) { if (this.isJumping) return; this.ballVX power * 0.8; this.ballVY -power * 1.2; this.isJumping true; clearInterval(this.timerId); this.timerId setInterval(() { this.updatePhysics(); }, 16); } updatePhysics() { this.ballVY this.GRAVITY; this.ballX this.ballVX; this.ballY this.ballVY; if (this.ballY this.BALL_RADIUS this.GROUND_Y) { this.ballY this.GROUND_Y - this.BALL_RADIUS; this.ballVX 0; this.ballVY 0; this.isJumping false; clearInterval(this.timerId); } this.drawCanvas(); }水平速度是power * 0.8垂直向上是-power * 1.2负值表示向上重力每帧把垂直速度往下拉。这组系数是反复调出来的——跳得太矮没感觉太高飞出屏幕也不行。每帧检测小球是否落地。ballY BALL_RADIUS GROUND_Y的时候说明小球底部碰到地面了把它固定在地面高度清空速度结束跳跃。Canvas绘制drawCanvas() { const ctx this.canvasRenderingContext; const width 1080; const height 720; ctx.clearRect(0, 0, width, height); // 地面 ctx.fillStyle #8B6914; ctx.fillRect(0, this.GROUND_Y, width, 10); // 小球 ctx.beginPath(); ctx.arc(this.ballX, this.ballY, this.BALL_RADIUS, 0, 2 * Math.PI); ctx.fillStyle #FF4500; ctx.fill(); ctx.shadowColor rgba(0,0,0,0.3); ctx.shadowBlur 10; ctx.strokeStyle #CC3700; ctx.lineWidth 2; ctx.stroke(); ctx.shadowBlur 0; // 蓄力条 if (this.isPressing) { ctx.fillStyle #666666; ctx.fillRect(50, 50, 200, 20); ctx.fillStyle #FF4500; ctx.fillRect(50, 50, (this.currentPower / this.MAX_POWER) * 200, 20); } }clearRect先清空画布然后画地面、画小球、画蓄力条。每次调用drawCanvas都是完整重绘一帧。让Canvas在初始化时正确获取上下文Canvas组件有个onReady回调画布初始化完成后会触发。在这里获取上下文并做首次绘制Canvas(this.canvasRenderingContext) .onReady(() { this.drawCanvas(); }) .width(100%) .height(100%) .onTouch(/* ... */)运行展示在PC模拟器上跑起来之后效果是符合预期的按住鼠标左键顶部蓄力条开始涨松手后小球沿着抛物线飞出去落在“地面”上停止。模拟器的鼠标操作完全够用左键按住就是长按蓄力松开就是释放。物理感还不错——蓄力越久跳得越远小球在空中的弧线也确实是抛物线的样子。总结这个项目麻雀虽小五脏俱全。触摸事件、物理模拟、Canvas动画——三个核心模块串起来就是一个能玩的简易游戏。感触最深的是物理公式从课本走进代码的那一瞬间。以前觉得公式就是用来考试的现在发现它们真能让屏幕上的小球“活”起来。如果还想继续玩可以考虑加上多个平台、不同高度的跳跃目标、碰撞检测、分数统计。这些功能的核心思路和本文介绍的一样——物理更新加Canvas绘制只是逻辑复杂度上去了而已。HarmonyOS的Canvas和触摸事件API设计得挺顺手PC模拟器跑起来也没什么障碍。如果你想自己动手参考这份代码很快就能搭起来。