In this video, we’re going to make a simple online multiplayer game from scratch with HTML, CSS, vanilla JavaScript and Firebase. You can take these concepts and apply them to whatever front end framework you like to use (React, Vue, Angular, etc).
We’ll also cover some top down movement, sprites, basic collisions, and score upticking. Hope you enjoy working with Firebase!
Code download link (You’ll need to set up a Firebase app to use it. Please read the notes in the security-rules file!):
NOTE: Also includes a bug fix for updating local coins ^^
Join our Discord community:
Build full games with me here:
This post on Game Dev Shift:
Create your first Firebase app here:
Join our email list for early access new content:
Thanks to Harris Heller for the music:
Firebase docs:
Kai
25.06.2023Are client side run javascript games easy to cheat on? Since there is no backend auth, things like item doubling etc. should be easy right?
Jerson Pascua
22.06.2023Hi @Drew Conley, my map is big, how do i move my scree according to keypress? thanks
Coding --vm
22.06.2023Really good tutorial ,we dont find this type of tutorials easiely on the internet .
can you make another tutorial with canvas js version ?
Jeremy Hu
22.06.2023in 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)
Game Ginger
22.06.2023How much it will cost in firebase . say 100 players play all time all day .
CMTG
22.06.2023I 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
Zasharan2
22.06.2023Does 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
David Ruscalleda Gómez
22.06.2023How 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.
Muhammad Hamza Imran
22.06.2023Thanks Buddy, I forgot about my firebase projects and today I earned total $16 🙃
Nightwaves
22.06.2023Thanks!
Ziberian
22.06.2023Hey 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?
IR 39
17.06.2023Doesn't work
Beat
17.06.2023Pretty 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?
William Melton
17.06.2023This was SUCH a well made tutorial my guy!! Don't stop teaching!
Reese Ochoa
17.06.2023followed the tutorial EXACTLY up till this point 13:00 and Im getting ALL of these errors so.
Uncaught SyntaxError: Unexpected token 'export' (at firebase-app.js:2350:1)
firebase-auth.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-auth.js:1:1)
firebase-database.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-database.js:1:1)
Uncaught ReferenceError: firebase is not defined at app.js:7 at app.js:7:1 at app.js:31:3
Mister DN EH
17.06.2023So I have a major question, why when Player2 for example moves there is lag for movement?
Mark Sandoval
17.06.2023Saveable account can I restore my account?
gerka
17.06.2023This 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
K&R Studios
17.06.2023nope doesnt work i guess i have to switch to something else
Loiczeq
17.06.2023Thanks 🙂
Astro fx
17.06.2023can we make 8 balls pool kind of game?
chriskevini
16.06.2023I'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"})
Loiczeq
16.06.2023Hi 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.
No Channel Guy
16.06.2023wait the screen is black
ReinkDesigns
16.06.2023so 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
Xalaeth
16.06.2023dude your keyboard sounds like it has switches made of jell-o
Erkan Ust
16.06.2023Whattttttttt
Clateman Malarkey
16.06.2023this looks like a fun project
Clateman Malarkey
16.06.2023Could this be mixed. With idle and GPS location based games
Swami Coupet
16.06.20235:40 to 5:41 what? what the fuck, that's completely different then what you copied? where do you even find these other script tag.
Scott Scott
16.06.2023As 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.
Ф М
15.06.2023any chance to see this same tutorial in react?
Alex Shel
15.06.2023super duper) how to make it with email password auth in firebase ?
Sloat Drivers
15.06.2023how 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
Sebastián Bruno Bautes
15.06.2023cual sería el código en versión 9 modular ?
Sebastián Bruno Bautes
15.06.2023what would be the code in version 9 modular?
Charlie Q. Cao
15.06.2023Thanks Drew this is Awesome!
Q: How can I remove all the coins stored in the real-time database when the last user logs out?
Ben Rigby
15.06.2023This is the *best*. Thank you.
TechTastic - Fabric Mod Developer
15.06.2023It seems I cant access the Google Drive to download the files, atleast not on my laptop
Probably an issue with CentOS itself
氷手裏剣
15.06.2023I keep getting firebase is not defined in the console. Any solutions?
PiXarY
15.06.2023the first 5seconds in "firebase is not defined" nice
DiddyP
14.06.2023Great 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.
DiddyP
14.06.2023Drew, 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?)
adhochero
14.06.2023how do you do this in firebase v9?
Dobren Dragojević
14.06.2023Hello, you can use PUSHER instead of Firebase
Fork
14.06.2023Is it possible to import processing.js?
Kadir Yumlu
14.06.2023How 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.
Juho Korhonen
14.06.2023Great tutorial!
Web and Game development tips and tricks.
14.06.2023Great video, very helpful
[deleted]
14.06.2023my brain hurts