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

通过扫雷的玩法和抗癌这个中心思想的结合，实现一个新时代背景下的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