企业官网建设流程全解析

前言

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模拟器跑起来也没什么障碍。如果你想自己动手，参考这份代码很快就能搭起来。