实训项目“你画我猜”总结_前端篇
为期4周的实训就要结束了,感谢团队中的每一名同学,才有了我们今天的成果。我们这个5人小团队(产品一位,测试一位,开发三位(两名后台,一名前端)),来自不同的学校,带着刚毕业的学生气一起组成了我们的“飞虎队”。
从产品刚提出的手机版,被开发一致否决,决定做WEB版本开始,我们几乎每天开会,讨论需求,进度,接下来要做的事,优先级。
最后我们采用了mysql+redis+php+js(html5+flashcanvas.js) 这样的技术组成,完成了web版的"你画我猜"项目+管理后台,为期4周,进行了2期的产品开发。
作为组内的前端人员,也只能说说前端的工作了。
1、登录页:
用js实现:对邮箱和密码的验证、自动登录功能。
细节上:焦点在输入框中用红色边框,焦点丢失时验证输入的格式是否正确,如果正确则输入框用绿色边框;点击登录以后,用ajax请求向后台请求,在顶部显示回调结果。
另:忘记密码会给注册的邮箱发送邮件哦~
2、注册页
同样是邮箱、昵称、密码、确认密码的js验证;细节上包括了我已阅读相关服务条款(感觉上挺专业的),点击会出一个静态页面给出服务条款。
在昵称的验证上,使用了qwrap框架的byteLen,判断长度(限制10个字以内的中文,20个字以内的英文)
3、大厅页
功能:修改密码(右上角),退出(返回登录页),加入(加入到相应的房间),创建房间,快速开始,前一页,后一页
细节上:
(1)修改密码,在测试中,产品严格要求到tab切换的顺序
(2)大厅页的那一排功能按钮
加入按钮前端的输入框:默认显示1-999;输入非数字的时候,自动去除;如果加入房间已满或者游戏已开始,给出提示,并且提示5秒以后消失
所有的button都做了hover效果。
4、画画页(最复杂也是最核心的也在这里了)
上图左边是画画的人看到的界面,右边是猜的人看到的界面。
画画的人:有题目,有画板(颜色,粗细,铅笔,橡皮,垃圾桶)
猜的人:提示由谁画画。
画板的实现:
高级浏览器用html5的canvas实现,低级浏览器用flashcanvas.js,每画一笔传一次数据到服务器(所以,如果鼠标一直按下不放开,就不会传数据到服务器),
其中还包括,取消画板部分被选中的(ie:unselectable=on 其他:-xxx-user-select:none;);画板那里只响应鼠标左键画画;鼠标点击的位置判断
画画部分与消息部分都采用轮询机制,每隔1秒向服务器请求一次数据。setTimeOut 实现轮询。
一局结束画画以后:会给出这一局画画的答案提示(下左图)。默认的三轮画画结束以后:会给出所有人的分数(下右图):
细节上:发送部分支持键盘回车发送;点击顶部右边头像,出小弹层提示分数
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
另外:前端还结合smarty模板,使得逻辑与现实分离;在js和css上加上时间戳,防止浏览器缓存;js框架采用qwrap;用minify对js和CSS进行了压缩和合并
感谢奇舞团给予的技术支持,在每一次相关技术的询问中,都有很多人给予解决方案。感谢后端工程师陈鹏和罗光,从没有一点web经验,到最后这个项目顺利运行;感谢测试李玲,不断的提各种问题;感谢产品申文,才真正的是不断的提各种问题,各种细节;感谢产品张文静,兼职了美工,每一个图都是她的作品。
附:实训项目马上落下帷幕,这个东西也即将被OPS无情的清理掉,在一台虚拟服务器上(2G内存,单核2.4GCPU),QPS大概只有700左右。相信如果还有3期,4期,这个产品会越来越好,因为我们对它已经不止是一个责任,更多的是一种拥有感。
转载于:https://www.cnblogs.com/lilyimage/archive/2012/05/29/2523935.html
实训项目“你画我猜”总结_前端篇相关推荐
- 实训项目四 powerpoint 综合应用_【深化改革结硕果】新疆番茄综合精深加工关键技术及产业化应用项目取得重大突破...
近日,记者从新疆冠农果茸股份有限公司(以下简称冠农股份)获悉,由国家功能食品工程技术研究中心与冠农股份合作的番茄综合精深加工关键技术研究及产业化基地即将在冠农股份挂牌成立.这标志着新疆乃至全国的番茄综 ...
- 实训项目四 powerpoint 综合应用_抗震支吊架在机电安装项目上的综合应用,陕暖协建议收藏...
本文源自网络 引言根据国家标准<建筑抗震设计规范>GB50011-2010 中第13.4.3 条和<建筑机电工程抗震设计规范>GB50981-2014中第3.1.3条均为强制条 ...
- 基于tutk方案的p2p源码_基于JAVA的局域网文件共享平台P2P实训项目源码(毕业设计 课程设计)...
[实例简介] 基于JAVA的局域网文件共享平台P2P实训项目源码(毕业设计 课程设计). 可直接运行.做毕业设计.课程设计或者想研究下技术的可以下载学习.需要更多资源的可以关注我. [实例截图] [核 ...
- 常见的预设分栏包括_计算机应用基础_实训项目二Word综合应用
. 专业学习资料 . 实训项目二 Word 综合应用示例 实训项目二 Word 综合应用 实训满分 20 分 . 以日常应用为基础 , 设计一个综合运用 Word 基本操作技能解决实际问题的文档 . ...
- java 实训项目_实训方案(JavaWeb项目实训)-
实训方案(JavaWeb项目实训)- 2012-2013学年第一学期 <Java Web项目开发实训>课程实施方案 课程名称(英文):Training of Java Web Projec ...
- java实训小项目6_实训项目
layout: post title: 实训项目 date: 2020-12-6 author: XiaoJia849 categories: - 开发部 tags: - 后端 - springboo ...
- JAVA实训项目:银行网银系统管理平台(含源码)
JAVA实训项目:银行网银系统管理平台(含源码) 文章目录 JAVA实训项目:银行网银系统管理平台(含源码) 前言 一.项目功能需求描述以及相关技术的应用 相关技术应用 二.设计过程 系统流程图 1. ...
- 实训项目2Linux基本命令,实训项目2 Linux文件系统管理
实训项目2 Linux文件系统管理 发布时间:2011-06-24 15:51:10来源:红联作者:397778823 一. 实训目的: 1. 掌握磁盘分区的方法: 2. 掌握文件系统的建立.挂装.解 ...
- python实训项目-黑马程序员上海校区Python21期Django项目实训
黑马程序员上海中心 月薪一万只是起点 关注 晚上十点,一名名Python学生正在酣畅淋漓地撸代码,手指不间断地敲击着键盘,发出机械而清脆的声音. 各个小组在经过为期4天的django项目小组开发,终于 ...
最新文章
- 手机验证码倒记时函数
- androidstuido_schooltest_4_phone
- Android 插件框架实现思路及原理
- 利用微信的weui框架上传、预览和删除图片
- php 首页加背景图片,如何在页首添加一张背景图片
- 终于有人把RISC-V讲明白了
- vue - 使用vue实现自定义多选与单选的答题功能
- CUDA 8.0 + VS2013 + win10 x64开发环境搭建
- 本地安装易邮邮箱服务器并用foxmail 连接测试
- 输出数组元素(c语言)
- 【转载】什么是公网IP、内网IP和NAT转换?
- pubg显示服务器安装失败,绝地求生全军出击怎么安装不了 安装失败解决办法
- 生成验证码_JSP源代码
- AMT说产业互联网络
- 爱立信携手韩国SK电讯和宝马实现全球首个多车辆5G测试
- 把WinRAR默认压缩格式换为ZIP
- 【简】题解 吉首大学第十一届“新星杯”大学生程序设计大赛
- iphone6 适配和分辨率
- 《自动控制原理》PPT例题集合
- OOA OOP OOD