Coding Challenge #32.2: Agar.io - Part 2 (Networking with Socket.IO and Node.js)

Channel:

The Coding Train

Subscribers:

1,740,000

Published on September 4, 2016 1:06:00 PM ● Video Link: https://www.youtube.com/watch?v=ZjVyKXp9hec

Game:

Agar.io (2015)

Duration: 43:46

167,950 views

2,452

In this multi-part coding challenge, I create a clone of the multiplayer online game Agar.io with JavaScript, node.js and websockets. Code: https://thecodingtrain.com/challenges/32-agario

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/J3BZeLP02

Other Parts of this Challenge:
📺 Agar.io - Part 1 (Basic Game Mechanics): https://youtu.be/JXuxYMGe4KI

🎥 Previous video: https://youtu.be/cXgA1d_E-jY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/flQgnCUxHlw?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🔗 Agar.io on Wikipedia: https://en.wikipedia.org/wiki/Agar.io
🔗 Agar.io: http://agar.io
🔗 Node.js: https://nodejs.org/en/
🔗 Socket.io: http://socket.io/

Videos:
🚂 Collaborative p5.js Sketches Channel: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6b36TzJidYfIYwTFEq3K5qH

Livestream Archive:
🔴 Livestream #55: https://youtu.be/eOii4P7WYbY
🔴 Livestream #58: https://youtu.be/_cDPN2Ief6Q

Related Coding Challenges:
🚂 #36 Blobby!: https://youtu.be/rX5p-QRP6R4
🚂 #69 Evolutionary Steering Behaviors: https://youtu.be/flxOkx0yLrY

Timestamps:
0:00 Introduce the coding challenge
0:23 Mention the previous coding challenge 'Agar.io - Part 1'
0:52 Mention tutorial on node.js and web sockets
1:22 Sketch client-server communication
3:00 Set up a node server
4:35 Examine server code
5:00 Examine client code
5:10 Add a web socket
5:42 Reference the socket library
6:42 Update agar.io code
7:42 Consider server code
8:34 Create a blob constructor
9:11 Associate the connection `id` to the blob
10:40 Create a blob once a connection receives a `start` message
11:36 Consider client code
11:51 Send a `start` message to the server
13:08 Test client-server communication
14:00 Send the correct position
14:42 Use a random location and size
15:55 Update blob location
16:20 Send an `update` message
16:53 Handle the `update` message
17:30 Find blob by `id`
18:25 Update blob location
19:18 Test update logic
19:59 Test multiple connections
21:53 Constrain blob movement
23:40 Summarize the coding challenge
25:11 Broadcast a message from the server
27:33 Broadcast the array of blobs
28:41 Display the blobs on the client
30:56 Restart server
31:30 Debug drawing logic
31:51 Draw the `id` for each blob
33:20 Avoid drawing the same blob
33:57 Consider the client's own `id`
36:00 Draw blobs with a different `id`
37:55 Test game with two clients
41:20 Increase update frequency
42:30 Conclude the coding challenge

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#agario #websockets #javascript #nodejs

Other Statistics