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
Fuzzy Slippers
01.04.2022At 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?
Thanks!
Chrome Firefox
01.04.2022finally a coding tutorial with the word colour with a "u" in it 🙂
grendel ai
31.03.2022When 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.
Станислав Затолокин
31.03.2022Very cool! 🙂 Thank you for video!
Dylan Riley
31.03.2022for id generation I generally use uuid
Jim Boli
31.03.2022Great tutorial, very clearly explained. Could you consider doing a tutorial on flask-socketio. Thanks
Ilyas Garipov
31.03.2022If you have an error like GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NN6eo4j net::ERR_CONNECTION_REFUSED, check that versions of socket.io are the same for server and client. I typed 'npm i socket.io' instead of 'npm i [email protected]'. Thanks for tutorial anyway.
Ekaterina Shoshina
31.03.2022Thanks a lot! Loved it!
Дамир Юсипов
31.03.2022I guess everybody starts exploring networking for multiplayer game from Socket.io. I did the same) It helps to understand the basics and realize the complexity. The next step is to explore and try existing solutions like https://github.com/udamir/magx – I started this project this year and already created few games based on it. I added this snake game in https://github.com/udamir/magx-examples project.
Mohamed Arkib
31.03.2022If you have an error like GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NN6eo4j net::ERR_CONNECTION_REFUSED, check that versions of socket.io are the same for server and client. I typed 'npm i socket.io' instead of 'npm i [email protected]'. Thanks for tutorial anyway.
— comment by:
Ilyas Garipov
Morgan Page
31.03.2022FREE COURSE plus BONUS FREE COURSE for sharing!
Well London is in full Tier 4 which effectively means Christmas is cancelled…
So to alleviate my depression I thought I would give away one (maybe 2) of my courses.
https://my-free-course.com
#javascript #100daysofcode #reactjs
sean rosario
31.03.20221:13;05 my friend, you made my night after this xDD only time i laughed hella hard after hours of coding
Ritik Gupta
30.03.2022@Hungry Turtle Code sir can you explain the io.socket.adapter.rooms[gamecode] line in server.js
Andrei Ardelean
30.03.2022how could I color the canvas in WebGL?
Istana Angin
30.03.2022Anyone knows if this will work for mobile controls? Probably not ya?
Miguel Angeles
30.03.2022Followed 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?
Taylor Abbott
30.03.2022If 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
Ezee
30.03.2022There 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.
Kristopher Werlinder
30.03.2022Quick 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!
Hansome Kim
30.03.2022Putting 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
Hansome Kim
30.03.2022Has 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.
五二一
30.03.2022Greatjob
PaitidaStudios
28.03.2022Very interesting tutorial! Keep it up.
Mattéo Christophe
28.03.2022Thanks so much Arthur Laforest
Chad Robischon
28.03.2022Awesome 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.
lol 123abc456789
28.03.2022I wanna try the game!
Grey Horn
28.03.202220:13 this is exactly what i want. thank you very much. you're awesome ♥️🐥
Bittu Joju
28.03.2022How are you allowing Cors between ports?
Eric Keefe
28.03.2022any recommended way to breakpoint the server side code?
Alex12898
28.03.2022I 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.
Ritesh Baranwal
28.03.2022Your source does not generate Game code please fix
Maxwell McKinnon
28.03.2022I'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?
Andri Soone
27.03.2022In 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.
Deekshant Deekshant
27.03.2022This 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.
skourt
27.03.2022I 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
Shruti Pandit
27.03.2022Which project topic can I take for my final year bsc cs please suggest someone
Random
27.03.2022i want that nightlight
Stephen Ngetich
27.03.2022that is quality code right there
Alan Chen
27.03.2022BTW, can you share your neovim config?
Jack The Nub
27.03.2022YOU ARE REALLY GOOD
Vishal gupta
27.03.2022Not put that game server in docker container and deploy on kubernetes
Luca Stasio
27.03.2022WOW! Great teaching, thank you! Yust a question: maybe, what you're calling Velocity should not be called "relative delta position"?
veggiet2009
26.03.2022I feel like the multiplayer casual text party game that I want to make should be easier to code… But possibly harder…. Idk
Pokruk
26.03.2022There 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)
Kaspo Nostalgia
26.03.2022Thank you so much! Really like how you explain everything.
Hiyori
26.03.2022This has been extremely helpful.thank you
mykalimba
26.03.20221: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.
Aloomiii
26.03.2022I really appreciate this tutorial man, it helped me a lot in a very important school project ! <3 much love
Raivo Logins
26.03.2022Is it going to work from different pc??
runtimeJPP
26.03.2022this might be a silly question but did u run an npm init before starting this