Skip to content

cyanxxx/colorDraw

Repository files navigation

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值

About

你画我猜的手机版vue构建

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published