#小程序云开发挑战赛#-消灭癌细胞-休闲玩家

通过扫雷的玩法和抗癌这个中心思想的结合，实现一个新时代背景下的old school网络游戏

核心玩法

以下仅为本游戏内容，仅供参考。如发现不正确的地方，欢迎评论指出 ~

在人体的器官中，有着许许多多的细胞，他们分裂时有一定概率因基因突变而变成癌细胞，癌细胞破坏了细胞的基因，不会像正常的细胞一样消灭，而且还会至周围的细胞同样发生突变，并从正常细胞上吸取营养，不断的破坏着我们的身体，我们作为健康卫士，需要扮演免疫系统去对抗癌细胞的进攻。

免疫T细胞是消灭癌细胞的核心武器，T细胞可以防止癌细胞的突变和分裂。除此之外，我可以对癌细胞周围的正常细胞进行探测，以寻找癌细胞的蛛丝马迹。

当器官中所有癌细胞被消灭或者突变时，游戏结束。

应用场景

• 让喜欢玩休闲益智的玩家可以通过这个游戏一起玩耍。
• 利用小程序的传播性，对癌症知识的普及有着很好的正面作用。

目标用户

男女老少皆可。

实现思路

数据库

通过Collection.watch方法对云数据库文档监听，实现实时交互，从而达到多人游戏的目的。为了提高程序的可用性，数据库设计方面做了很多尝试和优化。最终的做法是，用键值对的方式实现伪二维数组，每个单元只存储一个整数，代表状态。这种结构的存储大大地减少了数据量。

云函数

云函数的设计，为了在各种情况都能在数据上达到同步，使用了很多事务锁，在一定程度上增强了程序的健壮性。同时在代码复用上也做了一定的适配。例如：创建房间和重新开始是同一个函数，退出房间和踢人（暂未添加）是同一个函数。

前端展示

因为游戏数据比较零散，且实时性比较高。通过Canvas的方式去实现最合适不过了。游戏界面，用过一个宽100vw高100vh的canvas绘制游戏界面。为了界面可以更加生动和更快速的开发，一些弹框和按钮用了dom元素来实现，canvas-2d支持同层渲染，所以直接用view就可以了。

架构图

目录结构

• cloudfuntions
  • createRoom —— 创建房间
  • destroyRoom —— 销毁房间
  • exitRoom —— 退出房间
  • joinRoom —— 加入房间
  • Login —— 登录（注册）
  • missionFinish —— 任务结算
• miniprogram
  • behaviors
    • input-behavior.js —— 输入相关的行为
  • comonents
    • loading —— 加载框组件
    • roomList —— 房间列表组件
    • toptips —— 顶部提示组件
  • img
    • pixels.js —— 像素画base64
    • sprite.js —— 精灵图base64
  • pages
    • cell 游戏界面
      • util
        • dfsSyncUpdater.js —— dfs同步节流
        • rank.js —— 计算房间内积分排行前n的玩家
        • moveMgr.js —— 视图移动类
        • scoreAni.js —— 积分加分/减分的圆滑动画
    • index —— 主页
  • templates —— 模板
    • createRoom —— 创建房间 / 房间信息
      • createRoom.wxml
      • createRoom.wxss
  • util —— 工具类
    • cloudFunc.js —— 封装了调用云函数的方法
    • db.js —— 封装了数据库watch
    • util.wxs —— 工具wxs

效果截图

功能代码展示

介绍视频地址

介绍视频最终版！