javascript - Update shape position with Canvas and NodeJS -
using nodejs , socket.io, i'm making quick canvas app moves shape across screen. data appear on clients. each square timestamped determine draw order. below client.html. says "cannot set property lastupdate" of undefined. how considered undefined? tried defining many times @ top. what's wrong?
<!doctype html> <html lang="en"> <head> <script src="/socket.io/socket.io.js"></script> <script> "use strict"; var canvas; var ctx; var socket; //var lastupdate = new date().gettime(); /*var square = { lastupdate: new date().gettime(), x: 0, y: 0, height: 100, width: 100 };*/ // //var person = {name: 'user' + (math.floor((math.random() * 1000)) + 1)}; //var user = 'user' + (math.floor((math.random() * 1000)) + 1); //var user = object.keys(something name); //var user = object.keys(user); //function person(name) { //this.name = name; //} //var user = object.keys(person); //lets try using prototype /*function user(lastupdate, x, y, width, height) { this.lastupdate = lastupdate; this.x = x; this.y = y; this.width = width; this.height = height; }*/ var name = {lastupdate: new date().gettime(), x: 0, y: 0, width: 100, height: 100}; var user = object.keys(name); var draws = {}; function updateposition() { var message = { xupdate: 10, yupdate: 5 } socket.emit('movementupdate', message); } /*function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fillrect(square.x, square.y, square.width, square.height); }*/ // function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); var keys = object.keys(draws); for(var = 0; < keys.length; i++) { var drawcall = draws[keys[i]]; //order draw //gets drawcalls instead of var square ctx.fillrect(drawcall.x, drawcall.y, drawcall.width, drawcall.height); } } // function setup() { var time = new date().gettime(); //console.log(time); var x = math.floor(math.random()*(300-10) + 10); //random x position var x = math.floor(math.random()*(300-10) + 10); //random y position draws[user] = {lastupdate: time, x: x, y: y, width: 100, height: 100}; } /*function update(data) { square = data; redraw(); }*/ // function handlemessage(data) { if(!draws[data.name]) { draws[data.name] = data.coords; } else if(data.coords.lastupdate > draws[data.name].lastupdate) { draws[data.name] = data.coords; } draw(); //redraw after updates } function init() { canvas = document.queryselector("#canvas"); ctx = canvas.getcontext("2d"); socket = io.connect(); socket.on('connect', function () { //setinterval(updateposition, 1000); setinterval(function() { var time = new date().gettime(); //console.log(time); console.log(draws); **draws[user].lastupdate = time; //lastupdate undefined** draws[user].x += 5; socket.emit('draw', {name: user, coords: draws[user]}); draw(); }, 3000); }); socket.on('updateddraw', handlemessage); //socket.on('updatedmovement', updateposition); //undefined, used 'update'. 'handlemessage'? } window.onload = init; </script> </head> <body> <canvas id="canvas" height="500" width="500">please use html 5 browser</canvas> </body> </html>
Comments
Post a Comment