青蛙大战甲虫:用你的脸控制 Scratch 游戏

用你的鼻子控制一只饥饿的青蛙,在时间结束前尽可能抓住更多甲虫。这个有趣的 Scratch 游戏使用 FaceMesh AI 扩展,将青蛙的位置与精确的面部关键点连接起来。

难度
初级

🕒

预计时间
20–25 分钟

🧩

扩展
FACEMESH

Frog vs Beetle: Control a Scratch Game with Your Face - stage

📖 你将学到什么

  • 如何使用 FaceMesh 检测脸部的详细关键点
  • 如何读取鼻尖的 X 和 Y 位置
  • 如何通过移动脸部来控制 Scratch 角色
  • 如何让一个角色朝向另一个角色
  • 如何创建一个计时捕捉游戏
  • 如何使用变量记录时间和分数

 

Pishi.ai FaceMesh 可以追踪 478 个面部关键点,并返回任意选定关键点在 Scratch 舞台中的坐标。在这个项目中,关键点 1(鼻尖)控制青蛙。

🧰 你需要准备

  • 一台带有可用摄像头的电脑
  • Chrome, Firefox, Edge,或其他支持 WebGL2 的现代浏览器
  • Pishi.ai Scratch(开始一个新项目)
  • FaceMesh 扩展(查看帮助指南)
  • 一个 Frog 角色
  • 一个 Beetle 角色
  • 两个变量:
    • score(分数)
    • time(时间)

使用良好的光线环境,并让你的脸保持在摄像头可见范围内,这样 FaceMesh 才能可靠地进行追踪。人脸检测会在浏览器本地运行,摄像头图像不会被上传。

🛠️ 构建你的项目

1

1. 准备游戏

将 Frog 和 Beetle 角色添加到你的项目中。

创建两个变量:

  • score(分数)
  • time(时间)

游戏将持续 15 秒。在这段时间内,玩家使用鼻子移动青蛙,并尝试抓住甲虫。

你可以选择任何你喜欢的背景。池塘、花园或森林背景都会很适合。

Prepare Pishi.ai character for Voice Control - Scratch blocks
2

2. 用鼻子控制青蛙

添加 FaceMesh 扩展,并允许浏览器使用你的摄像头。
当绿色旗帜被点击时:

  • 将 time 设置为 0
  • 继续移动青蛙,直到游戏结束
  • 将青蛙的 X 位置设置为鼻尖的 X 位置
  • 将青蛙的 Y 位置设置为鼻尖的 Y 位置
  • 让青蛙朝向甲虫

使用代表鼻尖的 keypoint 1,并选择 person 1。

现在,在摄像头前移动你的头。青蛙应该会跟随你的鼻子在舞台上移动,同时始终面向甲虫。
与简单的人脸检测不同,FaceMesh 可以让项目从详细的面部网格中读取单个关键点的位置。当画面中出现多张脸时,它还可以选择特定的人。

FaceMesh Scratch blocks that make the frog follow the player’s nose
点击图片以放大
3

3. 添加甲虫并获得分数

编程 Beetle 角色,让它出现在随机位置。
当绿色旗帜被点击时:

  • 将 score 设置为 0
  • 将甲虫移动到随机位置
  • 重置 Scratch 内置计时器
  • 持续运行,直到计时器超过 15 秒
  • 让甲虫朝向青蛙
  • 检查甲虫是否碰到了青蛙

当青蛙抓住甲虫时:

  • 将分数增加 1
  • 播放呱呱叫声
  • 将甲虫移动到另一个随机位置,然后等待 0.1 秒,以防止甲虫出现得离青蛙太近而立即再次被抓住。

每当青蛙碰到甲虫时,甲虫都会逃到新的位置,玩家获得 1 分。

Scratch code for scoring when the frog catches the beetle
4

4. 宣布游戏结束

你可以使用 Stage、Pishi 角色或单独的播报角色来显示开始和结束消息。

 

当绿色旗帜被点击时:

  • 说出 “Start” 1 秒
  • 等待直到 time 变量变为 FINISH
  • 说出 “Time’s up!”
  • 播放结束音效

 

Beetle 脚本会在 15 秒后将 time 改为 FINISH。这会告诉 Frog 和播报角色脚本游戏已经结束。

Scratch code for starting and ending the Frog vs Beetle game

🚀 试试你的项目!

点击绿色旗帜,并看向摄像头。

 

移动你的头来引导青蛙:

  • 向左或向右移动头部,让青蛙在舞台上移动。
  • 向上或向下移动头部,让青蛙接近甲虫。
  • 在 15 秒计时结束前抓住尽可能多的甲虫。
Frog vs Beetle: Control a Scratch Game with Your Face - stage

🤖 它是如何工作的?

FaceMesh 会分析摄像头图像,并找到你脸上的详细关键点。项目会读取位于鼻尖位置的关键点 1 的坐标。

 

然后,青蛙会使用这些坐标作为它在 Scratch 舞台上的位置。

 

The FaceMesh coordinates are mapped to the Scratch Stage, approximately from −240 to 240 on the X-axis and −180 to 180 on the Y-axis.

 

When the camera preview is mirrored, the X coordinates are flipped to match the movement the player sees on screen.

你的脸

FaceMesh AI

鼻尖关键点

X 和 Y 坐标

青蛙移动

抓住甲虫

💡 让它变得更好!

  1. 张开嘴来抓住甲虫
    不要让青蛙只要碰到甲虫就自动抓住它,而是要求玩家同时张开嘴巴。
    测量以下两个关键点之间的距离:
    • Keypoint 0:上嘴唇中间位置
    • Keypoint 17:下嘴唇中间位置

    只有当嘴唇距离大于你设置的阈值时,才计算抓到甲虫。

  2. 眨眼来激活青蛙力量
    测量上眼睑和下眼睑关键点之间的距离。
    例如:
    • 右眼:keypoints 159 和 145
    • 左眼:keypoints 386 和 374

    当玩家眨眼时,让青蛙移动得更快,或者暂时增加它的捕捉范围。

  3. 添加更多昆虫
    为 Beetle 角色添加多个造型,例如:
    • Beetle(甲虫)
    • Butterfly(蝴蝶)
    • Fly(苍蝇)
    • Mosquito(蚊子)

    每次抓到昆虫后切换到下一个造型。你可以根据不同昆虫奖励不同数量的分数。

  4. 添加需要躲避的物体
    添加一只蜜蜂或蜘蛛,当青蛙碰到它时扣除分数。
    这会让游戏更具挑战性,因为玩家必须小心移动自己的脸,而不是抓住所有移动中的物体。

🔗 分享你的创作

完成你的项目了吗?添加你自己的想法,并与朋友或同学分享。
OPEN PROJECT & REMIX
滚动至顶部