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

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