使用websocket实现“你画我猜”

1，环境配置（nodejs）

文件结构：

package.json：

{"name": "websocket","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"node-websocket-server": "^1.1.4","ws": "^6.1.0"}
}

2，服务器配置（server.js）

//配置一些变量表达游戏状态
var LINE_SEGMENT = 0;
var CHAT_MESSAGE = 1;
var GAME_LOGIC = 2;var WAITING_TO_START = 0;
var GAME_START = 1;
var GAME_OVER = 2;
var GAME_RESTART = 3;var playerTurn = 0;
//配置游戏中使用的关键词
var wordsList = ["apple","pear","angry","happy","boat","desk"];
var currentGameState = WAITING_TO_START;
var gameOverTimeout;//创建websocket连接
var WebSocketServer = require('ws').Server;var wss = new WebSocketServer({ port: 8181 });//定义广播函数
wss.broadcast = function broadcast(message) {wss.clients.forEach(function each(client) {client.send(message);});
};//建立连接时向客户端发送一条msg
wss.on('connection', function (ws) { var msg = "Welcome to join the party! Total connection: " + wss.clients.size;    //定义发送数据的类型，并广播               var data = {};data.dataType = CHAT_MESSAGE;data.name = "Server";data.message = msg;wss.broadcast(JSON.stringify(data));//定义控制游戏逻辑的数据类型，并广播var gameLogicData = {};gameLogicData.dataType = GAME_LOGIC;gameLogicData.gameState = WAITING_TO_START;wss.broadcast(JSON.stringify(gameLogicData));//开始游戏的条件if(currentGameState == WAITING_TO_START && wss.clients.size >=2){startGame();}//广播接收到的客户端发来的消息，并广播ws.on('message', function (message) {var obj = eval('(' + message + ')');wss.broadcast(JSON.stringify(obj));//如果判断收到的消息是聊天消息if(obj.dataType == CHAT_MESSAGE){//如果接收到的消息是正确答案，广播并改变当前游戏状态if(currentGameState == GAME_START && obj.message == currentAnswer){var gameLogicData = {};gameLogicData.dataType = GAME_LOGIC;gameLogicData.gameState = GAME_OVER;gameLogicData.winner = obj.name;gameLogicData.answer = currentAnswer;wss.broadcast(JSON.stringify(gameLogicData));currentGameState = WAITING_TO_START;clearTimeout(gameOverTimeout);}}else if(obj.dataType == GAME_LOGIC && obj.gameState == GAME_RESTART){startGame();}     });});//开始游戏函数，初始化答案，控制开始的用户是谁
function startGame(){playerTurn = (playerTurn +1) % wss.clients.size;var answerIndex = Math.floor(Math.random()* wordsList.length);currentAnswer = wordsList[answerIndex];var gameLogicData1 = {};gameLogicData1.dataType = GAME_LOGIC;gameLogicData1.gameState = GAME_START;gameLogicData1.isPlayerTurn = false;wss.broadcast(JSON.stringify(gameLogicData1));var index = 0;wss.clients.forEach(function each(client) {if(index == playerTurn){var gameLogicData2 = {};gameLogicData2.dataType = GAME_LOGIC;gameLogicData2.gameState = GAME_START;gameLogicData2.answer = currentAnswer;gameLogicData2.isPlayerTurn = true;wss.broadcast(JSON.stringify(gameLogicData2));}index ++;});gameOverTimeout = setTimeout(function(){var gameLogicData = {};gameLogicData.dataType = GAME_LOGIC;gameLogicData.gameState = GAME_OVER;gameLogicData.winner = 'no-one';gameLogicData.answer = currentAnswer;wss.broadcast(JSON.stringify(gameLogicData));  currentGameState = WAITING_TO_START;   },60*1000);currentGameState = GAME_START;}console.log("Websocket server is running");

3，客户端配置（client.html）

创建一个websocket连接到服务器

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>WebSocket Echo Demo</title><meta name="viewport" content="width=device-width, initial-scale=1"/><link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="index.css">
</head><body ><div id="game"><h1>你画我猜</h1><canvas id="drawing-pad" width="450" height="320"></canvas><div class="vertical-center"><ul id="chat-history"></ul><div class="container"><form role="form" id="chat_form" onsubmit="sendMessage(); return false;"><div class="form-group">输入：<input class="form-control" type="text" name="message" id="message" value="" /><button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">Send</button><button type="button" id="restart" class="btn btn-primary">restart</button></div></form></div></div></div><script type="text/javascript" src="index.js"></script><script>//启动一个websocket，并连接到服务器var ws = new WebSocket("ws://localhost:8181");ws.onopen = function (e) {console.log('Connection to server opened');}ws.onmessage = function(evt){var data = JSON.parse(evt.data);if(data.dataType == websocketGame.CHAT_MESSAGE){$("#chat-history").append("<li>" + data.name + " said: " + data.message + "</li>");}else if(data.dataType == websocketGame.LINE_SEGMENT){drawLine(ctx,data.startX,data.startY,data.endX,data.endY,1);}else if(data.dataType == websocketGame.GAME_LOGIC){if(data.gameState == websocketGame.GAME_OVER){websocketGame.isTurnToDraw = false;$("#chat-history").append("<li>" + data.winner + " wins! The answer is '" + data.answer + "'.</li>");$("#restart").show();}else if(data.gameState == websocketGame.GAME_START){canvas.width = canvas.width;$("#restart").hide();$("#chat-history").html("");if(data.isPlayerTurn){isTurnToDraw = true;$("#chat-history").append("<li>Your turn to draw. pLease draw ' " + data.answer + "'.</li>");}else{$("#chat-history").append("<li>Game started. Get ready. You have ne minute to guess.</li>");}}}};function sendMessage() {var msg = $('#message').val();var data = {};data.dataType = websocketGame.CHAT_MESSAGE;data.message = msg;   data.name = "client1";  ws.send(JSON.stringify(data));$('#message').val("");}</script></body>
</html>

4，客户端JS文件（Index.js）

控制画板的绘图功能，同步多个用户之间的绘图

var websocketGame = {isDrawing:false,startX:0,startY:0,LINE_SEGMENT : 0,CHAT_MESSAGE : 1,GAME_LOGIC:2,WAITING_TO_START:0,GAME_START:1,GAME_OVER:2,GAME_RESTART:3,isTurnToDraw:false
}var canvas = document.getElementById("drawing-pad");
var ctx = canvas.getContext('2d');function drawLine(ctx,x1,y1,x2,y2,thickness){ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.lineWidth = thickness;ctx.strokeStyle = "#444";ctx.stroke();
}$(document).ready(function(){$('#drawing-pad').mousedown(function(e){var canvasPosition = $(this).offset();var mouseX = (e.pageX - canvasPosition.left) || 0;var mouseY = (e.pageY - canvasPosition.top) || 0;websocketGame.startX = mouseX;websocketGame.startY = mouseY;websocketGame.isDrawing = true;});$('#drawing-pad').mousemove(function(e){if(websocketGame.isDrawing){var canvasPosition = $(this).offset();var mouseX = (e.pageX - canvasPosition.left) || 0;var mouseY = (e.pageY - canvasPosition.top) || 0;}if(!(mouseX == websocketGame.startX && mouseY == websocketGame.startY)){drawLine(ctx,websocketGame.startX,websocketGame.startY,mouseX,mouseY,1);var data = {};data.dataType = websocketGame.LINE_SEGMENT;data.startX = websocketGame.startX;data.startY = websocketGame.startY;data.endX = mouseX;data.endY = mouseY;ws.send(JSON.stringify(data));websocketGame.startX = mouseX;websocketGame.startY = mouseY;}});$('#drawing-pad').mouseup(function(e){websocketGame.isDrawing = false;});})

5，CSS文件配置

body{background:#ccd6e1;font-family:arial,serif;
}#game{width:450px;margin:0 auto;
}#game h1{text-align: center;margin-bottom:10px;font-size:20px;
}#drawing-pad{position:relative;border:solid 1px black;background: white;
}.vertical-center{position:relative;
}ul li{list-style:none;
}#chat-history{height:100px;overflow:auto;border:solid 1px #ccc;font-size:14px;
}

