color-draw

你画我猜的手机版vue构建

注意本地运行需要同时启动本地服务端

https://github.com/cyanxxx/color-draw-server

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

目录结构

• build vue-cli的默认配置
• config
  • index 在本地测试时，可以将host改成0.0.0.0可以让手机访问到只要在同一个路由器下，在ipconfig查看本机ip地址在手机输入该地址即可浏览
• src
  • assert 静态图片和全局样式表，字体放在这里
  • components 公用组件
  • router 路由
  • store vuex，这里主要用来存用户信息，同时也保存在localstorge中，方便断线玩家直连
  • views
    • Main 主界面大厅
    • Room 房间
  • bar.js 直接添加在body下的loading组件
  • tip.js 直接添加在body下的提示信息组件
  • permission.js 全局路由守卫，拦截中途进入的用户，可能是断线或不是从主页进去的
  • webSocketServie.js 配置后台路径，接受websocket的onmessage事件，调用在组件注册的事件

Todo

• 画布画的内容在不同手机端显示调整，应一开始就记录同一房间的人手机的画布大小和宽度，根据当前画手的屏幕大小，按比例返回给不同用户的不同x,y值