做这个主要是学习使用一下canvas和websocket,项目地址。
你画我猜大家应该都玩过,一个人画,其他人猜。现在刚刚实现了最基本的功能,以后慢慢修改。
项目截图
![](https://i-blog.csdnimg.cn/blog_migrate/33945df863a3f7cc4812303adfb0f582.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/e600e6976bf05bb544eb03f4887ecc54.gif)
完成进度
- 登录,登录后username存储到了sessionStorage中。
- 座位,登录后可以选择座位,并通过ws告诉所有人你的座位。
- 发送内容,登录后可以通过ws将输入内容发布给所有人。
- 聊天记录,可以接收所有人的聊天打字内容,可以清屏。
- 开始游戏,一楼可以点击开始游戏按钮,开始游戏后不可再调整座位。
- 按座位顺序轮流进行画图与看图猜词,画图玩家不可以输入内容与发送内容。
- 随机在词表中选择词语。用于练习只写了12个词。
- 发送内容为正确词时特殊显示(游戏开始后有效)。
- 记分
- 多房间游戏
- 移动端
项目架构
客户端
前端从前面的截图可以看到,基本分为四部分,画图部分,选择座位部分,聊天显示部分,发送聊天部分。四部分当然要使用一个websocket连接,所以使用了vuex,同时在vuex中保存用户名等数据。
建立ws连接,存入vuex中。
this.ws = new WebSocket('ws://localhost:3000/');
this.$store.commit('wsStore/connect',ws);
登录部分
这里登录不太重要,就直接把用户名放到sessionStorage里了,同时再存入vuex中供其他部分使用。
saveName(){
if(!window.sessionStorage){
alert("浏览器不支持sessionStorage!");
}else{
let storage = window.sessionStorage;
storage.setItem("username",this.inputName);
}
this.username=this.inputName;
this.showLogin=0;
this.$store.commit('username/setUsername',this.inputName)
}
完整代码可以查看github里的src/components/HomeHeader.vue文件。
画图部分
这部分是最主要的部分,先定义一个canvas
<canvas id="drawBoard" width="700" height="400"></canvas>
然后是一个class draw,这里只是使用画笔的函数,从上面gif可以看出来还可以画直线,矩形,圆,调整颜色等,最后也都是写到这个类里面的。
class canvasDraw{
constructor(id,ws){
this.ws= ws;
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext('2d');
this.stage_info = this.canvas.getBoundingClientRect()
this.path = {
beginX: 0,
beginY: 0,
endX: 0,
endY: 0
}
this.isDraw=false
}
draw(){
let that = this
this.canvas.onmousedown = () => {
that.ctx.beginPath()
that.path.beginX = event.pageX - that.stage_info.left
that.path.beginY = event.pageY - that.stage_info.top
that.ctx.moveTo(
that.path.beginX,
that.path.beginY
)
that.isDraw=true
}
this.canvas.onmousemove = () =>