• Content count

  • Joined

  • Last visited

  1. - Not Working

    Figured it out. Emit an image in a room does work. I just had my socket.on, placed in the wrong file. Added to the correct client file and it all works great!
  2. (On Disconnect) Last player hangs

    The host doesn't get an avatar. He's there as the facilitator who is watching the players and answering questions. Each player has a unique avatar based on a set x, y position. socket.on('setPosition', function(data){ context.clearRect(0, 0, canvas.width, canvas.height); var floorplan = new Image(); floorplan.onload = function () { context.drawImage(floorplan, 150, 360); var img = new Image(); img.onload = function () { context.drawImage(img, data.x, data.y, 85, 210); context.font = '12pt Arial'; context.fillStyle = 'white'; context.textAlign="center"; var rectHeight = 50; var rectWidth = 100; var rectX = data.x; var rectY = data.y+200; context.fillText(, rectX+(rectWidth/2),rectY+(rectHeight/2)); } img.src = data.imgFile; } floorplan.src = '../images/floor6P.png'; }); server side:
  3. - Not Working

    server code: var myroom = 'room' + playerNumber; socket.join(myroom);'showCard', {x: newPlayer.getX, y: newPlayer.getY, objCard: newPlayer.getobjCard}); client code: socket.on('showCard', function(data){ var objCard = new Image(); objCard.onload = function() { context.drawImage(objCard, data.x+100, data.y); console.log('image card'); } objCard.src = data.objCard; }); I emit 'message' and it works, but not when I try to show an image. If I simply use, io.sockets.emit, the image displays, but to all rooms. I only want it in one room.
  4. - Not Working

    Update on this - when I emit a private message it works, when I emit a private picture on canvas, it doesn't work. Any ideas why this would be? Thanks!
  5. - Not Working

    Okay, I think I just answered my own question. I need a for each and then broadcast to the room. If anyone knows a better way, please do let me know. Thanks, Laura
  6. It seems that to send a private message to a player, you are supposed to use I need to emit an image to a specific player so am using this concept, however it doesn't seem to work. Would anyone know how to emit an image to a specific client? Thanks!
  7. (On Disconnect) Last player hangs

    I just realized why my player is hanging. I have a loop to redraw the players, and if array = 0, then it won't go into the loop. players.splice(players.indexOf(removePlayer), 1); for (var i = 0; i < players.length; i++) { socket.broadcast.emit('setPosition', {id: players[i].id, x: players[i].getX, y: players[i].getY, imgFile: players[i].getImgFile, name: players[i].name}); } Is there a better way to drop players?
  8. (On Disconnect) Last player hangs

    I have a multiplayer game that assigns and displays an avatar for each player that accesses the game. When a player leaves the game, it will drop the image so the avatar is no longer on screen. This works - sort of. Here is the problem: Ex: Three players access the game, three avatars are created. Then one player leaves, that avatar is removed from screen. The other two players leave, and for some reason, the last avatar remains on screen. So the host will always see that last avatar sitting there. I'm using splice to remove the players. I check my array and all players dropped from the array. It shows []. I have no clue how that avatar is still there. Is there a way to completely remove that from the game?
  9. So I manged to get the players to appear as a static image in their set locations and update correctly. Now that I updated the code to work for the static image, I will retry the walking Avatar.
  10. mattstyles, I want to first say thank you. You really are making my brain work. Your insight is greatly appreciated. So to answer your questions. xyLocations.js, has only one job, to find the x, y coordinates and initiate the avatar image. The first thing that happens is the host logs in, using his/her name, and enters how many players will be allowed to join the game. No player can enter until the host has entered the game. When each player is allowed to enter the game, (they only need to enter their name), the zyLocation will check to see which player number you are and assign the x, y position and the avatar. Nothing else happens in xyLocations. I don't have any array set up, but it will return the values back to the game.js file and save those items in the remotePlayers array. To answer the question, I save screen location, id, x and y to the array. // Initialize the new player newPlayer = new Player(data.x, data.y); =; newPlayer.x = data.x; newPlayer.y = data.y; newPlayer.imgAvatar = data.imgFile; // Add new player to the remote players array remotePlayers.push(newPlayer); //Update the array list of players When I have 5 players and 1 leaves, I splice the player. I would prefer to have id's saved as part of the player array. I always find it easiest to reference things with id's and use this as a way to remove the player avatar from canvas. Unless you can advise a better way Once the players walk once to the screen, I don't need them to ever walk again. I thought once the x,y coordinates are saved in the array I can use those when I render? I never pass the delta in the update function. //render function draw() { // Wipe the canvas clean context.clearRect(0, 0, canvas.width, canvas.height); // Draw the local player newPlayer.draw(context); // Draw the remote players var i; for (i = 0; i < remotePlayers.length; i++) { console.log("Remote Players draw: "+ remotePlayers.x); remotePlayers.draw(context); }; };
  11. Thanks mattstyles and Gio! mattstyles it makes perfect sense, and I would prefer doing this the more efficient way. I wasn't using any specific frameworks but developing my own code to make this work. If you think it's best to use a framework, please let me know what you would recommend. The game is a very simple game. Up to 10 players can join. There is a login screen that requests you select your role and a name. When you enter the game, you are automatically assigned an avatar who walks to a specific location and has a display card with a belt holding 3 or 4 dots. The object of the game is to drag dots among the logged players to complete your card. As each card is complete, the players will be removed from the game. I currently have the following set up. Does this seem like I'm in the right direction? Meanwhile, I'm trying to locate where I have the single player entity issue. server.js - game server logic. Here I set up a players = [] and store the player spirit image, x and y coordinates. When client connects to the application, emit createPlayer. Loop through players[], and emit createPlayer to draw all other players game.js - client game logic create canvas and initialize remotePlayers array, remotePlayers = [] on CreatePlayer, pass data and save in remotePlayers array Call the draw() function that clears the canvas and draws each remotePlayers players.js - client, players logic Here is where the actual draw function exists chat.js - client chat logic This is all the logic for the chat screen - works well xyLocation.js - client x and y coordinates This is all the logic for obtaining the x and y coordinates, based on what player number you are. The first player has a different image then the second palyer as well as different coordinates. I have not yet implemented latency and lag yet. You hit the nail on the head! I'm working through the code now to find where I'm rendering the character and then when the new one joins that user becomes the charter that I'm rendering.
  12. Thanks Mattstyles, I didn't past the entire game logic, but will add the game.js file, that shows the handing of when a player joins and when a player leaves and of course I push the to an array among other variables needed. The game is actually quite simple. Players access the game, each player walks to a specific location on screen, depending on total number of players. Once all players are in and the game begins, each player sees their assigned card of dots. Dots are dragged among players, till each player has completed his/her card. The players don't walk throughout the game. They only need to walk to the screen at a specific x,y location once they enter the game. I'll eventually append the to the avatar. Once a player walks into the game, I will use canvas to display each players card which is the objective of the game. Right now I am building the part of simply noting a player has accessed the game, pushing their x and y specific coordinates and seeing the avatar walk on screen. It works but when a new player walks in, my first player is removed and only shows the second player. When the third player walks in, the second palyer avatar is removed and only shows the third player's avatar, and so on. The correct image avatars show (as each player has a different image), and the correct coordinates show as well. The only issue I'm having is not deleting previous players when a new player joins. Thanks, game.js
  13. Hi, I have been struggling with a minor issue, that I'm hoping someone can help me out with. I have a multiplayer game that uses Express and Socket io. When a new player logs into the game, the player walks to a certain location on screen. In order to make the player walk, I am drawing the player to canvas using a spirit map. In order to make the player walk per frame I am using the ctx.clearRect() to clear the previous frame, however doing this naturally clears the full canvas and removes the already logged player. I'm not sure how to work around this. Any insight is greatly appreciated. Thanks, Laura server.js Player.js