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
13.03.2022
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?
Thanks!
finally a coding tutorial with the word colour with a "u" in it 🙂
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.
Very cool! 🙂 Thank you for video!
for id generation I generally use uuid
Great tutorial, very clearly explained. Could you consider doing a tutorial on flask-socketio. Thanks
If 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.
Thanks a lot! Loved it!
I 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.
If 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
FREE 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
1:13;05 my friend, you made my night after this xDD only time i laughed hella hard after hours of coding
@Hungry Turtle Code sir can you explain the io.socket.adapter.rooms[gamecode] line in server.js
how could I color the canvas in WebGL?
Anyone knows if this will work for mobile controls? Probably not ya?
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?
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
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.
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!
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
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.
Greatjob
Very interesting tutorial! Keep it up.
Thanks so much Arthur Laforest
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.
I wanna try the game!
20:13 this is exactly what i want. thank you very much. you're awesome ♥️🐥
How are you allowing Cors between ports?
any recommended way to breakpoint the server side code?
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.
Your source does not generate Game code please fix
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?
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.
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.
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
Which project topic can I take for my final year bsc cs please suggest someone
i want that nightlight
that is quality code right there
BTW, can you share your neovim config?
YOU ARE REALLY GOOD
Not put that game server in docker container and deploy on kubernetes
WOW! Great teaching, thank you! Yust a question: maybe, what you're calling Velocity should not be called "relative delta position"?
I feel like the multiplayer casual text party game that I want to make should be easier to code… But possibly harder…. Idk
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)
Thank you so much! Really like how you explain everything.
This has been extremely helpful.thank you
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.
I really appreciate this tutorial man, it helped me a lot in a very important school project ! <3 much love
Is it going to work from different pc??
Nobody can write without thinking. This video is fake , scripted.