Build a Multiplayer Game with JavaScript & Firebase

[@DrewConley]

Important update! The Firebase JS library has changed a bit since this video was recorded. For following this video tutorial, you must use the exact version (8.10.1) as seen in the video. You can grab a copy of the script tags in the description's Code Download zip. To use the latest versions of Firebase and Common JS, you'll need to follow the latest documentation on Firebase's website. It's not too bad, but it will be a little different than what I show here. Thanks - let's go!

[@trenom]

I never thought we could create pixelated game rooms like this using javascript, thank you!

[@WilliamMelton617]

This was SUCH a well made tutorial my guy!! Don't stop teaching!

[@erichgq1]

Thank you for having made this video. My friend sent me this link and I think he and I will work on a game project for my son. Please continue to make these kind of videos. Cheers

[@eboatwright_]

This is really awesome! I'm going to have to incorperate this into my pure JavaScript ASCII game engine :D

[@judgsmith]

If you do a dev log I will watch it.

[@eboatwright_]

@@judgsmith I've been thinking about making a video on it :)

[@judgsmith]

@@eboatwright_ I think people woul like that.

[@eboatwright_]

@@judgsmith :D

[@LucasDev]

ok, now you got me. I'd have paid to learn that!!

[@TimKeegstra]

Same here! Love these videos.

[@NotMrMiguu]

I love exactly this kind of content. Also consider looking into Firebase Emulators to simulate the database locally during dev.

[@RodrigoDAgostino]

Thank you so much for sharing, Drew. It is really difficult to come by this kind of content. I really appreaciate it, and I’m sure I’m not the only one :)

[@ajinkyax]

thats an amazing title, I hope its not a click bait. Im already following this now :) Thanks for creating this.

[@cmtg4471]

I dont know if it just me, the more I listen to your voice the more I hear Ryan Reynolds ahhaha, but man your video rocks... plain, simple and straight forward.... by the way new subscriber here

[@aoukrad]

That's what i'm talking about, Thank you so much for this video. i like all ur content

[@vicentefleitas2823]

Hi ! this tutorial is really good, I made my own version of this project with Firebase 9 (using modals) the api its a little diferent, and I use canvas graphics instead of html elements, its by far more easy and clean; we can change ideas about this aprouch (method) if you want, keep yur good work Drew, i really appreciate it.

[@szymonbytniewski2988]

Can you shared the code?

[@sai8808sama]

I love your videos so much, it taught me a lot, please keep doing it.

[@syahrulzahwan]

Finally, I was waiting when this is going to happen..

[@O01]

This is purely amazing guide, thanks to Drew! Using this guide I can now attach my games to a virtual cloud, and add muitiplayer to my games. I can say firmly, that this is best introducing guide for Google Firebase. I hope someone could add timestamps to this video, like: - creating project in Firebase - adding Web token to our website - creating fields in Firebase through JS code - getting fields from Firebase through JS code - updating our game everytime where database is updated Drew, i hope you will make a video, where you connect Pizza Legends and Firebase, it would be awesome

[@Xinurval]

Bro why didnt u add the timestamps if u watched the video?

[@rsbah]

@@Xinurval 😂

[@asdffacil]

Love your content, thanks for the free guides

[@SYNDESTV]

Great video Drew! It's been so long since we've done coding and it'd be awesome to get our hands dirty again

[@hyper7777]

Wow, I can't wait to build this

[@chaitanyavij055]

well explained my wishes r with u!

[@justadudewhoplaysgames2262]

Thanks for making this video This helps alot on my dream game

[@benjaminrigby877]

This is the *best*. Thank you.

[@dreamscape1234]

how do you actually run the game? do you click the index html file? do you run it through firebase? i cant figure out how to get it running

[@RoderickPenTheThird]

Did you figure it out?

[@sarveshhiwase193]

He is using a extension called live server for vscode and through that he is able to run the project.

[@judgsmith]

Oh, wow, you have a tutorial for this to this is going to be awesome.

[@Sammysapphira]

Thanks i love how you explain how this all works from the code level. Too many tutorials are just "install this plugin for unity!" Or something and i cant learn anything from that. Its great to see how this works so i can mess around with it on a lower level, or in a different language. Do you think writing a containerized stateless server (maybe in rust) and only using firebase for things like authentication and storing character names/customization would be better for scaling this system? It sounds like a fun exercise in multi-system architecture, and I fear firebase costs when writing so many database hits every single keypress. Firebase free tier only allows 20k writes, so that's only 20k movements which could get eaten up pretty quickly with a few hundred people dropping by.

[@코린이31세]

so mush fun video!!! awesome bro

[@O01]

