Really Getting Into Socket.io! (5/14)

So, half of this was done yesterday. But I decided to bunch it all up into one blog post today, because it's quite a bit of progress and there's a lot of cool stuff going on, so I thought I might as well put it together!

Yesterday and today, I've completed quite a bit of small milestones for my game project. They're not really huge features, but basic things that are required for every game. Surprisingly, a lot of them were pretty tough to get working. Sure, I had the amazing tutorial from yesterday, but the main issue is that I'm working on a multiplayer game. Therefore, a LOT more server interactions are going to have to be made. Anyways, that all aside, the features added include the following:

-You can now move! That's right, using W, A, S and D, or the arrow keys, your little character will move on screen.
-Other players can see you moving! And you can see them too. This is done via NodeJS. Here's how I did it:

I essentially have my game refresh at a rate of 60 frames per second, like most games. Obviously, if you can't achieve that framerate it's fine, but it might not look as good. On each of these updates, the socket emits a current player position. That position is then sent to the server, who bounces it back to all of the clients so that they can all update other players' positions. In essence, this is done like the following:

	// This function, main, is run every frame at 60 frames per second.
	// It updates all characters, and then calls a method called requestAnimFrame,
	// which essentially just sets canvas size.
	// As you can see, the function uses the date.now() function to make sure that
	// everything is updating on time. Much of this method was from the earlier
	// tutorial, but I had to make some modifications.
	function main() {
	var now = Date.now();
	var dt = (now - previousTime) / 1000.0;
	update(dt);
	previousTime = now;
	requestAnimFrame(main);
	};
	function update(dt) {
	handleInput(dt);
	setPlayerCount(CURR_PLAYERS);
	var imageObj = new Image();
	var canvas = document.getElementById("game");
	var context = canvas.getContext('2d');
	imageObj.src = "images/yourSprite.png";
	imageObj.onload = function () {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(imageObj, PLAYER.posX, PLAYER.posY, SHIP_WIDTH, SHIP_HEIGHT);
	};
	socket.emit('move', {
	'userId': USER_ID,
	'posX': PLAYER.posX,
	'posY': PLAYER.posY
	});
	}
	// I omitted some of the code from my update function above, which I'm currently working on.
	// However, this function shows the complete usage of movement of players on a server!
	// Essentially, how this works is I'm getting the position of the sprite, or player image,
	// on the screen. I then send their userId [a unique identifier], as well as their x and y
	// positions. Once that's all taken care of, we take a look on the server-side:
	// ~NodeJS
	socket.on('move', function (json) {
	var x = json.posX;
	var y = json.posY;
	var userId = json.userId;
	io.emit('clientmove', {
	'userId': userId,
	'posX': x,
	'posY': y
	});
	});
	// The socket notices Hey! Something moved! and then sends that information to everyone else.
	// They listen for this event and do the following:
	socket.on('clientmove', function (data) {
	var userId = data.userId;
	var x = data.posX;
	var y = data.posY;
	for (var i = 0; i < players.length; i++) {
	if (players[i].userId == userId) {
	players[i].posX = x;
	players[i].posY = y;
	}
	}
	});
	// As you can see, we just add that data to our players[] object, which handles all
	// the movement, user information, etc. of players. What's great is we can just
	// add stats on the fly to be sent and bounced back to the server. When a user
	// connects or disconnects, they are added/removed from our players[] object.

view raw gistfile1.js hosted with ❤ by GitHub

-You can shoot tiny pellets with the space key! And other players can see them! My whole concept of pellet travel is the exact same as above, but speed of the pellets is [obviously] faster than speed of the players. I want it to be kind of like Galaga in that sense. Interaction with these should be coming soon, that takes collision calculations which I'm going to get started on tonight.

Some features planned for this week:
-A changelog [I like the idea of live-updating things]
-Collision detection
-A background map