结对编程作业

这里先附上作业地址

👉 Blog:​我 &​ 队友

👉 Github Repository: AI & 原型设计实现

具体分工

?wgw? 2O24
原型设计、原型设计实现 AI设计、原型设计实现

题目描述

题目：图片华容道

【游戏规则】

  1. 将原始字符图片平均切割成九份小图，并随机抠掉一张图充当空格，此时图片为原始状态，然后将小图的顺序打乱并拼接回去。你需要做的事就是移动白色的图片，将图片恢复到原始状态（类似数字华容道）

  2. 另外新增一个规则。当移动到一定步数时，会强制调换此时棋盘上的两个格子。由于此时棋盘不一定有解，你有一次自由调换的机会。你可以调换任意两个图片的位置，注意这个自由调换只能在棋盘无解的情况下使用，且需紧接着强制调换的操作。

【接口说明】

接口测试工具推荐：PostMAN

用'w'，'s'，'a'，'d'字符表示空格图片的移动：如"ss"代表空格往下移动两格

注：接口文档

1. 原型设计

1.1. 原型设计说明

原型模型分为四个部分：引导页、登录模块、“我的”模块、“游戏”模块。

  • 引导页

    简要地介绍游戏背景和游戏设计亮点。

    左滑（或右滑）到下（上）一界面，或2s后自动切换到下一界面。

    点击“开始游戏吧”按钮进入登录模块。

  • 登录模块

    登录模块分为两个界面，一个输入手机号，另一个输入验证码。

    • 输入手机号

      点击“请输入手机号”输入框，界面播放输入手机号动画，并显示手机号格式验证成功界面。

      点击“获取验证码”按钮进入“输入验证码”界面。

    • 输入验证码

      依次点击小方框输入验证码，最后显示验证码输入完毕界面。

      点击“登录”按钮进入“我的”模块中的“个人信息”界面。

  • “我的”模块

    首先是“个人信息”界面，显示玩家的个人信息。点击头像、背景可切换至P3所示的“更改头像/背景”界面，点击“取消”或“确认”按钮返回“个人信息”界面。

    个人信息中的“游戏记录”可上下滑动查看。点击“退出登录”按钮，切换回登录模块中的“输入手机号”界面。点击底部导航栏中的“游戏”，进入“游戏”模块中的“游戏介绍”界面。

  • “游戏”模块

    “游戏“模块分为两个界面，一个是游戏介绍，另一个是游戏主页面。

    • 游戏介绍

      这里展示游戏介绍和游戏规则。上方有个轮播图，原本打算在这里演示游戏玩法，没做出来（实在是很菜了）。

      点击底部导航栏中的“我的”，切换回“我的”模块中的“个人信息”界面。点击“开始游戏”按钮进入“游戏主页面”界面。

    • 游戏主页面

      分为三大块：操作记录，控制面板，游戏面板。

      点击与白块邻近的方块，使之与白块交换。当成功还原时弹出提示框，点击右上角“X”按钮关闭提示框。

      点击“退出”按钮返回“游戏介绍”界面，点击“重新开始”按钮返回游戏最初状态，点击“新游戏”按钮生成新游戏，点击右上角的💡获得AI演示。

1.2. 原型开发工具

墨刀MOCKINGBOT（上手快，不花钱也够用）

👉 官方教程

1.3. 结对过程

团队项目队友，一拍即合。分工明确，合作愉快。

1.4. 遇到的困难与解决方案

1.4.1 问题描述

不会母版设计，实现局部滚动。

（其实是什么都不会，第一次做原型模型设计。还好墨刀的操作不复杂。。。）

1.4.2 解决方案

看官方教程，已解决。

1.4.3 收获

  • 能做出简单的原型模型了
  • 磨刀不误砍柴工，必要的教程不能省

2. AI与原型设计实现

2.1 代码实现思路

  • AI

    具体查看队友博客，这里只补充一下类图。

  • 原型设计实现

    共计8个*.py文件，分为基本设置模块，按钮模块，计步模块，计时模块，棋盘模块，其他功能模块，游戏状态模块，以及游戏主模块。

    导图1

    • 基本设置模块

      对FPS，颜色风格，布局风格做了定义，记录了答案文件路径。

      settings

    • 按钮模块

      细化按钮风格，将其渲染为图像，并确定其在屏幕上的位置。

      button

    • 计步模块

      记录玩家解题的步数，并在屏幕上显示出来。

      step_record

    • 计时模块

      记录玩家当前解题所用的时间和玩家的最短用时，并在屏幕上显示出来。

      timepiece

    • 棋盘模块

      生成、记录、更新棋盘状态。

      digital_blocks

    • 其他功能模块

      对原图进行切割，对相应的按键和鼠标事件进行响应，更新屏幕图像。

    • 游戏状态模块

      跟踪游戏的统计信息。

      game_stats

    • 游戏主模块

      创建屏幕对象并开始游戏循环。

    最后附上性能分析图，展示消耗最大的函数：

    Kloski

    image-20201023012412744

2.2 Github代码签入记录

  • AI

  • 原型设计实现

2.3 遇到的困难与解决方案

问题描述 解决方案
AI 图片的识别 使用KNN模型
原型设计实现 - 白块移动出现异常
- AI运行过程中出现“未响应”状态		 - 重新分析代码逻辑，找出bug
- 在AI运行时不对用户操作做出响应

收获

对代码逻辑一定要了然于心，合理利用注释帮助寻找bug。

注：AI大比拼排名（组队id：40）

评价队友

- 值得学习的地方

tql！能把想法切实落实到代码，思路清晰。

AI排名好高

- 需要改进的地方

啊这个也有我的份，感觉平时交流比较少。。

写在后面

这里没有PSP和学习进度条，是因为前两周我在思考自己的AI实现方案。我们组队时间较晚，考虑到我的AI实现较为困难，最后定了使用队友的方案。队友的方案是我敢想不敢做的，最后能成功实现也很开心（我只参与了讨论，没有参与具体实现，这里再次膜拜大佬 ）

在队中我主要负责原型设计。通过这次经历，感觉我还是更喜欢敲代码，原型设计有点枯燥😶。还是习惯于在纸上写写画画来理清逻辑，建立模型。要把思路从纸上搬到屏幕上，感觉做了重复劳动，以后会试着多直接使用工具（还没找到合适的⭐）。

最后附上个人版的Github Repo和对应博客，以后若成功实现将会转为Public。

PLUS：有一个问题在这里记一下——如何证明图片华容道是否可解

posted @ 2020-10-19 22:29  ?wgw?  阅读(166)  评论(0)    收藏  举报