Drew, guide is very helpful, and the idea is amazing! I did repeat this, and after testing i found a bug: When you get the coin, it won't disappear from the game. You don't see it in the game, but it is in the cell, so when you go (for example), to the left, and then back to the right, you can get score from nowhere.

[@luchorib]

yep, me too. I dunno how to solve it

[@joeyd1842]

FWIW I found the bug, allCoinsRef.on("child_removed", (snapshot) => { // console.log(snapshot.val()); const { x, y } = snapshot.val(); const keyToRemove = getKeyString(x, y); console.log(keyToRemove); gameContainer.removeChild(coinElements[keyToRemove]); delete coins[keyToRemove];

[@ClaytonMalarkey]

this looks like a fun project

[@ZiberianDev]

Hey Drew, appreciate this great guide. I had a quick question, at 52:00 we add the place coin function which is called by every player as you said. Doesn't that mean then there will be more coin spawns with more players? I know you said ideally this would be a server side operation, but just to keep it simple in our case could we do it so that we can have a "main" player (lets say the first player, and if he leaves we'll assign it to someone else randomly). Only the "main" player will call the create coin function, would that work?

[@DrewConley]

Yep, you nailed it. If it’s all peer to peer, one player would probably fire off these instructions

[@diego32358]

Great Content! Thank you!

[@HumtySwag]

Thanks Buddy, I forgot about my firebase projects and today I earned total $16 🙃

[@SarthakGamer]

Awesome video

[@diddyp_real]

Great video and let me say that not only is vanilla JS great for teaching/learning, but I much prefer making finished games this way than with a framework that adds complexity. I see the value of them for a big project that has multiple devs, but I don't see the benefit in using one on a project like this.

[@johnloftus783]

Great video, very helpful

[@EVolkan]

Special thanks for using Vanilla JS!

[@azizutkuozdemir]

Thanks for this video , you are awesome

[@billatkin3956]

Great video!!! Exactly what I've been looking for. Could I ask what editor you're using for code development?

[@DrewConley]

I used VS Code in this one. It’s fantastic! I usually use WebStorm in my day-to-day though

[@diddyp_real]

Drew, in the database structure, why did you add the ID again inside the player's UID node along with their name, direction, etc.? It was "players" > uid > id (same ID again nested inside uid?)

[@sebastianbrunobautes7145]

what would be the code in version 9 modular?

[@kadiryumlu]

*How to handle player disconnection on server side?* I couldn't find a good answer to this question a few years ago and gave up using firebase for one of my turn-based multiplayer game.

[@veto8172]

Great tutorial!

[@peoplearecool8766]

Hey, Nice tutorial as always. Also could you please make phaser js tutorials ? I love plane html 5 canvas without engines and libraries but if someone wants to create something medium sized game it becomes very hard just by vanilla js. There are not phaser js tutorials on youtube and tutorials about phaser from you will be very valuable.

[@douglascounts4634]

Drew has a tutorial already like that with his Pizza RPG playlist which is very good. It also uses Vanilla JavaScript. And PhaserJS was also written in Vanilla JavaScript, it just forces you to use their way of doing things. Check his Pizza RPG playlist out here: kzbin.info/www/bejne/nKrMZamcl7B4m9E&ab_channel=DrewConley

[@darmilouch2808]

AMAZING !!!

[@3izvilini]

Thanks for the video.

[@vctormndes]

Really good tutorial ,we dont find this type of tutorials easiely on the internet . can you make another tutorial with canvas js version ?

[@saransrini03]

Great vid!!

[@jrgen7144]

Thanks for the video, I'm trying to make a "Habbo clone" for a school project with minigames etc. How would you go about adding multiple rooms to this?

[@david-dong]

Thank You!

[@paramshah652]

Someone please help me I am currently using the latest version of firebase. At approximately 13:10 in the video, he mentions the uid in the object itself. When he shows the results on the firebase database, we can see that the uid, node name and id in the object is all the same. For me, I can't get the node name and the uid same. Please tell me what I can do.

[@unpopularplays3707]

So much help (:

[@loiczeq5551]

Hi is there any way to implement cheatproof looplike behaviour with only JS and firebase? I need to have an listener that will call callback function after lets say for the example 0.1s. I have search a lot of firebase articles but so far no answer for that. If not what is the language / API that I should look into to make it work? Basically, I am trying to make a player (in similiar environment as above) shoot a laser. And a laser beam will travel one block every 0.4s. I need an event that will move that beam and check for collisions with other players.

[@maaaaaaugh2323]

I'm worried that with more players, something like that would overload firebase with reads and writes to the firestore is it true? The bill could be massive

[@ddobren]

Hello, you can use PUSHER instead of Firebase

[@chinthalwarshreeyamani9943]

Hey! I actually done with coding part but when i runned the code the page is blank like there is no game picture displaying all i can see is only to change the name and color boxes in the page can you please consider this and reply me how to add the image and even characters are not showing in my game can i know where i did the mistake?? Please mind it and reply me!!

[@DrewConley]

Hey, be sure to check your browser console for errors. That will likely reveal the problem. Also, it helps to download the final code from the description and run it locally. If it works on your machine, there's probably some little discrepancy in your version of the project.

[@Hanna-iz6kp]

can you make tutorial how to build multiplayer game with flutter and firebase ?? please🙏

[@DrewConley]

I’ve never used Flutter, so prob won’t be much help there… I have more Firebase projects on the way though! ☺️

[@Hanna-iz6kp]

thank you for the quick response. Is it possible to reuse the same code for Flutter, so that I only need to convert JavaScript code?@@DrewConley

[@CharlieQCao]

Thanks Drew this is Awesome! Q: How can I remove all the coins stored in the real-time database when the last user logs out?

[@universehorizontechnology]

Very simple or you use firebase ask or you add post or delete for http to the endpoint / all content whitin is destroyed so as for the rote

[@michaelbauer9700]

Thanks, great video. I just have one question. Why is all the game code defined in a function that is immediately run as appose to global in the script.

[@DrewConley]

Just habit - usually larger projects get out of control if too many things aren’t housed in functions. Doesn’t matter so much in this demo

[@martienvliet8812]

Great video! But there are actually two bugs for the coins, you covered up the first one in the description of this video, but if you let some coins spawn and than reload the page, all the coins will still be there. Is this only the case for me?

[@DrewConley]

Any coins that are in the Firebase data should still be on screen, even if you reload. This is really a “how to use the sdk” video rather than a full game demo though, you can change it to be whatever you want

[@martienvliet8812]

@@DrewConley ahh okayy, great! I personally wanted them to go away so I added that myself. I learned a lot from this tutorial, so thank you for that!

[@beat1802]

Pretty good damn video, but i still don't get how he gets the exact pixels of the movement. Try and fail, or is it image calculated or what?

[@PiXarY]

the first 5seconds in "firebase is not defined" nice

[@DV-ye6xb]

Hey can you please make a full course android game development using android studio.

[@newtrix6177]

Instructions unclear... Accidentally burnt down my house

[@jake221]

Can anyone explain how I can host this in firebase? Its very complex for me.

[@scottscott232]

As I was watching your amazing video, in place of Firebase, I was thinking AWS DynamoDB, and IAM. I'm just wondering whether this would work, using these two services / resources.

[@luichyluichy]

Very cool... I'm thinking about reproducing this without Firebase. A custom API MongoDB+Express with SSE for realtime. Wish me luck!

[@dje9278]

if we deploy the game, for example using vercel or other, will it works? do we need to do some changes for it to deploy?

[@alecriego]

may i know how you made the map? im planningg to make another map is that map called tilemap?

[@loiczeq5551]

Thanks :)

[@ugman21]

Hey drew, I'm getting an error with the update code for when a character moves and it’s this: cannot read properties of undefined (reading ‘querySelecter’) line 107:16 My guess is that it’s about the playerElements code inside ‘el’ that’s outputting as undefined. Do you know what’s going on by any chance?

[@DrewConley]

Hey! Hard to know for sure without seeing the exact code. Maybe double check everything with the example download code. Probably an element selector misspelling or something is my guess

[@ugman21]

@@DrewConley Ok I have just fixed it, it turns out I forgot one line of code haha, thanks for the tutorial though it is amazing.

[@droidlycodes]

So I have a major question, why when Player2 for example moves there is lag for movement?

[@ClaytonMalarkey]

Could this be mixed. With idle and GPS location based games

[@theredcraft7474]

Can you please make a video where you explain how to make the game safe, so you cant cheat?

[@DrewConley]

Maybe someday! I am in the early stages of making a larger multiplayer game with Firebase where that will come up, so I'll try to take notes as I go for a future video

[@theredcraft7474]

@@DrewConley ah ok i understand

[@therealstmlch]

Are client side run javascript games easy to cheat on? Since there is no backend auth, things like item doubling etc. should be easy right?

[@DrewConley]

Right. In a real world production project where cheating is a concern, backend validation is necessary.

[@jersonpascua4174]

Hi @Drew Conley, my map is big, how do i move my scree according to keypress? thanks

[@techtastic-fabricmoddevelo4211]

It seems I cant access the Google Drive to download the files, atleast not on my laptop Probably an issue with CentOS itself

[@XalaethMusic]

dude your keyboard sounds like it has switches made of jell-o

[@Ricky658]

Hi, what things do we have to do regarding security, since I planning launch a game in react with firebase, but I'm afraid of thinking if I get hacker attacks? What things should I keep in mind?, mi game have a store to buy coins

[@chriskevini]

I'm trying to use onDisconnect with Firebase9 and I keep getting the error: Cannot read property 'length' of undefined. The line of code that throws the error is: onDisconnect(cursorRef).update({state:"dead"})

[@chriskevini]

I just realized that Firestore doesn't have that functionality.

[@azizutkuozdemir]

maybe next time can you show network tab to see what communication happens between client and server

[@user-lt9md7mw1m]

any chance to see this same tutorial in react?

[@jeremyhu8418]

in the beginning when adding the config i get this error: Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-auth.js:1:1)

