Day29 ( 游戏设计 ) 太鼓达人

太鼓达人

教学原文参考:太鼓达人

这篇文章会大量使用「阵列」的操作,搭配「变数」、「逻辑判断」、「点亮」、「[计次回圈」、「逻辑判断」等积木,在 micro:bit 实作一个类似太鼓达人的节奏小游戏。

相关文章参考:阵列变数计次回圈点亮逻辑判断

游戏方式

太鼓达人是一款用按钮和 LED 灯互动的节奏小游戏 ( 如果能搭配蜂鸣器的音效更好 ),游戏开始後,会有鼓点 ( 光点 ) 按照一定的节奏,从上而下移动,当鼓点移动到指定位置时,按下 A 或 B 按钮进行「打鼓」的动作,如果有打到则得分。

如果使用 micro:bit 实作,游戏操作步骤如下:

  • 同时按下 AB 按钮,开始游戏 ( 或重新游戏 )。
  • 按下 A 按钮,在指定位置打击左侧鼓点。
  • 按下 B 按钮,在指定位置打击右侧鼓点。
  • 鼓点被打鼓後就会消失,得分加一。
  • 如果有三次没有打鼓成功,游戏结束,显示得分。

micro:bit - 太鼓达人

积木程序原理

首先设计「一串鼓点」的移动,因为有鼓点不会只有一点,所以使用阵列来呈现:

  • 当启动时,新增一个名为 a 的阵列,阵列长度以「4 的倍数」为单位,本篇文章的范例,建立一个长度为 8 的阵列,1 表示亮灯,0 表示熄灯 ( 通常节拍都会是 4 的倍数,例如 4 拍、8 拍 )。
  • 新增另一个名为 a_length 的变数,纪录 a 阵列的长度

micro:bit - 太鼓达人

新增一个重复无限次积木,制作灯号从上往下移动的动画效果:

  • 放入「计次回圈」,次数为 0 ~ a 阵列的长度 ( a_length )。
  • 放入逻辑判断,判断如果 a 的项目值为 1,就点亮 y 为 4-index 的灯 ( 如此一来才能反转阵列,从上到下的移动 )
  • 如果 a 的项目值不等於 1,就熄灭 y 为 4-index 的灯
  • 计次回圈结束後,将 a 的第一个项目,移动到最後一个项目
  • 暂停 500 毫秒。

不用担心 y 如果大於 4 或小於 0,点亮或不点亮的积木,会自动忽略超过范围的数值

micro:bit - 太鼓达人

完成後启动 micro:bit,就会看见灯光不断往下移动。

micro:bit - 太鼓达人

因为游戏开始时,鼓点会从最上方出现,所以要修改程序:

  • 当启动时:
    • 使用「重复 5 次」回圈,在阵列 a 前面加入五个内容为 0 的元素 ( 如此一来,在最初的显示就完全不会亮灯 )
  • 重复无限次:
    • 增加逻辑判断,判断「新的 a 阵列」( 加入五个项目的阵列 ) 长度如果大於原本的 a 阵列,在每次重复时,移除第一个项目
    • 当「新的 a 阵列」( 逐步移除第一个项目的阵列 ) 长度等於原本的 a 阵列,就继续原本的动画程序。

micro:bit - 太鼓达人

完成後,启动 micro:bit 就能看到灯号不是从最下面出发,而是从最上方开始移动

micro:bit - 太鼓达人

了解原理後,将启动时的阵列,全部搬移到「当按下 A+B 按钮」积木里,作为游戏开始使用:

  • 当启动时积木里,加入 run 等於 0 的变数,作为判断游戏是否开始的依据。
  • 当按下 A+B 按钮,判断 run 等於 0:
    • run 等於 0 表示游戏尚未开始,让 run 等於 1。
    • 新增 end 等於 3 的变数,判断打鼓失误三次就让游戏结束
    • 新增 score 等於 0 的变数,作为计分使用。
    • 新增 time 等於 500 的变数,方便控制鼓点的速度。
    • 加入点亮 (0,3)、(2,3)、(4,3) 的灯,提示使用这在这个位置要打鼓
  • 当按下 A+B 按钮,判断 run 等於 1:
    • 游戏开始後,A+B 按钮变成打鼓模式。
    • 当鼓点进入 (1,3) 时,将灯号熄灭
    • 因为灯号阵列在进入时,会做阵列位置的变换 ( 第一个项目此时会在 y=4 的位置 ),如果打鼓成功,就将第一个项目的内容改为 2 ( 如此一来,回圈暂停结束後,该位置就不会亮灯 )

micro:bit - 太鼓达人

将打鼓模式的积木,复制一份到「当按下 A 按钮」的积木里。

micro:bit - 太鼓达人

接着修改 a 阵列的重复无限次积木:

  • 加入逻辑判断,判断 run 等於 1 的时候才开始
  • 计次回圈的判断里,新增逻辑判断:
    • 如果第一个项目等於 1,且移动到最下面,表示打鼓失败,end 减少 1
    • 如果第一个项目等於 2,且移动到最下面,表示打鼓成功,分数增加 1,将第一个项目改回 1
    • 如果第一个项目等於 0 ( 不等於 1 也不等於 2 ),就执行原本的程序。

micro:bit - 太鼓达人

新增一个重复无限次积木,判断 end 等於 0 的时候,显示分数,并将 run 设定为 0 ( 表示游戏结束 )

micro:bit - 太鼓达人

最後,如法泡制,新增另外一个 b 阵列以及按下 B 按钮的程序 ( 基本上都和 a 相同 ),就能做到同时有两个鼓点出现的效果。完成後,启动 micor:bit,就可以开始进行太鼓达人的游戏。

micro:bit - 太鼓达人

范例解答

范例解答:太鼓达人

实作「太鼓达人」的小技巧

  • 对於「阵列」的应用不熟悉,该如何开始呢?

    可以先参考以下三篇文章,帮助自己厘清阵列操作 LED 的观念:阵列点灯 ( 显示图形 )阵列点灯 ( 动画 )移动速度不同的灯。

  • 为什麽 A+B 按钮也要判断「run 是否等於 1」?

    因为太鼓达人在游戏过程中,常常会出现 A+B 按钮一起按下的状况,为了不让「启动」和「游戏」搞混,所以要多增加「run 是否等於 1」的判断。

关於我

大家好,我是 OXXO,是个即将迈入中年的斜杠青年,如果对我有点兴趣(笑,可以与我联系,一起来做点有玩又有创意的东西吧!


<<:  ASP.NET MVC 从入门到放弃(Day24)-MVC删除资料介绍

>>:  【Day 15】 为何要进行资安攻击的分析

OpenStack Neutron 介绍 — OVN vs OVS

本系列文章同步发布於笔者网站 上一篇讲述了 OVN Plug-in 在 OpenStack 中的参考...

Day29:翻译蒟蒻

当我们的程序可能会有其他语言使用者时,就得开始考虑国际化的问题了,专业术语叫i18n: i n t ...

从容面对不如预期,把不爽留给命运

早起运动Day6 - 生日快乐我的国家​ ​ 三点多有起来记录了一下梦话,接着再睡了回去,我想那是在...

【Day7】人算不如天算的运算式

这个部分算是JavaScript比较难缠的部分,不是难以理解,而是因为比较冗杂,稍稍心浮气躁,就没...

[Day 7]想不到有梗的标题LA(後端篇)

今天我们来看一下Native Camp用户设定,看一下有没有遗漏什麽栏位没有设置的, 这边可以看到可...