canvas+websocket+vue做一个你画我猜小游戏

做这个主要是学习使用一下canvas和websocket，项目地址。

你画我猜大家应该都玩过，一个人画，其他人猜。现在刚刚实现了最基本的功能，以后慢慢修改。

项目截图

完成进度

• 登录，登录后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 = ()