[@reinkdesigns]

so this doesn't work :( followed up to about 15:0 and get nothing but errors about firebase. tried to find more info on how to install firebase and none fo them seem to yield any results

[@reinkdesigns]

ok i think i see the error> any chance you can remake this for 9.9.3 cause im completely lost trying to get it to work?

[@monochr0mat]

Just use version 8. That’s how I got it to work for me

[@zasharan2]

Does anything significant change with different firebase versions because so far I've done almost everything in the same manner and it's giving me errors such as: Uncaught SyntaxError: Unexpected token 'export' firebase-auth.js:1 Uncaught SyntaxError: Cannot use import statement outside a module firebase-database.js:1 Uncaught SyntaxError: Cannot use import statement outside a module index.js:16 Uncaught ReferenceError: firebase is not defined at init (index.js:16:5) at index.js:46:1 I don't understand what is going on here

[@DrewConley]

Hmm. Does it work if you duplicate the code download and swap in with your keys? Firebase really doesn’t like the script tag way, but I was hoping it would be less overhead for this video to do it that way. I remember I had to downgrade to 8.x because the script tags were throwing errors in the latest version

[@zasharan2]

@@DrewConley Thank you for the suggestion, I might try out some of those options, although I managed to figure out how to use the modular 9 version of firebase with javascript, so I might just stick with that. If there is some benefit with using version 8 that I am not aware of, please inform me, and I am grateful for your advice and tutorials. Thank you!

