ฉันพยายามสร้างผู้เล่นหลายคนแบบง่าย ๆ ด้วย HTML5 Canvas, JavaScript (เช่นกันโดยใช้ไลบรารี Inheritance ง่าย ๆ ของ John Resig) และ Node.js ด้วย Socket.IO รหัสลูกค้าของฉัน:
var canvas = document.getElementById ('เกม');
var context = canvas.getContext ('2d');
var socket = new io.Socket ('127.0.0.1', {พอร์ต: 8080});
ผู้เล่น var = null;
var UP = 'UP'
LEFT = 'LEFT'
ลง = 'ลง',
RIGHT = 'RIGHT';
socket.connect ();
socket.on ('เชื่อมต่อ', ฟังก์ชั่น () {socket.send ();
console.log (Connected! ');
ผู้เล่น = ผู้เล่นใหม่ (50, 50);
});
socket.on ('ข้อความ', ฟังก์ชั่น (msg) {
ถ้า (msg == 'UP') {
player.moveUP ();
} อื่นถ้า (msg == 'LEFT') {
player.moveLEFT ();
} อื่นถ้า (msg == 'ลง') {
player.moveDOWN ();
} อื่นถ้า (msg == 'RIGHT') {
player.moveRIGHT ();
} อื่น {
}
});
socket.on ('ยกเลิกการเชื่อมต่อ' ฟังก์ชั่น () {
console.log ( 'ตัดการเชื่อมต่อ!');
});
var Player = Class.extend ({
init: ฟังก์ชั่น (x, y) {
this.x = x;
this.y = y;
}
setX: function (x) {
this.x = x;
}
getX: function () {
คืนค่า this.x;
}
setY: ฟังก์ชัน (y) {
this.y = y;
}
getY: function () {
กลับมานี้
}
draw: function () {
context.clearRect (0, 0, 350, 150);
context.fillRect (this.x, this.y, 15, 15);
}
ย้าย: function () {
this.x + = 1;
this.y + = 1;
}
moveUP: function () {
this.y--;
}
moveLEFT: function () {
this.x--;
}
moveDOWN: function () {
this.y ++;
}
moveRIGHT: function () {
this.x ++;
}
});
ฟังก์ชัน checkKeyCode (เหตุการณ์) {
var keyCode;
if (event == null) {
keyCode = window.event.keyCode;
} อื่น {
keyCode = event.keyCode;
}
สวิตช์ (keyCode) {
เคส 38: // UP
player.moveUP ();
socket.send (UP);
หยุดพัก;
กรณีที่ 37: // ซ้าย
player.moveLEFT ();
socket.send (ซ้าย);
หยุดพัก;
กรณีที่ 40: // DOWN
player.moveDOWN ();
socket.send (ลดลง);
หยุดพัก;
กรณีที่ 39: // RIGHT
player.moveRIGHT ();
socket.send (ขวา);
หยุดพัก;
ค่าเริ่มต้น:
หยุดพัก;
}
}
การปรับปรุงฟังก์ชั่น () {
player.draw ();
}
var FPS = 30;
setInterval (ฟังก์ชั่น () {
อัปเดต ();
player.draw ();
}, 1,000 / FPS);
ฟังก์ชั่น init () {
document.onkeydown = checkKeyCode;
}
ในนั้น();
และรหัสเซิร์ฟเวอร์:
var http = ต้องการ ('http')
io = ต้องการ ('socket.io'),
buffer = new Array ()
server = http.createServer (ฟังก์ชั่น (req, res) {
res.writeHead (200, {'ประเภทเนื้อหา': 'ข้อความ / html'});
ส่งซ้ำ('สวัสดีชาวโลก
');
});
server.listen (8080);
var socket = io.listen (เซิร์ฟเวอร์);
socket.on ('การเชื่อมต่อ' ฟังก์ชั่น (ลูกค้า) {
client.on ('ข้อความ', ฟังก์ชั่น (ข้อความ) {
console.log (ข้อความ);
client.broadcast (ข้อความ);
})
client.on ('ยกเลิกการเชื่อมต่อ' ฟังก์ชั่น () {
})
});
และเมื่อฉันเรียกใช้ไคลเอนต์ที่สองของฉันกับไคลเอนต์แรกสามารถย้ายไคลเอนต์ที่สอง Rect และกับไคลเอนต์ที่สองย้ายแรกไคลเอนต์ rect และสิ่งเช่นไคลเอนต์ที่สามสามารถย้ายแรกและที่สองของไคลเอ็นต์ rect
ฉันมีคำถามว่าจะสร้างผู้เล่นหลายคนได้อย่างไร สิ่งที่ต้องการ: เปิดไคลเอ็นต์ของสามและไคลเอ็นต์แรกรับ rect1, rect2 ที่สองและ rect3 ล่าสุด ลูกค้ารายแรกเท่านั้นที่สามารถย้าย rect1 ลูกค้าคนที่สามสามารถย้าย rect3 เท่านั้น
อาจมีใครมีความคิด? ฉันค้นหาใน Google แต่ไม่พบคำตอบ
ขอโทษสำหรับภาษาอังกฤษของฉันขอบคุณ