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

本文详细介绍了如何使用HTML5canvas、JQuery、Java等技术在CentOS+Tomcat+JDK+MySQL服务器环境下实现微信H5游戏吊娃娃的营销推广项目,包括第一版需求、第二版需求和第三版需求的实现过程,涉及数据库设计、用户交互逻辑、难点解决等关键环节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目信息

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

第一版需求

第一版需求设计图

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

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

第二版需求—更改需求

第二版需求

区分用户是否是首次访问

增加后台统计量功能

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

数据库设计

Table1:

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

Table2:

字段名字段名称字段类型字段长度字段说明
IDnumber(int)自动增长(主键)
IPIP地址char15必须是数字和英语点
IsDown是否下载bool
IsShare是否分享bool是否分享到朋友圈
TerminalWay终端方式char5只有三个值: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
字段名字段名称字段类型字段长度字段说明
PicIDnumber(int)自动增长(主键)
PicName图片名称Varchar50不可重复
PicUrl图片UrlVarchar150将合成的图片储存在本地服务器
Date日期date
Table2:(存储IP的表增加字段)
字段名字段名称字段类型字段长度字段说明
PicIDnumber(int)外键,PicTable的PicID

完成效果

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

游戏首页

游戏首页

游戏中

合成图片

通过别人分享玩的游戏

点击别人分享进入的游戏


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

最终版效果图

游戏首页

帮助

抓娃娃

第二次访问结果效果

用户性别选择

选择照片上传提示

人脸识别失败后手动对准娃娃脸部

确认位置

由自己分享出去后的抓娃娃效果

Thinkphp大灌篮游戏源码 微信投篮源码 适用范围: Thinkphp内核 微信大灌篮游戏源码 微信投篮源码下载 免公众号+个人免签支付接口 运行环境: php+mysql 源码详细: Thinkphp大灌篮游戏源码 微信投篮源码 运行环境:PHP+MYSQL 程序内核:Thinkphp 内含详细安装教程,请严格按照文档来安装,顺序错了也会安装不起来。 大灌篮游戏源码 投篮源码微信精彩源码手动提现 【免公众号+个人免签支付接口】 用户提现三种方式 1.手动(用户提交收款二维码,后台可看见用户提交的信息) 2.加客服微信(用户加客服微信手动下分) 3.自动(需要您有微信企业付款到零钱的公众号) 不需要公众号也能玩,支持个人免签支付接口+企业自动提现,新增个人免签支付接口,用户提现有三种:手动提现,客服,企业微信自动提现,喜欢的朋友下载吧。 1.下载222111大灌篮目录里的 大灌篮完整运营版 2.打开这个目录,除了这两个红色两个文件其他缓存文件都删除不然网站打不开: 3.修改数据库信息config.php文件,路径是gznet\Cache\config.php: 4.打开数据库:找到qz_user这个表,里面的admin 是管理员用户名 旁边的是密码md5加密的,密码你自己在网上生成md5加密的密码粘贴就行了。密码默认 111111 5.后台地址: http://域名/?g=Admin&m=Login 前台地址: http://域名/index.php/User/Ball/index.html 先进去输入手号,登录以后生成二维码用微信扫就可以了; 更换这个客服二维码成你的, D:\phpStudy\WWW\ball\resource\assets\images\er_wma 系统设置里面的个人收款,和提现那里都不要改,改的话就改不回来了,只能重新安装 免签软件注册地址 http://sk.wapwg.cn/ 软件配置:shoukuanla\config.php 修改地址:gznet\Lib\Action\User\PayAction.class.php 玩这个都是微信,建议支付宝和微信的收款图片都用微信的 收款图片修改:shoukuanla\images 微信夹娃娃红包游戏源码 **精彩互换娃娃源码+安装教程 整套源码使用ThinkPHP框架开发,mysql数据,傻瓜化自定安装。附件中包含安装配置说明文档 1、运行环境:windows+php5.4+mysql2、具备条件:认证服务号带支付、备案域名、vps服务器 1、拼手气红包,用户先支付固定金额的钱,然后拆一个红包,大小是随的。2、可添加无数个不同支付面值的红包,如果只有一个,直接进入支付页面。3、代理资格、可自动或手动设置、根据充值可自动或手动升级。4、代理佣金可自动或人工结算,佣金比例后台可调,可分等级,可扣量。5、红包刷新频率可设置,设置多少分钟刷新一次,每次抽的都不同。6、数据统计非常详细、明确、图表化显示。7、抽中红包信息可滚动显示。9、震撼功能:更换公众号用户数据不会丢失,可以多个公众号轮流发红包。10、可根据抽红包次数,控制抽中红包大小,比如可以设置前两次抽的大,以后抽的小。11、可限制用户每天抽100次12、用户首页集成个人中心功能、用户可查看自己详细的数据13、用户可充值、抢红包更爽,再也不用支付一次,抢一次了14、灵活强大的大转盘功能,独家开发,自己可完全个性定制。15、双佣金模式,三级分销单局佣金和充值百分比佣金16、自动黑名单功能,判断用户行为,自动加入黑名单17、刮刮乐游戏,让用户一次刮个够!18、域名防封化处理,自动短链接,域名使用寿命大幅度提高
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值