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

发布于 5 年前作者 ming211976 次浏览最后编辑 5 年前来自 share

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

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

效果截图

功能代码展示

介绍视频地址

介绍视频最终版!

9 回复
oshao
oshao1 楼5 年前

respect

juan20
juan202 楼5 年前

爱爱爱

zkong
zkong3 楼5 年前

999

hmeng
hmeng4 楼5 年前

999

wei01
wei015 楼5 年前

666

gang66
gang666 楼5 年前

可以可以👍

lei92
lei927 楼5 年前

great~

hdai
hdai8 楼5 年前

999

chao57
chao579 楼10 个月前

666