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

最新推荐文章于 2024-06-10 15:27:42 发布

buppt

最新推荐文章于 2024-06-10 15:27:42 发布

阅读量3.4k

点赞数 3

分类专栏： vue 文章标签： vue canvas websocket 你画我猜小游戏

本文链接：https://blog.youkuaiyun.com/buppt/article/details/82911003

版权

本文介绍了一个使用vue、canvas和websocket技术实现的你画我猜小游戏。项目包括登录、画图、座位选择、聊天功能及服务端逻辑。已完成登录、座位选择、发送内容和接收聊天记录等功能，后续将逐步完善。项目采用vuex管理状态，通过websocket实现实时通信。源代码已上传至github。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做这个主要是学习使用一下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 = () =>