d4ne

Members
  • Content Count

    1
  • Joined

  • Last visited

  1. I'm trying to move a canvas object towards a onmousedown position, which gets sent from a user to the server. But my problem is the following: The object on the canvas is only moving a little step towards the delivered position. There must be a problem which could be caused by the dest calculation. Youtube video which shows my problem: https://www.youtube.com/watch?v=XxB1dNsuY38 A jsfiddle with a working example: http://jsfiddle.net/loktar/5d02ooaf/ Code which sends the position from the user to the server and which draws each user on the canvas: <script type="text/javascript"> var ctx = document.getElementById("ctx").getContext("2d"); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight - 142; var socket = io(); socket.on('newPositions', function(data) { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = "rgb(255,0,0)"; ctx.beginPath(); for(var i = 0; i < data.length; i++){ ctx.arc(data[i].x, data[i].y, 10, 0, Math.PI * 2); } ctx.closePath(); ctx.fill(); }); document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: true}); } document.onmouseup = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY - ctx.canvas.offsetTop, state: false}); } </script> Part of the app.js code which contains the current position update code var serv = require('http').Server(app); var SOCKET_LIST = []; var PLAYER_LIST = []; var Player = function(id, x, y){ var self = { x: 100, y: 100, id: id, number: "" + Math.floor(10 * Math.random()), mouseMovement: false, maxSpd: 5, radius: 10 } self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } return self; } var io = require('socket.io')(serv, {}); io.sockets.on('connection', function(socket){ console.log('socket connection'); socket.id = Math.random(); SOCKET_LIST[socket.id] = socket; var player = Player(socket.id); PLAYER_LIST[socket.id] = player; socket.on('disconnect', function(){ delete SOCKET_LIST[socket.id]; delete PLAYER_LIST[socket.id]; }); socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); }); setInterval(function(){ var pack = []; for(var i in PLAYER_LIST){ var player = PLAYER_LIST[i]; player.updatePosition(); pack.push({ x:player.x, y:player.y, number:player.number }); } for(var i in SOCKET_LIST){ var socket = SOCKET_LIST[i]; socket.emit('newPositions', pack); } }, 1000/30); Explaination: The following code sends the target position to the server: document.onmousedown = function(event) { socket.emit('positionUpdate', {x: event.pageX - ctx.canvas.offsetLeft, y: event.pageY -ctx.canvas.offsetTop, state: true}); } Then the following code will be triggered: socket.on('positionUpdate', function(data){ player.mouseMovement = data.state; player.updatePosition(data.x, data.y); }); Which will set the player.mouseMovement to true and delivers the targeted x and y cordinates to the player.updatePosition function: self.updatePosition = function(x, y) { if(self.mouseMovement){ // Problem movement var targetX = x; var targetY = y; var tx = targetX - self.x; var ty = targetY - self.y; var dist = Math.sqrt(tx * tx + ty * ty); var velX = (tx / dist) * self.maxSpd; var velY = (ty / dist) * self.maxSpd; if (dist > self.radius / 2) { self.x += velX; self.y += velY; } // Problem movement end } } I would appreciate any kind of help or suggestions.