autojs做小游戏-连连看

最新推荐文章于 2024-05-26 18:30:00 发布

牙叔教程

最新推荐文章于 2024-05-26 18:30:00 发布

阅读量834

点赞数

分类专栏： ui autojs canvas 文章标签： autojs canvas 连连看

本文链接：https://blog.csdn.net/snailuncle2/article/details/122780581

版权

autojs 同时被 3 个专栏收录

193 篇文章 70 订阅

订阅专栏

24 篇文章 3 订阅

订阅专栏

canvas

16 篇文章 0 订阅

订阅专栏

牙叔教程简单易懂

效果展示

动态背景
请添加图片描述

连接线
在这里插入图片描述

重排
请添加图片描述

依赖图

该图使用vscode插件 Dependency Cruiser Extension 生成
在这里插入图片描述

制作流程

布局

ui.layout(
  <vertical padding="30">
    <horizontal>
      <text textSize="30sp" text="计时" />
      <text id="gameDuration" textSize="30sp" text="00:00" layout_weight="1" />
      <button id="rearrange" textSize="30sp" text="重排" />
    </horizontal>
    <canvas id="board" w="*" h="*"></canvas>
  </vertical>
);

canvas是android的画板, 我们做连连看主要就是在画板上面操作, 主要流程如下
在这里插入图片描述

写连连看代码规则

数据与渲染分离, 方便维护与复用代码

生成数据

画板可以画图片, 路径, 曲线, 圆等等, 我选择的是画路径path,;

所有的形状都是八边形的子集, 八边形取任意个点, 排序, 再填充颜色;

每个图形都有类似身份证的属性, 方便后期对比两个图形是否一样;

格子的属性很多, 没有冗余, 基本都是必备的;

我把一个格子看成一个放玩具的地方, 八边形就是玩具, 也就是toyData:
在这里插入图片描述

格子的方法也很多
在这里插入图片描述

格子有三种状态

正常
选中
空

格子的状态属于数据, 设置状态的方法就仅仅设置状态, 不负责渲染,

渲染有专门的render方法

渲染数据

渲染动态背景: 一个图片加定时器, 定时修改图片坐标, 视觉上就有了移动效果
渲染格子: 先画边框, 再画边框内部的toy玩具, 即八边形的子集, 三角形, 四角行, 五角形等待
渲染连线: 计算两个格子的连接路径, 然后画该路径, 给了一个200ms的延时, 以便看见连线效果

点击事件

function setOnTouchListener(board, cellList, boardForLine) {
  let touchListener = getTouchListener(cellList, boardForLine);
  board.setOnTouchListener(touchListener);
}

一开始用的view.click(), 没反应, 采用setOnTouchListener后就有反应了;

主要逻辑

点击属于哪个格子
格子三种状态切换及渲染: 正常, 选中, 空

两个格子能否连通

我把连通种类分为3种:

两个格子紧紧挨着
两个格子周围的空格是否有交集
遍历一个格子周围的空格, 和另外一个格子周围的空格是否有交集

如下图: 红色叉叉既是绿色格子的空格, 也是红色格子的空格, 这就表示两个格子可以连通
在这里插入图片描述

重排

为了应对随机生成的连连看无解的情况, 添加了重排功能.

由于数据与渲染是分离的, 重排只是打乱数据, 渲染还是可以复用的;

重排主要是修改格子的row和column属性, 其他属性不修改

用到的canvas方法

canvas.drawColor画背景色
canvas.drawBitmap画动态背景
canvas.drawText画文字
canvas.drawLine画连线
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);清空画布
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));设置画笔为橡皮擦模式, 擦哪里, 哪里就没图像了
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));设置显示前景图; 先画的是背景图, 后画的是前景图