使用websocket实现“你画我猜”相关推荐

Vue2 + Nodejs + WebSocket 完成你画我猜多人在线游戏
使用 websocket + vue2 即可完成一个很有意思的在线游戏作品. 你画我猜,相信大家对这个游戏都很熟悉. 我用Vue2 + mint-ui + nodejs + websocket 实现了 ...
canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
基于 socket.io 实现实时你画我猜游戏
前言一直都想好好的学习运用node,一直都不知道要做什么东西,最近Java Web老师要求做个前端的应用,既然是前端应用,那肯定得是单页应用了,而且node很适用于高并发的实时应用,所以便选择nod ...
腾讯云搭建多终端《你画我猜》Socket服务器
项目概述 Java课大作业,做一个小游戏,三人Git协作,不同终端,一个分支三个文件夹互不影响.Demo地址 ,Github地址.先来目睹一下吧! 原理图当玩家1在使用画笔在画板上进行绘图工作时,把 ...
webrtc+canvas+socket.io从零实现一个你画我猜 | 掘金技术征文
开场白最近键盘坏了,刚好看到掘金有声网的技术征文,想整个键盘.于是就开始从零开始学习webrtc, 一开始看文档就是个素质三连.这么难啊,这咋整啊,这谁顶的住啊.于是就开始全网找资料,很幸运的在掘金 ...
上一局APP玩，你画我猜，作为灵魂画手从没服过谁
有很多闲暇的时候总想去玩游戏,因此在一局上面开始玩小游戏.还别说一玩就上瘾,这个游戏也太容易让人去接受他了,因为玩游戏的时候感受到这个游戏的过程还挺快乐,而且玩你画我猜的时候,让自己的感受特别明显.我 ...
写Rap，编菜谱，你画我猜……这些 AI demo 我可以玩一天！
文 | ZenMoore 编 | 小轶上次写的那篇 <Prompt 综述+15篇最新论文梳理]> 有亿点点肝.这次给大家整点轻松好玩的(顺便给这篇推文打个广告,快去看!). 不知道读者朋 ...
你画我猜微擎版小程序源码
介绍: 你画我猜微擎版小程序源码,外面卖2000,搭建比较简单,UI非常美,可完美运营,里面功能挺多. 需要一个备案域名一台服务器和机灵的小脑袋瓜.教程就不讲了,微擎后台!我有发过,可以直接找一下微 ...
要和文心一言来一把你画我猜吗？
想和文心一言来一把你画我猜吗? ChatGPT的爆火,让AI对话模型再次走入大众视野.大家在感叹ChatGPT的智能程度时,总会忍不住想:如果我们也有自己的AI对话模型就好了.在社会的压力下,国内的厂 ...

使用websocket实现“你画我猜”

1，环境配置（nodejs）

2，服务器配置（server.js）

3，客户端配置（client.html）

4，客户端JS文件（Index.js）

5，CSS文件配置

使用websocket实现“你画我猜”相关推荐

最新文章

热门文章

使用websocket实现“你画我猜”

1，环境配置（nodejs）

2，服务器配置 （server.js）

3，客户端配置（client.html）

4，客户端JS文件（Index.js）

5，CSS文件配置

使用websocket实现“你画我猜”相关推荐

最新文章

热门文章

2，服务器配置（server.js）