Day38 ( 游戏设计 ) 狙击气球 ( 两倍变焦 )

狙击气球 ( 两倍变焦 )

教学原文参考:狙击气球 ( 两倍变焦 )

这篇文章会延伸「 狙击望远镜 ( 两倍变焦放大 )」的范例,并在 Scratch 3 里加入气球角色,搭配造型、定位、重复...等积木,实作一个透过狙击镜瞄准、按下滑鼠射击气球的效果,并在按下键盘空白键时,可以进行两倍变焦放大 ( 放大两次 ) 的效果。

相关文章参考:狙击望远镜 ( 两倍变焦放大 )重复换造型定位

角色设定

本篇教学为「狙击望远镜 ( 两倍变焦放大 )」一文的延伸,请先开启范例进行编辑。

范例连结:https://scratch.mit.edu/projects/564128874/

在角色编辑区,使用绘画,新增一个气球新角色 ( 参考:造型与绘图 )。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

进入造型页签後,使用「选个造型」,从中挑选一个蓝色的气球造型。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

复制一个气球造型,点击「橡皮擦」工具,橡皮擦宽度设定为 1

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

使用橡皮擦工具,在气球上「擦出裂痕」( 切出一块 ),并使用「选取」工具,将切出来的部分往外移动,就能做出基本的气球破裂效果。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

了解做法後,*使用「橡皮擦」工具切出气球破裂的各个片段,*使用「选取」工具改变位置以及尺寸,做出「四个」造型,从气球刚破掉的图案,一直到气球全破的图案

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

完成後,气球的造型页签里,应该会有从完整的气球,到全破的气球,总共五个造型。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

接着点击「狙击镜」角色,使用「圆形」工具,在十字的中心点画出一个红色的小圆,作为瞄准的准心 ( 注意,狙击镜里的两个造型都要画 )。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

积木程序原理

点击「气球」角色,新增 size、x 和 y 三个变数。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

设定点击绿旗时的程序:

  • 显示气球。
  • 将造型设定为「完整的气球」。
  • size 设定为 0.3~2 的随机数 ( 控制气球尺寸 )。
  • x 设定为 -200~200 的随机数 ( 控制气球 x 座标 )。
  • y 设定为 -100~100 的随机数 ( 控制气球 y 座标 )。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

接着放入重复无限次积木,每次重复执行下方程序:

  • 判断如果 zoom 等於 0,表示没有缩放:
    • 将气球尺寸设定为 25%。
    • 将气球定位在 (x, y)。
  • 判断如果 zoom 等於 1,表示没有一倍变焦放大:
    • 将气球尺寸设定为 75% ( 因为背景图也是三倍,所以气球也设定为 25% 的三倍 )
    • 将气球定位在 (x x -3, y x -3)
  • 判断如果 zoom 等於 2,表示没有两倍变焦放大:
    • 将气球尺寸设定为 12% ( 因为背景图也是五倍,所以气球也设定为 25% 的五倍 )
    • 将气球定位在 (x x -5, y x -5)

气球位置就像背景图片位置,放大以後会往滑鼠的反方向移动,移动距离就是放大的倍数。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

完成後,点击绿旗,用滑鼠在舞台上瞄准气球,按下键盘空白键,就会放大气球。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

新增「另外一个」点击绿旗积木,负责「射击气球」的程序:

  • 放入重复无限次积木。
  • 每次重复判断是否碰到「红色」准心
  • 如果碰到红色准心,继续判断是否按下滑鼠
  • 如果按下滑鼠,使用重复 4 次积木,切换气球造型,播放气球破掉的动画
  • 气球破掉後,隐藏气球。
  • 重新设定 x、y 和 size 变数。
  • 等待 0.1 秒。
  • 将气球造型换成没破掉的气球。
  • 显示气球。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

完成效果

完成後,点击绿旗,就可以用狙击镜来设计气球。

Scratch 3 教学 - 狙击气球 ( 两倍变焦 )

范例解答

范例解答:狙击气球 ( 两倍变焦 )

延伸练习

如果已经熟悉了狙击气球 ( 两倍变焦 )的原理,还可以尝试更多好玩的作法:

  • 尝试修改射击程序,让游戏在「放大」时才可以射破气球 ( 解答 )。

关於我

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


<<:  Day26 Java String(Ⅰ)

>>:  Day26 简易小键盘小实作

Day23 CC: Tweaked 升级版的电脑

我围绕在「基本版」电脑已经二十多天了 ... 一开始先试着熟悉 Lua 语法,接着玩转电脑周边设备,...

DAY3:离职率预测(下)

人工智慧共创平台-离职率预测(下) 资料清洗 ax = sns.countplot(x="...

【Day.26】React进阶 - useEffect v.s useLayoutEffect

如果你在撰写React专案时,有试着在第一次渲染後,透过useEffect以state修改绑定给元件...

[30天 Vue学好学满 DAY24] Vue Router-3

router-link to 函数 指定导向,包含以下方法 <!-- 直接指定路径 -->...

最短路径问题 (6)

10.8 更多的 Leetcode 例题 Leetcode 1129. Shortest Path ...