实训项目“你画我猜”总结_前端篇

为期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期,这个产品会越来越好,因为我们对它已经不止是一个责任,更多的是一种拥有感。

 

posted @ 2012-05-29 15:31 hlily 阅读(...) 评论(...) 编辑 收藏