愚人节专题项目前端开发小结

加入17173后参与的第一个项目——《愚人节超级大忽悠》。

需求文档

程序需求说明

  • 第一步:用户填写昵称,为方便后面设定独立的地址
  • 第二步:进行选择
  • 第三步:显示答案

    • 回答正确显示:你太聪明了,想忽悠你,小编还要再下点功力。敢继续吗?
    • 错误回答:答错了,获得猪头一个!
  • 第四步:一共十道题,答完以后显示如下:

    • 结果1、这么刁钻的题都答对了,你真是绝“顶”聪明!都说聪明的人容易秃头,小心为妙!
    • 结果2、你太牛X了,居然获得N个猪头,获得“超级大猪头”称号!
    • 这里要为每个玩家生成一个独立的地址。并统计这个独立地址带来多少新的玩家。(这里强调新的玩家,只是打开是没用的,要开始玩的才算新玩家。)

其他说明

  1. 已有XXXX个玩家参与了测谎挑战——统计所有参与此活动的用户数量
  2. XX个玩家成为大猪头——统计有出错的用户(出错一题或N题,没有区别)都在此处统计。
  3. XX个玩家挑战成功——统计在活动中没有任何出错的用户
  4. XXX个玩家拉来新猪——玩家将自己的地址转发给朋友,引导朋友来参与游戏的用户。即多少个玩家推广了他的地址。
     

需求分解

整个流程拆分为三个功能模块实现,

  1. 填写昵称分配ID;
  2. 答题和谜底展示;
  3. 最终结果展示(猪圈和拉猪榜数据更新)和分享链接生成。
    其中一、三步比较简单,发请求、更新数据即可;第二步占整个流程比重较大,逻辑和交互也相对复杂。
    考虑到活动仅供娱乐,不涉及奖励和账号信息,可以说安全性要求较低,所以选择将题库、用户信息及答题进度等信息保存在浏览器端而不是服务端。增加答题过程流畅度。

前端实现

如前文所述,信息保存在浏览器端,为避免混乱,定义了命名空间为gSess 的全局变量,包含用户输入的昵称、后台分配的ID、邀请人ID(可选)、答题进度、打错数量、题库这六个属性;

数据结构的定义:将题库抽象为数组,题目抽象为对象;题库数组的元素为题目,题目对象的属性为题目信息(包含题目附图、题目、答案、答案附图等)。这样确保了题目数量和题目信息的可扩展性,到开发后期看来是明智的——虽然需求文档预期题目数量为10,但实际执行过程中需求变动为11,这样只需把题库数组中对应元素删除即可;更重要的是,联调测试阶段,可以根据测试需求控制变量,从而简化测试操作。比如在测试是否进猪圈(答错1题或以上)时,就让题库中只有一道题,通过控制这一题的对/错即可达到测试目的,否则只好记住每一题的正确答案才能模拟“挑战成功”的情况,费时更费力。

活动效果

数据截止:04/01/2013 - 20:55

已有37250个玩家参与了挑战 26637个玩家成为大猪头 3089个玩家挑战成功 873个玩家拉来新猪
网页截图: http://pinterest.com/pin/104075441361420846 ,虽然活动人气旺 主要归功给力的策划和坏坏的小编(在看需求文档时就忍不住笑了)。不过看到自己努力的成果能给这么多人带来欢乐,心里还是满满的成就感 :P 。

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理