[@fergame330]

@@zasharan2 hi, how did you manage to make the game on 9, i've been looking for a solution for weeks if i can attach a google drive or just send your fi script code

[@ListenToAJ]

@@zasharan2 hey any updates on how to get javascript working with 9.x?

[@alexshel8578]

super duper) how to make it with email password auth in firebase ?

[@GamerWhoTouchedGrass]

How to upload the files, because its not working for me for some reason

[@timofeybabisashvili7077]

Can anybody explain how to create same map? :) Maybe there is some redactor? 🧡

[@astrofx6717]

can we make 8 balls pool kind of game?

[@Blocker319]

I keep getting firebase is not defined in the console. Any solutions?

[@monochr0mat]

Use firebase version 8 instead of 9

[@mvsanjana8379]

is it possible for me to add a mysql script as my database?

[@dreamxgamingyt]

How did u loaded the html page Do u use xampp ????

[@DrewConley]

It’s just a static index.html file in the root of the web server directory. Nothing fancy!

[@kstudios4046]

nope doesnt work i guess i have to switch to something else

[@shreyasharma3244]

How you added links of player id

[@adibadib1507]

How did you link your website with firebase?

[@fork730]

Is it possible to import processing.js?

[@racheristaarandelia5824]

can u do for php mysql?

[@adhochero6619]

how do you do this in firebase v9?

[@sebastianbrunobautes7145]

cual sería el código en versión 9 modular ?

[@davidrusca2]

How would you approach server side stuff? Like, say I wanted to create the coins in a centralized way instead of letting each player try to add some. Or would you just assign a kind of "admin" client which is the coinmaker, and hop the role to someone else whenever it leaves.

[@thekaijumaster463]

Does this still work in 2023?

[@DrewConley]

Yep! There may be some SDK changes in the latest versions of Firebase, but these Realtime database fundamentals haven't changed in years.

[@gameginger5529]

How much it will cost in firebase . say 100 players play all time all day .

[@DrewConley]

Hard for me to say... it will depend on the amount of data in your read and writes. I think Firebase has handy calculators that you can use, but you'll need to bring realistic numbers for your usecase. I'm generally in the camp of build your thing, get it in front of players, optimize (for costs or whatever) when you outgrow the current solution.

[@mark.sandoval]

Saveable account can I restore my account?