Tôi đang cố gắng tạo nhiều trình phát đơn giản với HTML5 Canvas, JavaScript (quá sử dụng thư viện Thừa kế đơn giản của John Resig) và Node.js bằng Socket.IO. Mã của tôi khách hàng:Nhiều người chơi HTML5, Node.js, Socket.IO
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var socket = new io.Socket('127.0.0.1', {port: 8080});
var player = null;
var UP = 'UP',
LEFT = 'LEFT',
DOWN = 'DOWN',
RIGHT = 'RIGHT';
socket.connect();
socket.on('connect', function() {socket.send();
console.log('Connected!');
player = new Player(50, 50);
});
socket.on('message', function(msg) {
if(msg == 'UP') {
player.moveUP();
} else if(msg == 'LEFT') {
player.moveLEFT();
} else if(msg == 'DOWN') {
player.moveDOWN();
} else if(msg == 'RIGHT') {
player.moveRIGHT();
} else {
}
});
socket.on('disconnect', function() {
console.log('Disconnected!');
});
var Player = Class.extend({
init : function(x, y) {
this.x = x;
this.y = y;
},
setX : function(x){
this.x = x;
},
getX : function(){
return this.x;
},
setY : function(y){
this.y = y;
},
getY : function(){
return this.y;
},
draw : function(){
context.clearRect(0, 0, 350, 150);
context.fillRect(this.x, this.y, 15, 15);
},
move : function() {
this.x += 1;
this.y += 1;
},
moveUP : function() {
this.y--;
},
moveLEFT : function() {
this.x--;
},
moveDOWN : function() {
this.y++;
},
moveRIGHT : function() {
this.x++;
}
});
function checkKeyCode(event) {
var keyCode;
if(event == null) {
keyCode = window.event.keyCode;
} else {
keyCode = event.keyCode;
}
switch(keyCode) {
case 38: // UP
player.moveUP();
socket.send(UP);
break;
case 37: // LEFT
player.moveLEFT();
socket.send(LEFT);
break;
case 40: //DOWN
player.moveDOWN();
socket.send(DOWN);
break;
case 39: // RIGHT
player.moveRIGHT();
socket.send(RIGHT);
break;
default:
break;
}
}
function update() {
player.draw();
}
var FPS = 30;
setInterval(function() {
update();
player.draw();
}, 1000/FPS);
function init() {
document.onkeydown = checkKeyCode;
}
init();
Và mã máy chủ:
var http = require('http'),
io = require('socket.io'),
buffer = new Array(),
server = http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('<h1>Hello world</h1>');
});
server.listen(8080);
var socket = io.listen(server);
socket.on('connection', function(client){
client.on('message', function(message){
console.log(message);
client.broadcast(message);
})
client.on('disconnect', function(){
})
});
Và khi tôi chạy tôi hai của khách hàng với khách hàng đầu tiên có thể di chuyển khách hàng thứ hai Rect và với khách hàng thứ hai di chuyển rect khách hàng đầu tiên và một cái gì đó giống như với khách hàng thứ ba có thể di chuyển của khách hàng đầu tiên và thứ hai của rect.
Tôi có câu hỏi về cách tạo nhiều người chơi thực sự? một cái gì đó như: Mở ba khách hàng và khách hàng đầu tiên nhận được rect1, rect2 thứ hai và rect3 cuối cùng. Khách hàng đầu tiên chỉ có thể di chuyển rect1, khách hàng thứ ba có thể di chuyển chỉ rect3.
Có thể ai cũng có ý tưởng? Tôi tìm kiếm trong Google nhưng không tìm thấy câu trả lời.
Xin lỗi vì ngôn ngữ tiếng Anh của tôi.
Trình duyệt siêu 2 Turbo HD remix giới thiệu về phát triển trò chơi HTML5 thật tuyệt vời! Cảm ơn bạn đã trả lời! generalhenry, tôi thử mã máy khách/máy chủ được điều chỉnh của bạn nhưng đối với tôi không hoạt động. Nhưng cảm ơn vì đã giúp tôi hiểu nhiều người chơi! – rhavd
Tôi không kiểm tra mã đã sửa đổi của mình để có thể có một số lỗi, nhưng bạn có ý tưởng^_^ – generalhenry
Tất cả các liên kết hiện đã chết từ câu trả lời này. –