Multiplayer Snake Game | JavaScript & -

Multiplayer Snake Game | JavaScript &

Traversy Media
Views: 89010
Like: 2776
In this video we will create a multiplayer snake game using

Hungry Turtle Code YouTube Channel:


0:07 – Adrian’s Intro
1:05 – Setting up HTML
2:25 – Setting up the canvas
7:00 – Painting the snake
12:24 – Setting up the socketio server
14:15 – Connecting to socketio from frontend
18:10 – Moving game state to the server
19:58 – Adding a game loop
32:31 – Debugging game loop issue
33:45 – Controlling the snake
40:50 – Home screen for multiplayer game
45:12 – Handling new game on the server
53:30 – Adding ability for second player to join the game
1:01:30 – Handling join game error states
1:03:44 – Modify game mechanics for two players
1:11:48 – Testing the game
1:12:35 – Debugging errors
1:15:15 – Working multiplayer game
1:15:21 – Outro


  1. At around 34:51 you create the handlekeydown function inside the "connection" event to have access to the client variable. You mention that we could define the function elsewhere with the use of bind or a currying function and have access to the client variable. Could expound on that with an example?


  2. finally a coding tutorial with the word colour with a "u" in it 🙂

  3. When i watch this video i always pausing and it needs too much time to understand many things. Am i stupid or it is for everyone difficult to compehend it right away instantly just watching.

  4. Станислав Затолокин says:

    Very cool! 🙂 Thank you for video!

  5. Great tutorial, very clearly explained. Could you consider doing a tutorial on flask-socketio. Thanks

  6. 1:13;05 my friend, you made my night after this xDD only time i laughed hella hard after hours of coding

  7. @Hungry Turtle Code sir can you explain the io.socket.adapter.rooms[gamecode] line in server.js

  8. Anyone knows if this will work for mobile controls? Probably not ya?

  9. Followed along with every step, but (at 15:20) it's logging me a 'Access to XMLHttpRequest … has been blocked by CORS policy' error. I can bypass that by enabling cors, but then I still get a 'GET … net::ERR_FAILED' message logged. I'm new to socketio, and coulnd't find a solution for this online, anybody have a clue how I can fix this?

  10. If anyone else is getting the CORS error (at 15:20), I didn't figure out how to properly fix it but you can uninstall version 3 by "uninstall" then install the version he uses in the video by "install [email protected]" and it fixes the issue. Basically the new version of needs you to explicitly enable CORS so that is where the error comes from

  11. There are a couple things that didn't work for me:
    1. Creating the WebSockets server, I had to install express in addition to to make it work.
    2. io.sockets.adapter.rooms[roomName] inside of handleJoinGame() doesn't work any more, at least for me. You have to manually create an object with the rooms that are created as keys and the amount of people inside them as values.

  12. Quick question: Why does this communication between Netlify and Heroku via not cause CORS errors? I am trying a variant of your tutorial and I am getting CORS on the frontend when I deploy the project. Any help is appriciated!

  13. Putting in the first index.html and index.js code doesn't show the grey box for me, can anyone help? I used the exact code up to the point of 5:59

  14. Has anyone managed to make a working "Ask Rematch" button? I've been trying to do so but am stuck on what to write for my handleAskRematch function.

  15. Awesome tutorial, thanks!

    For [email protected]: io.sockets.adapter.rooms.has(gameCode) worked for me to be able to check if the room code had been created.

  16. 20:13 this is exactly what i want. thank you very much. you're awesome ♥️🐥

  17. any recommended way to breakpoint the server side code?

  18. I got so far in this tutorial but it didn't work at the end, every time I tried to join the game on the second browser window I got "unknown game code". First I tried opening the 2 browsers as and then I tried to npx live-server twice and join on the second one but I got an error like this:
    Access to XMLHttpRequest at 'http://localhost:3000/' from origin '' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value '' that is not equal to the supplied origin.

  19. Your source does not generate Game code please fix

  20. I'm a web noobie, I followed this, and now how do I host the server part on a server so I can play the game on a hosted website with someone on a different machine in a different part of the world?

  21. In v4.x, `io.sockets.adapter.rooms` is a Map object, not a regular object, so you have to do `const room = io.sockets.adapter.rooms.get(gameCode);`.

    Also, the map values are sets of in the room, so you can just get numClients with room.size if room exists.

  22. This video was so helpful to me as I was also trying to implement a Two player game. Thanks a ton for this video. I just had a doubt that if I want to display the scores of both players to each other how can I achieve that.

  23. I literally typed how to learn to make a multiplayer game because i thought an idea of a multiplayer snake game and I thought it was so original, but i saw this video hahahaha that was funny

  24. Which project topic can I take for my final year bsc cs please suggest someone

  25. Not put that game server in docker container and deploy on kubernetes

  26. WOW! Great teaching, thank you! Yust a question: maybe, what you're calling Velocity should not be called "relative delta position"?

  27. I feel like the multiplayer casual text party game that I want to make should be easier to code… But possibly harder…. Idk

  28. There are several bugs here:
    1. No collision between sneakes
    2. Server is crashing if you press key after gameover
    3. Right and botom wall collision inaccurate (fixing by editing one line)
    4. Snake adding from the side of the head, when it eat so you can't eat food in case of food corner spawning (fixing by do cut the tail when you eat instead of adding from the side of the head)

    I did fixed all that myself (But that was boring cuz your poor code style dude)

  29. Thank you so much! Really like how you explain everything.

  30. 1:12:00 I suspect that one of the issues was related to the change made back at 48:50. The game.js code was changed to export "initGame" instead of "createGameState", but the require() statement in the calling code in server.js wasn't updated to match.

  31. I really appreciate this tutorial man, it helped me a lot in a very important school project ! <3 much love

  32. Nobody can write without thinking. This video is fake , scripted.

Leave a Reply

Your email address will not be published.