评论

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

#小程序云开发大赛# 参赛队伍:休闲玩家 参赛作品:消灭癌细胞

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

通过扫雷的玩法和抗癌这个中心思想的结合,实现一个新时代背景下的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的玩家
          • scoreAni.js —— 积分加分/减分的圆滑动画
          • util.wxs —— 工具wxs
      • index —— 主页
    • templates —— 模板
      • createRoom —— 创建房间 / 房间信息
        • createRoom.wxml
        • createRoom.wxss
    • util —— 工具类
      • cloudFunc.js —— 封装了调用云函数的方法
      • db.js —— 封装了数据库watch

效果截图

功能代码展示

介绍视频地址

介绍视频纯享版

介绍视频啰嗦版

最后一次编辑于  16小时前  
点赞 3
收藏
评论
登录 后发表内容