Multiplayer Snake Game | JavaScript & Socket.io
Traversy Media
Views: 120184
Like: 3387
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
26.02.2023
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??
super smooth and super easy to follow . awesome
this might be a silly question but did u run an npm init before starting this
Thank you for this. It was good fun.
Such a helpful video, thanks a lot man
Is this game a touchscreen game or is it only keypad ?
Greetings, what terminal software are you using ?
Awesome tutorial. I was able to make a multi-player competitive hangman game from this with zero background with socket io and npx
Thank you very much ..you help me get my first money
thank you very much
29:10 i live for shit like these ……💯💯
Why TF am I getting a 'CORS header 'Access-control-allow-origin' missing error. when I try to communicate with the server.. Anyone know how to fix this?
Can I asked why the game started to not produced a new code? After playing 6Games with my Brother it started to not produce a code so we cant play it.
Excellent video, thanks to share your knowledge and valuable time.
you are the only person who coud do a js tutorial cosplaying as Dwight Schrute
that INTI thing happened really pain to try to solve then find i dint evel call it LOL
Thanks! This was helpful for a game I am working on!
EDIT: Could you add subtitles though?
I get access control CORS errors. how can I solve this?
Can someone tell me why the red snake won't move on it's own when the game starts?
I've tried to set vel of x to 1
Did anyone figure out how to avoid that the snake goes into the opposite direction?
For example, when the snake is moving right I don't want that the snake is able to reverse when I press the left button
Thanks! Very Helpful for me
Here's how I dealt with the CORS errors…
SERVER:
const express = require("express");
const app = express();
const http = require("http").createServer(app);
// const io = require('socket.io')(http);
const io = require('socket.io')(http, {
cors: {
origin: "http://localhost:8080",
methods: ["GET", "POST"]
}
});
const port = process.env.PORT || 3000;
try {
http.listen(port, () => {
console.log("listening on localhost:" + port);
});
} catch (e) {
console.error("Server failed to listen " + e);
}
CLIENT:
const socket = io('http://localhost:3000', {
extraHeaders: {
"Access-Control-Allow-Origin": "http://localhost:8080"
},
// transports: ['websocket']
});
socket.connect();
socket.on("connect_error", (err) => {
console.log(`connect_error due to ${err.message}`);
});
I am getting an error for unknown game code for some reason if anyone can help me on this please.
Hey man! Thank you very much. I finished this project and I am glad I did it. I was trying to understand which is the power of sockets and you doing this example let me understand that. Stay hungry stay foolish!
1 question: is the updated position sent throught socket for every single frame? Tnx in advance 🙂
Thanks so much for the opportunity Brad! It was such a blast making this