从零打造一个“跳一跳”：在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.8+1-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模拟器跑起来也没什么障碍。如果你想自己动手，参考这份代码很快就能搭起来。