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

Описание: 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...

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

Other Parts of this Challenge:
📺 Agar.io - Part 1 (Basic Game Mechanics):    • Coding Challenge #32.1: Agar.io - Part 1 (...  

🎥 Previous video:    • Coding Challenge 31: Flappy Bird  
🎥 Next video:    • Coding Challenge #33: Poisson-disc Sampling  
🎥 All videos:    • Coding Challenges  

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:    • 12: Web Sockets and p5.js Tutorial  

Livestream Archive:
🔴 Livestream #55:    • Live Stream #55 - Flappy Bird and Agar.io ...  
🔴 Livestream #58:    • Live Stream #58: Networking Agar.io and th...  

Related Coding Challenges:
🚂 #36 Blobby!:    • Coding Challenge #36: Blobby!  
🚂 #69 Evolutionary Steering Behaviors:    • Coding Challenge #69: Evolutionary Steerin...  

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/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord:   / discord  
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 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-o...

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

#agario #websockets #javascript #nodejs