Ho provato a creare un semplice Multiplayer con HTML5 Canvas, JavaScript (anche utilizzando la libreria di ereditarietà di John Resig simple) e Node.js con Socket.IO. Il mio codice cliente:Multiplayer 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();
E il codice del server:
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(){
})
});
E quando corro ho due del cliente con il primo cliente può muoversi secondo client Rect e con il secondo cliente muoversi prima rect cliente e qualcosa di simile con il terzo client può spostare il primo e il secondo client di rect.
Ho una domanda su come creare un vero Multi-Player? qualcosa come: Aprire tre client e il primo client ottenere rect1, secondo rect2 e l'ultimo rect3. Il primo client può solo spostare rect1, il terzo client può spostare solo rect3.
Forse qualcuno ha un'idea? Cerco su Google ma non trovo risposta.
Ci scusiamo per la mia lingua inglese.
Super navigatore 2 Turbo HD Remix Introduzione allo sviluppo HTML5 gioco è impressionante! Grazie per le risposte! generalhenry, provo il tuo codice client/server in uso, ma per il mio non funziona. Ma grazie per aiutarmi a capire Multi-Player! – rhavd
Non ho testato il mio codice modificato quindi ci sono probabilmente alcuni bug, ma l'idea è^_^ – generalhenry
Tutti i collegamenti sono attualmente morti da questa risposta. –