Canvas+Socket搞出一个多人游玩的“我画你猜”

今天是个好日子,我们来一起利用socket.io和canvas这两样利器,搞出个简单的《我画你猜》游戏吧

好吧,天下武功为快不破,赶紧先上个目录结构

实现消息的即时通信

由于之前专门写过文章介绍了socket.io实现即时通信的内容,那么我这边就尽量快速写起了

首先通过express来启动一个服务并且来创建socket.io的连接

启动服务并建立连接

服务端

启动服务,然后访问localhost:8888,就可以访问到index.html文件上的内容了

小贴士

在客户端访问io的时候有时候会报的错误,就是需要先启动服务后才会自动生成一个 文件,如上图所示再去引用就OK了

客户端

到这一步刷新页面在控制台里就可以看到这7个字了

发送/接收/展示消息

写到这里,只是迈出了小小的一步罢了,接下来,我们快马加鞭继续写下处理消息的逻辑吧

服务端

上面代码里把消息数据都打包成json的格式是为了方便处理,毕竟消息数据只能接收字符串的格式

然后在发送的时候再通过给转成json字符串,这样就不会导致报错了

当然解析对应的消息数据时再通过来转换成真正的json即可了

服务端发送和接收消息都搞完了,接下来就该客户端出场了,客户端除了上述两个功能之外还会展示消息(听起来屌屌的)

那么,不啰嗦了,快开搞吧!!!

客户端

客户端上述代码都做了哪些事情?

常量区分聊天与绘画

监听服务端发来的消息

消息类型为聊天

转换消息为json格式

监听消息

发送消息

点击or回车发送

发送消息方法

以上就是关于消息通信的基本实现了,下面我们要进入下一环节,canvas登场了,继续看下去

Canvas来绘制画板

canvas这个元素已经等候多时了,终于轮到它大展身手了,用过canvas的都知道,我们常见的都是在2d上进行绘图操作,所以在此之前先来获取一下

别看上面代码突然多了好多好多,但实际上也无非下面几点,莫慌,我们来梳理一下

区分消息为画线的数据

在监听消息的函数里,通过`data.type === LINE`来区分出来消息类型为画线的数据

鼠标在canvas上的事件

修改gameObj.isDrawing状态为初始值false

记录移动的位置

绘制线段

发送画线数据到服务端

把移动的最新位置更新到gameObj上

记录点击时的位置

将按下的位置赋给gameObj.startX和gameObj.startY

修改gameObj.isDrawing状态为true

mousedown按下事件

mousemove移动事件

mouseup抬起事件

实现画线方法

ctx.beginPath() - 绘制初始路径

ctx.moveTo(x1, y1) - 线段下笔点

ctx.lineTo(x2, y2) - 线段移动路径

ctx.lineWidth - 线段宽度

ctx.storkeStyle - 线段颜色

ctx.stroke() - 绘制线段

说难不难,说简单不简单。不过视熟练程度不同,会有不同的感受罢了,多写多练习,知识自然会收录到自己的手中

写到这里基本可以说是socket.io和canvas的要领都掌握了,那么最后的最后,我们不能忘记文章的标题主旨,是多人游玩,不仅仅是简单的自娱自乐,也要众人同乐

那么让我们再加把劲,实现多人游戏逻辑

构建多人游戏

游戏逻辑

玩游戏嘛,自然有个游戏的逻辑和规则

游戏逻辑在客户端方面的实现相对来说还是比较简单的,更多的操作还是要靠服务端那里了

那么就先由简到难的实现一下吧

客户端

继续来梳理一下以上代码都做了什么?

游戏常量区分消息类型及游戏状态

};

复制代码

data.type为GAME表示进行游戏

data.state来判断游戏当前的进度

清空画布、隐藏按钮

显示重新开始按钮

显示获胜者和答案

清空画布

清空聊天记录和隐藏重新开始按钮

通过data.isPlayer来区分是绘图者还是猜图者以展示不同文案

游戏开始

游戏结束

重新开始

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200225A05DQA00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券