项目:漫漫H5游戏-抓娃娃机

项目信息

  1. 时间:2016.2-2016.3
  2. 该项目是为漫漫App做营销推广的方式之一;在CentOS+Tomcat+JDK+MySQL的服务器环境下用Html5 canvas+JQuery+Java等语言实现;
  3. 项目人数:项目经理1+程序员1+设计师1
  4. 负责与客户沟通、项目推进及管理、数据库设计、服务器管理等。

第一版需求

项目:漫漫H5游戏-抓娃娃机_第1张图片

微信H5游戏——吊娃娃(第一版)

  1. 进入游戏界面显示有两个按钮,一个是“PLAY”即开始游戏,另一个为“HELP”即游戏帮助.
  2. 点击“PLAY”按钮进入游戏,在界面上方有一个机械抓手匀速移动,下方堆积着为网络红人定制的漫画形象娃娃用户
    在10秒的游戏时间内,点击屏幕下方的“抓取”按钮,机械抓手随即下降并抓取下方娃娃(设置为百分百抓取成功).
  3. 抓取成功后在当前页面弹出新页面,显示与抓取的娃娃相应网络红人的动漫头像以及其定制小故事,在其下方有“上 传我的照片”按钮.
  4. 点击“上传我的照片按钮”,用户可选择从相册上传一张相片和拍摄一张相片,上传成功后跳转新界面,生成与用户上传照片相似的漫画头像(可预先设置10中漫画头像,随机生成),并在下方简单介绍该形象的特征.
  5. 在生成用户漫画形象的界面右上方显示“点击右上角,分享到朋友圈”字样及箭头,引导用户转发分享.

第二版需求—更改需求

项目:漫漫H5游戏-抓娃娃机_第2张图片

区分用户是否是首次访问

增加后台统计量功能

用户可以选择不一样的时间段查看相应的那些统计过的信息

数据库设计

Table1:

字段名 字段名称 字段类型 字段长度 字段说明
ID number(int) 自动增长(主键)
UserName 用户名称 Varchar 50
UserPWD 用户密码 Varchar 50
IsRoot 是否为管理员 bool

Table2:

字段名 字段名称 字段类型 字段长度 字段说明
ID number(int) 自动增长(主键)
IP IP地址 char 15 必须是数字和英语点
IsDown 是否下载 bool
IsShare 是否分享 bool 是否分享到朋友圈
TerminalWay 终端方式 char 5 只有三个值:phone,PC,None
Date 访问日期 date

说明:

需要统计显示的信息

  1. 虚下载量 实际的下载量加上 [0 1]随机数的四舍五入
  2. 实下载量 实际的下载量(Table1的IsRoot为True时可见)
  3. 总访问量 无论来自哪个终端(统计Table2的记录个数)
  4. PC访问量 电脑终端的访问量(统计Table2的IsShare为PC的记录个数)
  5. 手机端访问量 手机端的访问量(统计Table2的IsShare为Phone的记录个数)
  6. 分享量 分享到朋友圈的次数(统计Table2的IsShare为True的记录个数)

第三版需求——追加需求

流程:

点击“上传照片,生成专属形象”后,选择照片,点击完成,自由的伸缩自己的照片对准镂空娃娃的脸后,点击确认后生成一张我和娃娃的合成体图片,为图片命名后,可点击分享到朋友圈或转发给朋友们后,朋友们(包括自己)点击后看到他合成的娃娃后,点击玩游戏,跳转到游戏首页,点击Play后,下方的第五个娃娃的头像变成了他合成的娃娃,当抓到的是他合成的娃娃后,其动漫故事为四个动漫故事中随机一个;以此循环.

新页面元素:

1,“自由的伸缩自己的照片对准镂空娃娃的脸”的页面中上方是镂空娃娃和自己照片的交叠,下方有“确认”按钮
2,“生成一张我和娃娃的合成体图片”的页面中上方是合成图片,下方有“请为图片命独一无二的名字”输入框和“提交信息”按钮
3,承接上述第二点,点击“提交信息”按钮后的页面,上方为图片名称,中间为合成体图片,下方有两个按钮,分别是“下载漫漫APP查看更多漫画”和“玩游戏”(分享或转发出去的页面)

逻辑:

1,不是由分享或转发进入的游戏的人,看到的第五个娃娃是现在这个大饼脸娃娃,只要是点击朋友分享或转发出来的人点击玩游戏,第五个娃娃就是发起分享或转发人合成的图片
2,只有点击“提交信息”按钮后,合成体的图片才存储在本地服务器上,且数据库表PicTable增一条数据
3,点击“提交信息”按钮后验证输入的图片是否相重或在输入后未提交前就验证,请随意,你定即可
4,曾上传过照片的玩家依然还可以继续上传照片,生成新的合成图片继而分享或转发出去

难点解决

问题1:两张图(其中一张是用户伸缩过)把它们合成一张图PNG(背景去掉)?
解决关键词:Canvas
参考Url: http://jackgit.github.io/ImageEditor/app/demo.html (两张图(其中一张是用户伸缩过)把它们合成一张图的demo)
https://github.com/zwhu/blog/issues/2 (白色背景的 JPEG 图片转成透明的 PNG 图片)
http://freeyiyi.com/canvas-1

问题2:怎么区分是不是由分享或转发进入的游戏的人
解决思路:游戏首页的url是 …../game/index.jsp?picid=数值,判断picid数值就行,默认第五个大饼脸娃娃的picid=1;
分享或转发的页面(即新页面元素的第三点)的url是 …../game/XXXX.jsp?picid=数值,其数值非1
PicTable表PicID=1的记录是存储在本地服务器上的第五个大饼脸娃娃,这条记录永远存在(不许人工删除)

数据库:

PicTable

字段名 字段名称 字段类型 字段长度 字段说明
PicID number(int) 自动增长(主键)
PicName 图片名称 Varchar 50 不可重复
PicUrl 图片Url Varchar 150 将合成的图片储存在本地服务器
Date 日期 date

Table2:(存储IP的表增加字段)

字段名 字段名称 字段类型 字段长度 字段说明
PicID number(int) 外键,PicTable的PicID

完成效果

访问域名:http://www.moredoer.com/game/index?picname=5f.png

游戏首页

项目:漫漫H5游戏-抓娃娃机_第3张图片

项目:漫漫H5游戏-抓娃娃机_第4张图片

项目:漫漫H5游戏-抓娃娃机_第5张图片

通过别人分享玩的游戏

项目:漫漫H5游戏-抓娃娃机_第6张图片


需求还在继续更改中,已入佛门深似海

最终版效果图

项目:漫漫H5游戏-抓娃娃机_第7张图片

项目:漫漫H5游戏-抓娃娃机_第8张图片

项目:漫漫H5游戏-抓娃娃机_第9张图片

项目:漫漫H5游戏-抓娃娃机_第10张图片

项目:漫漫H5游戏-抓娃娃机_第11张图片

项目:漫漫H5游戏-抓娃娃机_第12张图片

项目:漫漫H5游戏-抓娃娃机_第13张图片

项目:漫漫H5游戏-抓娃娃机_第14张图片

项目:漫漫H5游戏-抓娃娃机_第15张图片

你可能感兴趣的:(作品总结,游戏,需求,数据库,游戏界面)