Building an online multiplayer snowball throwing game (vanilla js, node, socket.io)

Web Dev Cody
28551
852
This video was a paid promotional video for Agora.io.
Agora:

Sprites:

Code:

💬 Discord
🔔 Newsletter
📁. GitHub

00:00 – Intro
01:05 – Agora
02:03 – Setup express + socket.io
09:59 – Drawing the map
39:15 – Players and Movements
54:19 – Camera focus
01:00:38 – Throwing snowballs
01:17:10 – Draw tree map
01:29:47 – Collide with trees
01:38:57 – walk sound effect
01:44:18 – Agora.io voice chat
02:02:05 – Voice icon
02:07:35 – Proximity voice volume
02:23:30 – Good enough!
02:24:31 – Deploying
02:26:31 – End
02:27:17 – Just being dumb

My VSCode Extensions:
– theme: material community high contrast
– fonts: Menlo, Monaco, ‘Courier New’, monospace
– errors: Error Lens
– extra git help: Git Lens
– tailwind css intellisense
– indent rainbow
– material icon theme
– prettier & eslint
– ES7+ React Snippets

20 Comments

  1. This video is so helpful for learning sockets io, html canvas, so far I have watched, will return for some more info later. Keep up the good work sir 👍

  2. Sir plz.. make video on location tracking using GPS Device ( in JavaScript language ) or Suggest any npm package

  3. good job man, i figured out lot of things with this video. respect!

  4. I am software engineering student writing my thesis. Got any recommendations what I could use to make https calls or simulate a server easily? I am writing it with React + NodeJS, but honestly anything works.

  5. but do I need docker to it run on my M1 Mac and Node 16? 🤔

  6. If you build an app using agora for voice chat, and then agora goes away, that will stop your voice chat right? Or does the voice chat functionality stand alone once made? (I’m at the beginning of the video)

  7. Beautiful tutorial sir Thank you so much! Learned a lot!

  8. It would be awesome if u could do a voice chat app without using 3rd party

  9. just comm for u2b algo
    can u explain what brackets "()" doing why u put them when u destructorized id ({id} = groundMap[col][row]) 1:27:31 what was the point of that

  10. Hi, do you know of a good software to create tmx files on windows 10? I have only found a few softwares that haven’t been updated in 5+ years. Great vid!

  11. This is my first game project -> battle-city-ls•netlify•app🤗

  12. We're 1 week away from the Global Game Jam and I must say thank you, I believe your tutorial will help us a lot with preparing a boilerplate.

  13. At 21:05, the correct formula for the tile index should be "row * map.width + col". Using map.height does not cause any errors because the width and height are the same in your context, but I'm sure it would cause a huge headache for anyone who uses the code with a map with different values of width and height

Leave a Reply

Your email address will not be published. Required fields are marked *