Multiplayer Snake Game | JavaScript & Socket.io - aspenleafgames.com

Multiplayer Snake Game | JavaScript & Socket.io

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

Hungry Turtle Code YouTube Channel:

Code:

Timestamps:
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
39:05 – WORKING SNAKE GAME!!
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

107 Comments

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

  2. 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.

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

    Very cool! 🙂 Thank you for video!

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

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

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

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

  8. 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?

  9. 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 socket.io version 3 by "uninstall socket.io" then install the version he uses in the video by "install [email protected]" and it fixes the issue. Basically the new version of socket.io needs you to explicitly enable CORS so that is where the error comes from

  10. There are a couple things that didn't work for me:
    1. Creating the WebSockets server, I had to install express in addition to socket.io 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.

  11. Quick question: Why does this communication between Netlify and Heroku via Socket.io 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!

  12. 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

  13. 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.

  14. 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.

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

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

  17. 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 http://127.0.0.1:8080 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/socket.io/?EIO=4&transport=polling&t=NYeKnZ3' from origin 'http://127.0.0.1:51962' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:8080' that is not equal to the supplied origin.

  18. Your source does not generate Game code please fix

  19. 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?

  20. In socket.io 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 client.id-s in the room, so you can just get numClients with room.size if room exists.

  21. 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.

  22. 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

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

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

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

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

  27. 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)

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

  29. 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.

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

  31. super smooth and super easy to follow . awesome

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

Leave a Reply

Your email address will not be published.