• Content count

  • Joined

  • Last visited

  1. 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.
  2. 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); }; };
  3. 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.
  4. 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
  5. 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