所以，我正在 SocketIO 和 Canvas 中开发多人游戏，但遇到了问题。每当用户断开游戏连接时，他们的 Angular 色仍然存在。我认为解决这个问题的方法是在他们断开连接时从游戏中删除他们的绘画或 Angular 色，但我就是不知道如何做到这一点。请帮忙!谢谢!
这是我的代码:
服务器.js
var express = require('express');
var http = require('http');
var path = require('path');
var socketIO = require('socket.io');
//starts the express app
var app = express();
var server = http.Server(app);
var io = socketIO(server);
//where to run the server
app.set('port', 5000);
//Static files such as css, html, and javascript
app.use('/public', express.static(__dirname + '/public'));
// Routing
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
//Starting the Server
server.listen(5000, function() {
console.log('server running on port 5000');
});
io.on('connection', function(socket) {
});
setInterval(function() {
io.sockets.emit('message', 'hi');
}, 1000);
//player connection
var players = {};
io.on('connection', function(socket) {
socket.on('new player', function() {
players[socket.id] = {
x: 300,
y: 300
}
});
socket.on('movement', function(data) {
var player = players[socket.id] || {};
if(data.left) {
player.x -= 5;
}
if(data.up) {
player.y -= 5;
}
if(data.right) {
player.x += 5;
}
if(data.down) {
player.y += 5;
}
});
socket.on('disconnect', function() {
io.emit('user disconnected', 'user disconnected');
})
});
setInterval(function() {
io.sockets.emit('state', players);
}, 1000 / 60);
index.html
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
width: 800px;
height: 600px;
border: 5px solid black;
}
</style>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="gameBoard">
<canvas id="canvas"></canvas>
</div>
<script>
var socket = io();
socket.on('message', function(data) {
console.log(data);
});
socket.emit('new player');
setInterval(function() {
socket.emit('movement', movement);
}, 1000/ 60);
//Actual Canvas Code
var movement = {
up: false,
down: false,
left: false,
right: false
}
document.addEventListener('keydown', function(event) {
switch(event.keyCode) {
case 65:
movement.left = true;
break;
case 87:
movement.up = true;
break;
case 68:
movement.right = true;
break;
case 83:
movement.down = true;
break;
}
});
document.addEventListener('keyup', function(event) {
switch(event.keyCode) {
case 65:
movement.left = false;
break;
case 87:
movement.up = false;
break;
case 68:
movement.right = false;
break;
case 83:
movement.down = false;
break;
}
});
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext('2d');
socket.on('state', function(players) {
context.clearRect(0, 0, 800, 600);
context.fillStyle = 'green';
for (var id in players) {
var player = players[id];
context.beginPath();
context.arc(player.x, player.y, 10, 0, 2 * Math.PI);
context.fill();
}
});
</script>
</body>
</html>
最佳答案
您可以使用断开连接事件来查找和删除用户:
socket.on('disconnect', () => {
let i = players.indexOf(socket.id);
players.splice(i, 1);
socket.emit('userDisconnect', socket.id);
//you can use socket.id to identify the user in the front end
//and delete his objects if necessary
});
关于javascript - 用户断开连接后删除 Canvas 和套接字 IO 中的形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49459666/