Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

项目地址:https://github.com/jrainlau/draw-something

下载 & 运行

git clone git@github.com:jrainlau/draw-something.git
cd draw-something && npm install
node ws-server.js // 开启websocket服务器
npm run dev // 运行客户端程序
然后浏览器打开localhost:8080即可

效果预览:

整体架构

因为闲得慌,一直和朋友在玩你画我猜之类的小游戏,突然想到能不能自己也做一个呢,反正闲着也是闲着,同时正好可以学习一下websocket的用法。

首先分析整体架构部分:

1265278909-576fd562b4a6f_articlex

可以看到,整体架构非常简单,仅仅是一台服务器和两个客户端。

  • WebSocket服务器:提供数据同步,内容分发功能,采用nodejs写成。
  • 绘图画布:进行绘图的区域,同时能够获取关键词,其绘制的内容会同步到猜图画布中。
  • 猜图画布:同步自绘图画布,输入框能够提交关键词,检测答案是否正确。

下面来看具体的代码实现。

WebSocket服务器

服务器采用node.js进行搭建,使用了ws实现websocket功能。新建一个名为ws-socket.js的文件,代码如下:

使用方法基本按照ws的文档即可。其中ws.on('message', (message) => { .. })方法会在接收到从客户端传来消息时执行,利用这个方法,我们可以从绘图画布不断地向服务器发送绘图位点的坐标,再通过.send()方法把坐标分发出去,在猜图画布中获取坐标,实现绘图数据的同步。

客户端结构

作为客户端,我选择了vue进行开发,原因是因为vue使用简单快速。事先说明,本项目仅仅作为日常学习练手的项目而非vue的使用,所以有蛮多地方我是图方便暴力使用诸如document.getElementById()之类的写法的,以后有机会再改成符合vue审美的代码吧~

客户端结构如下:

详细代码请直接浏览项目,这里仅对关键部分代码进行剖析。

绘图画布

位于./script/components/drawing-board.vue文件即为绘图画布组件。首先我们定义一个Draw类,里面是所有绘图相关的功能。

嗯,相信看代码很容易就看懂了当中逻辑,关键就是在drawing()的时候要不断地把坐标发送到服务器。

定义好Draw类以后,在ready阶段使用即可:

猜图画布

猜图画布很简单,只需要定义一个canvas画布,然后接收服务器发送来的坐标并绘制即可。看代码:

到这里,游戏已经可以玩啦!不过还有很多细节是有待加强和修改的,比如可以给画笔选择颜色啊,多个用户抢答计分啊等等。

后记

大半天时间鼓捣出来的玩意儿,虽然粗糙,但是学到的东西还真不少,尤其是websocket和canvas这两个我所不熟悉的领域,果然实践才能出真知。

选择ES6真的能够极大地提升工作效率,Class语法的出现简直不能更赞,作为才学习jQuery源码没多久的我来说,ES6真的非常小清新。

欢迎持续关注我的专栏,会不断送出干货哦,尽请期待!

2 10 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部