用无代码平台做一个打地鼠小游戏（上）

Zion可以做小游戏么？答案当然是可以啦，而且还很方便。相信打地鼠游戏大家都不陌生，今天就跟着我们花15分钟，快速制作一款打地鼠游戏吧。你只需要一台能使用Zion的电脑，加上四个简单的UI小素材，你也能顺利搞定一个打地鼠小游戏！还不会Zion基本操作的同学，可以看之前的新手指南文章哦

新手指南 通过入门项目上手Zion使用界面

01.

准备工作

首先进入Zion，新建两个页面一个为“首页”页面，一个为“打地鼠”页面。

拖入一个“图片”组件，上传一张地鼠的素材图片，然后拖入“按钮”组件到首页面，数据设置为“开始游戏”，对按钮设置行为：路由--->跳转--->打地鼠（实现点击按钮，跳转到打地鼠页面）。

跳转到打地鼠页面，拖入“图片”组件，上传素材图作为该页面的背景。

逻辑思路：

1. 准备开始游戏时，我们给玩家三秒钟的一个准备时间（类似于：3，2，1，游戏开始），这里需要使用一个倒计时行为-“开始倒计时”。

2. 在进入游戏后，我们需要设置一个游戏的总时长，这里也需要一个倒计时行为-“游戏倒计时”。

注：“开始倒计时”结束之后，要触发“游戏倒计时”的开始，当“游戏倒计时”结束后，就意味着游戏结束，因此一切都要结束。

首先添加一个条件式容器到页面如下位置（显示倒计时）。

在“条件式容器”的“数据”中添加新状况：开始倒计时&结束。

在“条件式容器”的“样式”中把透明度设置为 “0”（透明）。

进入“条件式容器”聚焦模式。

拖入两个“倒计时”组件分别到状况：开始倒计时&结束。

将“开始倒计时”的“倒计时”组件命名为：Count Down-开始倒计时。组件其余的“样式”和“数据”设置如下：

“结束”的“倒计时”组件命名为：Count Down-游戏倒计时。组件其余的“样式”和“数据”设置如下：

02.

条件设置

准备工作完成，接下来就到了设置地鼠的相关界面了。

添加一个条件式容器到界面中，把“背景颜色”设置为“透明”。

给条件式容器添加如下新状况：

进入“条件式容器聚”聚焦模式，添加“图片”组件到三个不同的状况中。

分别上传需要用到的素材图片。

退出聚焦模式，“打地鼠”页面显示如下。

复制黏贴“条件式容器”，在页面中共生成九个地鼠。

最后添加一个“视图”组件，用来记录游戏得分。“背景颜色”&“布局设置”如下：

但是如何实现计算打了多少次地鼠呢？

逻辑思路：

1. 设置页面数据“sum”，在条件式子容器“有地鼠”点击行为设置页面数据，使其值为算式数据（页面数据-“sum”+1）。

2. 再设置一个文字组件，设置其数据为：页面数据-“sum”。

点击“打地鼠”页面，添加一个页面数据，命名为“sum”，类型选择为“整数”。

双击进入之前设置的“视图”组件，在“数据”中绑定对应的数据，调整“样式”。

退出聚焦模式，整体页面显示如下：

到这一步已经完成了基本的配置啦，下一篇内容我们将教大家地鼠出现 / 击打 / 没出现时的逻辑梳理和条件绑定。大家可以关注，期待明天的推送哦！