DEV Community

Cover image for I built a browser game ๐ŸŽฎ
Jonathan
Jonathan

Posted on • Edited on

I built a browser game ๐ŸŽฎ

#javascript #frontend #webdev #beginners

Pairs Game
Client Github Repo
Server Github Repo

This has been my longest running software development hobby project. Pairs, a browser game.

Inspiration

When I first started teaching myself programming. One of the books I used was Python Crash Course by Eric Matthes. Great book by the way! After completing the book, there are additional resources online.

The resources included additional challenges to apply what you have learnt from the book. One of these challenges was to build a game based on the card game, Go Fish.

I ended up completing the challenge, however, there was a problem. It was all in Python and ran in the terminal. Who wants to play a game in the terminal? ๐Ÿซค

I wanted to build an application that I could easily share with others. I discovered the best way to do this was with a web application. This is how I fell into web development. Pairs was one of my first web development projects.

Tech Stack

Pairs has been through multiple iterations and tech stacks.

The current tech stack (at time of writing):

Client

Server

Dev (Client)

Features

This game has single player and multiplayer modes. Single player runs completely on the client whilst multiplayer uses a server to share the gamestate between clients.

Conclusion

This project has really helped me to learn and solidify new and existing web development and programming concepts. I would appreciate it if you'd check out the app and provide feedback. I am also open to collaboration.

Let me know!

Thanks for reading!

Top comments (2)

Collapse
 
gregjacobs profile image
Greg •

Great game and user experience!

Suggestions:

  1. Provide a clear updated score during gameplay.
  2. Simple animations can make it more "fun".
    • Try "flipping" the cards when user clicks on a match. You can use CSS transition() property
    • Try "enlarging" effect if you click on a card that does not match. You can use CSS zoom() property
  3. Maybe play around with your UI design. This is a great start, but I feel it could be improved ;)
Collapse
 
excelsior2021 profile image
Jonathan •

Hi Greg,

Thanks for your feedback. Much appreciated!