Metalhead Posted December 6, 2019 Share Posted December 6, 2019 Hello everybody! I'm new to this site and am quite new to HTML5 game development as a whole. I have watched a few tutorials here and there, and came here in search of help from somebody with more experience than myself to help with my current issue. Currently I am working on a game to run alongside my website (connected to the game in a way). I have gotten a player object that tweens to the position a player clicks on within the canvas to work, but it seems only to work with one person connected only, otherwise the most recently connected player has all control to the position of said player object rather then creating one for themselves. I have tried a couple things (first being to include the image position within the socket.on function) but that only caused the player to be positioned where they clicked without any tweening being done. Here's the code for the client: var socket = io(); var ctx1 = document.getElementById("ctx"); var ctx = document.getElementById("ctx").getContext("2d"); img = new Image(); img.src = "FrontpageGuy.png"; img.xpo = 250; img.ypo = 250; socket.on('newPos',function(data){ ctx.clearRect(0,0,1024,576); for(var i = 0 ; i < data.length; i++){ TweenMax.to(img, 1 ,{ xpo:data[i].x, ypo:data[i].y, repeat:0, }); ctx.drawImage(img, img.xpo, img.ypo); } }); function clickDetector(event) { var xVal = event.clientX; var yVal = event.clientY; console.log("click X:" + xVal + ", click Y:" + yVal); socket.emit('movePlayer', {x:xVal, y:yVal}); } ctx1.addEventListener('click', clickDetector, false); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.