Добрый день.
Вопрос такой Socket IO, как на канвасе при подключении нового пользователя создать скажем еще один круг, и показать что на поле помимо его круга есть и круги других пользователей.
Собственно моя наркомания на стороне пользователя:
var socket = io.connect('http://localhost:3000');
var size = 32, field, player;
function init() {
field = new Field(0, 0, (16 * size), (12 * size));
var canvas = document.getElementById('gameField');
canvas.width = field.width;
canvas.height = field.height;
context = canvas.getContext('2d');
}
function Player(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
this.draw = function(color, globalAlpha) {
context.globalAlpha = globalAlpha;
context.fillStyle = color;
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, (Math.PI * 2), true);
context.fill();
};
}
function Field(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.draw = function(color, globalAlpha) {
context.globalAlpha = globalAlpha;
context.fillStyle = color;
context.fillRect(this.x, this.y, this.width, this.height);
};
}
function draw() {
field.draw('#fff', 1);
player.draw('#000', 1);
}
function mouseClick() {
$('#gameField').click(function(e) {
var offset = $(this).offset();
var mouseX = (e.pageX - Math.floor(offset.left));
var mouseY = (e.pageY - offset.top);
socket.emit('coordinates', { x : mouseX, y : mouseY});
});
}
function mouseMove() {
$('#gameField').mousemove(function(e) {
var offset = $(this).offset();
var mouseX = (e.pageX - Math.floor(offset.left));
var mouseY = (e.pageY - offset.top);
//console.log(mouseX+' '+mouseY);
});
}
$(document).ready(function() {
init();
mouseClick();
mouseMove();
socket.on('connecting', function() {
});
socket.on('connect', function () {
var x = y = ((Math.random() * 200) + 1);
if ((x + 16) % size != 0) {
mouseX = x - (x % size) + size / 2;
};
if ((y + 16) % size != 0) {
mouseY = y - (y % size) + size / 2;
};
socket.emit('coordinates', { x : mouseX, y : mouseY});
});
socket.on('ball', function (data) {
if ((data.x + 16) % size != 0) {
mouseX = data.x - (data.x % size) + size / 2;
};
if ((data.y + 16) % size != 0) {
mouseY = data.y - (data.y % size) + size / 2;
};
player = new Player(mouseX, mouseY, size/2);
draw();
});
});
Сервера:
var io = require('socket.io')(server);
io.on('connection', function (socket) {
socket.on('coordinates', function (data) {
socket.emit('ball', data);
socket.broadcast.emit('ball', data);
});
});
