#小程序云开发挑战赛#-消灭癌细胞-休闲玩家
#小程序云开发挑战赛#-消灭癌细胞-休闲玩家
通过扫雷的玩法和抗癌这个中心思想的结合,实现一个新时代背景下的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
效果截图
[图片]
[图片]
[图片]
[图片]
[图片]
[图片]
功能代码展示
[图片]
[图片]
介绍视频地址
介绍视频最终版!