mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5mobile wallpaper 6
1931 字
5 分钟
用 AIGC 做了一款游戏 Demo:当只猫

策划#

核心玩法概述#

本项目是一款以猫咪为主角的轻量级动作决策游戏。核心玩法围绕方向判断时机选择展开。游戏采用镜头跟随角色移动的设计,使空间随着玩家行动不断展开。玩家在移动过程中持续接收来自不同方向的目标与障碍信息,并在有限时间内完成快速判断与行动选择。

玩家的唯一核心能力为【蓄力扑击】。通过按住屏幕进行蓄力,玩家可以控制猫咪扑击时的距离与速度;松开操作后,猫咪将朝当前锁定方向扑出。蓄力时间越长,扑击范围越大,但同时也意味着更高的判断风险。一旦方向选择错误,撞击到障碍物,猫咪将进入短暂的行动延迟并或扣除生命值,从而影响后续操作节奏。

游戏以限时为主要约束。玩家在规定时间内尽可能多地扑到正确目标以获得分数,同时避免撞击障碍物。当时间结束时游戏终止;若生命值耗尽则提前结束。此游戏不存在达标过关的判定,而是以持续行动与即时反馈构成完整体验循环。

设计决策与理论依据#

在核心玩法设计上,本项目参考了 Brian Upton 在《The Aesthetic of Play》中关于「游戏空间(play space)」的讨论。Upton 认为,游戏本质上是一个由规则与限制构成的行动空间,而体验质量取决于该空间是否能够持续产生具有后果的决策。

基于这一理解,本项目采用镜头跟随角色移动的设计。随着猫咪的移动,新的区域会逐渐进入画面,玩家需要根据当前看到的目标和障碍做出判断。由于无法提前看到整个场景,玩家只能在当下信息下做出决定,因此每一次行动都建立在即时判断之上。

在能力设计上,游戏只保留了【蓄力扑击】这一核心动作。玩法的重点不在于操作复杂,而在于什么时候出手、是否值得出手。蓄力时间越长,扑击距离越远,但也更容易判断失误。通过不断尝试,玩家可以逐渐掌握蓄力与结果之间的关系,从而形成稳定的行动预期。

同时,目标与障碍物的位置是随机出现的,因此不存在固定路线或最优解。玩家不能单纯依靠记忆或重复操作,而需要根据当下情况持续做出新的判断,这保证了游戏的变化性。

在惩罚机制上,失误不会立即结束游戏,而是通过短暂的行动停顿或生命减少来影响后续表现。之前的错误会让后面的操作变得更困难,从而让每一次选择都变得更重要。

核心玩法设计表#

核心玩法设计表

MVP 需求清单#

角色 / 属性#

  • 动画响应性:玩家按住开始蓄力、松开扑出,这两个关键时刻要立刻有反馈。
    • 按住:进入蓄力状态(姿势变化)
    • 松开:立刻进入扑击状态
    • 扑击结束:立刻回到待机状态
  • 移动机制:定向位移
    • 扑击方向为八个扇区
    • 位移距离由蓄力时长决定
  • 重量与动量:扑击过程中不可中途转向
  • 碰撞箱:判定要稳定、可预期。命中判断:猫和目标是否重叠
  • 碰撞:确保命中判定达标并且具有对应反馈
    • 触碰到目标 → 成功反馈(加分 / 计数)
    • 撞到障碍物 → 失败反馈(硬直 / 短暂不可操作 / 惩罚累计)
    • 撞到场景边界 → 停止位移(防止飞出屏幕)
  • 动画保真度:至少 3 个状态:待机 / 蓄力 / 扑击(后续可加细节过渡、镜头特效堆叠)
  • 动画混合:状态切换采用硬切或极短过渡,保证从蓄力到扑击不会出现明显延迟
  • 按键映射
    • 单一输入区域(全屏或中央区域)
    • 按住 = 蓄力,松开 = 出手
    • 出手方向 = 当前锁定方向(由系统判断最近 / 最明显方向)
  • 模拟输入 vs 数字输入:数字输入
  • 控制器反馈
    • 蓄力时:角色缩放 / 拉伸 / 蓄力圈
    • 出手瞬间:位移 + 残影

角色 / 相机#

  • 跟随与取景:镜头始终以主角为中心进行平滑跟随;主角始终处于画面视觉中心,作为决策焦点;目标与障碍主要生成在主角周围可见范围内
  • 景深与视野范围:正交视角或固定透视
  • 摄像机与物体的碰撞和遮挡:目标不得被障碍物遮挡,障碍物不应遮挡主角

能力#

  • 目标:弱指向性,玩家需要明确往哪个方向出手
  • 效果
    • 数值型:扑击距离、扑击速度、硬直时间(失败代价)
    • 非数值型:位移(位置改变)、状态变化(可操作 / 不可操作)
  • 平衡
    • 短蓄力:成功率高,回报低
    • 长蓄力:覆盖范围大,失败惩罚更重

阻碍#

  • 资源:时间、生命值
  • 敌人:障碍物
  • 环境

MVP


美术(即梦 AI、Nano Banana)#

视觉风格:轻量级扁平化 2D 卡通风格,以低细节、高轮廓对比的可读性优先。

游戏角色设计

Image1

Image2

游戏场景设计

Image3

障碍物设计

Image4

Image5

Image6

Image7

Image8

初始界面

Image9

UI 设计

Image10


音频(SUNO、Elevenlabs)#

音频设计围绕即时反馈节奏强化

  • 角色扑击:触发短促清晰的猫叫音效,强化动作启动的瞬间感。
  • 撞击障碍物:播放较低沉、带有「委屈感」的猫叫声,形成节奏打断并明确提示失误。
  • 成功命中目标:根据激光点的不同颜色分别触发 do 至高音 do 的音阶音效;当玩家逐渐掌握颜色与音阶之间的对应关系后,可以通过连续命中组合出简单旋律,在听觉层面强化成就感与连击体验。
  • 背景音乐:整体风格轻松可爱,仅在开始界面播放,进入游戏后停止,以避免干扰玩家在游戏过程中的方向判断与节奏控制。

程序(Cursor、ChatGPT)#

采用 HTML5 Canvas + JavaScript 实现,无第三方游戏引擎。使用 Canvas 2D 进行画面绘制与自适应缩放,使用原生 JavaScript 组织核心逻辑、实体、渲染与系统模块,通过单页 HTML 加载并按脚本顺序初始化,在浏览器中即可运行。

部署网站链接(Netlify)
https://game-just-a-cat.netlify.app/


宣传片(剪映)#

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

用 AIGC 做了一款游戏 Demo:当只猫
https://nikkichen.me/posts/cat/aigc-game-demo-just-a-cat/
作者
Nikki Chen
发布于
2026-01-17
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

封面
Sample Song
Sample Artist
封面
Sample Song
Sample Artist
0:00 / 0:00