How To Make Front-End Game into Online Multiplayer

Hi All!

I’ve recently created a little front end game on Codepen that’s very similar to the popular Wordle game, but with several key differences. One of them is that it’s a two player game, where player 1 will set the wordle for player 2, and then player 2 will have to guess the wordle and will receive a unique score based on how many tries it takes to guess and whether or not and “helps” are used. There are three rounds, and you only have 1 minutes (or 1.5 if you use a “help”) to guess the wordle that your friend set.

Right now I have it working fairly well for two people who are physically in the same space and can play on the same phone. My goal, as part of my learning, is to take this game and put it on a website and add functionality so that players can either quickly create an account and play with their friends, or else sign in with their Facebook or Google credentials and play with friends that way.

I have ZERO experience on the backend though. I just know some HTML, CSS, Javascript, React, and jQuery but am still very new even with these. My question is, what would be the best way to go about making the app truly online multiplayer? What backend language would you recommend for this? Is it something I could learn to code myself and set up within a month? If I have someone else do the backend from say Fiverr or Upwork.com how much would you estimate it would cost?

Thanks in advance for any feedback. Several people have played the app and really like it, and suggested I turn it into an online multiplayer game so just trying to think of the best way to do that.

Bump. Any advice or tips?

Yep. So you definitely need a server, but because of the nature of the game, you don’t need anything hugely complex for the basic functionality (albeit “complex” is relative).

Yes. I think so. Javascript is fine. Any language is fine, but you’re already familiar with that one so it makes sense to stick with it.

So, brain dump here, should give you something to go on.

  • you have a server running, and it serves a web page (the client)
  • the server knows how many players are available, who have connected (NOTE: need a mechanism to check if they drop out, this is a bit of a pain)
  • once there are two, they can be paired, send them a message
  • game starts
  • player 1 does their thing, submits the wordle to the server
  • server sends it to player 2
  • server starts a timer
  • player 2 guesses, sends it to server
  • server sends it to player 1 to check OR server knows answer & responds directly
  • player 2 guesses, sends it to server… etc
  • if player 2 solves it, wins round, server tells both players player 2 won.
  • if timer expires, player 1 wins round, server tells both players player 1 won.
  • etc.

This does not require an account or anything like that. The server doesn’t know anything about who the players are. The only things it really needs to do is have a “game” object that gets created when you’ve got those two players & knows which turn it is, the score, that timer, and PROBABLY what the correct answer is.

It can be done in a few hundred lines of code, if that.

The options for how you send stuff to/from the server:

  • you can just send stuff via HTTP. POST/GET etc. This is a pain, because you’d need to keep checking if there was new information. so
  • use Server Sent Events. This means the server can send information, and in the app you can have an event listner that picks up incoming events. This works pretty well and is pretty simple. Slight issue with it when using HTTP 1 to do with how many concurrent connections are allowed . Likely not an issue, but if it is, need to use HTTP 2 which is a little bit more complicated.
  • use WebSockets. These keep a connection open between client and server. They’re pretty widely used for kind of thing you’re doing. They might be overkill as Server Sent Events probably give you everything you need, but there are loads of resources.

The two options you have are Node and Deno; Node is 10 years old and has a vast amount of learning material/examples. Deno is only a couple of years old but is has more basic stuff out-of-the-box and replicates all the browser APIs. It’s also got basically one-click deploy.

However, advantage with Node is that there is a course here on FCC that should be relevant. Note it’s a wee bit outdated though, Node has added a fair features that either simplify things of don’t require the libraries that are used in the course :man_shrugging: . All still pretty useful though.

Go through a few basic tutorials to see if it kinda makes sense: you want to build a very simple HTTP server that serves a web page. Can build on it from there, but you should see if you can grok that, as that will tell you if you can get something working

2 Likes

@DanCouper Thanks so much for your detailed response, it is greatly appreciated! Now I’m trying to decide if I should start learning the backend, or continue building my knowledge and experience with frontend tools.

My goal is to get to a place where I’m ready to start applying for junior web developer jobs and get my first gig. With that end in mind, do you think I’d be better served building more frontend projects and improving the projects I’ve already built, or starting to learn some backend?

Here is my current portfolio of projects.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.