Coding Challenge #32.1: Agar.io - Part 1 (Basic Game Mechanics)

Channel:

The Coding Train

Subscribers:

1,750,000

Published on August 16, 2016 1:42:24 PM ● Video Link: https://www.youtube.com/watch?v=JXuxYMGe4KI

Game:

Agar.io (2015)

Duration: 25:06

313,611 views

4,787

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 2 (Networking with Socket.IO and Node.js): https://youtu.be/ZjVyKXp9hec

🎥 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/

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:55 Set up sketch
1:05 Create a blob class
2:06 Create a blob object
2:24 Debug drawing logic
2:42 Describe movement logic
3:05 Create an array of blob objects
4:05 Position blobs in the canvas
4:40 Explain movement logic
5:32 Move blob toward the mouse
6:46 Explain coordinate system
7:52 Translate origin
9:13 Debug movement logic
9:56 Position blobs in a larger world
10:46 Consider blob collision
11:48 Implement collision detection
12:18 Explain overlap test
12:38 Increase the radius of the blob
13:02 Debug collision logic
14:03 Consider chat suggestions
14:32 Increase the radius based on area
15:52 Scale coordinate system to expand the world
17:00 Debug operations on the coordinate system
18:10 Fix the order of the operations
19:10 Introduce `lerp` interpolation
19:47 Interpolate the change in scale
21:54 Interpolate the velocity of the blob
23:22 Summarize the coding challenge
23:44 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