Crio Projects - Multiplayer Game - Connect4 | Crio.Do | Project-Based Learning Platform for Developers

Objective

You will build a multiplayer Connect4 game from scratch in Python using PyGame and sockets.

Project Context

Have you ever played a multiplayer game? Have you ever wondered what happens behind the scenes when you shoot a bullet in Counter-Strike or PUBG? Have you ever thought about how multiplayer games are synced across devices? If you want to get these questions answered this is the right project for you.


In this project, you will get a chance to learn some important fundamentals of networking and game design, and use them to build the famous multiplayer game Connect4 on your own.


Connect 4 is a famous game that comes in various variants. The gist of the game is to get four coins in a straight line in any direction (top to bottom, left to right, or diagonals) before your opponent does the same. For rules of the game refer here.


A demo of the game is as below:

expected_outcome


A walkthrough of the game and it's superficial modules is as below:


Project Stages

This Product Architecture consists of 4 stages as follows:

expected_outcome

High-Level Approach

  • Create game UI and handle user interactions using PyGame

expected_outcome

  • Implement logic to make the game functional

expected_outcome

  • Setup communication between multiple instances of game using sockets

expected_outcome

  • Add scoreboard functionality synced across multiple instances

expected_outcome

Applications

  • Pygame is widely used for various purposes like building games and UI (User Interface).(PyGame is popular amongst the Python community to build games and has been used in development of some popular games.)
  • Sockets are widely used for communication over the internet. Many popular apps like Ola, Uber and Grofers among others use sockets for communication.
  • Build more sophisticated multi-user softwares and games. Learnings of multi-user applications from this project can be used to create complex systems and games which support a larger set of features and even concurrency.

Objective

You will build a multiplayer Connect4 game from scratch in Python using PyGame and sockets.

Project Context

Have you ever played a multiplayer game? Have you ever wondered what happens behind the scenes when you shoot a bullet in Counter-Strike or PUBG? Have you ever thought about how multiplayer games are synced across devices? If you want to get these questions answered this is the right project for you.


In this project, you will get a chance to learn some important fundamentals of networking and game design, and use them to build the famous multiplayer game Connect4 on your own.


Connect 4 is a famous game that comes in various variants. The gist of the game is to get four coins in a straight line in any direction (top to bottom, left to right, or diagonals) before your opponent does the same. For rules of the game refer here.


A demo of the game is as below:

expected_outcome


A walkthrough of the game and it's superficial modules is as below:


Project Stages

This Product Architecture consists of 4 stages as follows:

expected_outcome

High-Level Approach

  • Create game UI and handle user interactions using PyGame

expected_outcome

  • Implement logic to make the game functional

expected_outcome

  • Setup communication between multiple instances of game using sockets

expected_outcome

  • Add scoreboard functionality synced across multiple instances

expected_outcome

Applications

  • Pygame is widely used for various purposes like building games and UI (User Interface).(PyGame is popular amongst the Python community to build games and has been used in development of some popular games.)
  • Sockets are widely used for communication over the internet. Many popular apps like Ola, Uber and Grofers among others use sockets for communication.
  • Build more sophisticated multi-user softwares and games. Learnings of multi-user applications from this project can be used to create complex systems and games which support a larger set of features and even concurrency.

Creating the game UI (User Interface) and defining UX (User Experience)

First validate the idea by doing a low level implementation (Proof of Concept) of the components involved in the project UI built in PyGame.

This helps you to:

  1. Get more clarity around the unknowns.
  2. Get a better understanding of the stages involved in the project.

Target building the game window, and adding user interactions like handling clicks (or key presses) in this module.

Requirements

  • Play and explore Connect 4 here .
  • Build UI (User Interface) for the game (various versions of Connect 4 exist. Start with building simple ones like the one shown below).

expected_outcome

  • Add click handlers and get the row and column numbers of the grid circles.
  • Test the UI skeleton by clicking and printing out relevant information onto the console.
  • Continue by adding colour to circles which are clicked. Use a 2-D array to keep track of grids and its colours.
  • Next, implement gravity for the column which is clicked. (The coins which are put in the grid will fall down.)

expected_outcome

Tip

  • How to read events in PyGame? - Use pygame.event.get() to read events in PyGame and then compare the type of event accordingly.

Bring it On!

  • Add animation for coins falling down in the column

Expected Outcome

On completion of this module you will have a UI similar to something shown below. The UI will be able to identify and handle click events by user and identify the row and column clicked.

expected_outcome

Implement the game logic to make it functional

In this module we implement the algorithm which drives the game and is used to determine if the winning condition is met by any user or not.

Requirements

  • In the previous task, we are keeping track of the board using a grid. In this task we will write an algorithm that takes the grid as the input and checks if the player (passed as input) got 4 coins in a line (remember line can be top to bottom or left to right or diagonal).
  • Implement the game logic for checking if any coin on the grid is forming a straight line of four.
  • Consider all directions while doing the above task or make the algorithm such that all cases are covered for a given coin- right,bottom, left-bottom diagonal and right-bottom diagonal (for an algorithm than checks from right to left and top to bottom)

Tip

  • Make a separate program (CLI only) using which language you are comfortable with to test out the algorithm before you use it in your game. Wouldn't want someone defeating you because of a technical glitch ;).
  • If testing on UI for 2 players alternate players on each click to see how the game would go.
  • Algorithm Trouble? - Algorithm to check for win in Connect 4: link

Note

  • Make sure you make the algorithm such that it takes the token used to denote a player as input as you will have to use this for 2 players. Also because that contributes to modular code. For example,if you are using 1 and 2 to denote respective players in the grid, instead of hardcoding these values in the algorithm and repeating the same code for every player, a good design would be to take 1 and 2 as an input to the function. Think about how these different codes would scale in case of tens or hundreds of players.

Bring it On!

  • Optimize the complexity of algorithm to make it more efficient

Expected Outcome

At the end of this milestone you will have your algorithm to check for win in Connect 4 ready.

expected_outcome

Establish socket communication between multiple game instances

In this module we start by implementing a POC (Proof of concept) program using socket connection for communication. We then move this into our game to start transmitting the game data across instances.

Requirements

  • Explore different multiplayer game models and client-server architectures used in them.
  • Implement a communication model using simple client-server architecture where one instance acts as client and other as server. Try sending messages from client to server and vice versa to verify the implementation works.
  • For using sockets you'll have to use an endpoint network address. Basically, the client will connect to the server using its address and the port specified. Hence, you need to have a provision on the UI to connect as server or client and let the user enter the server address in case they connect as a client.

expected_outcome

  • Explore socket communication using python and make a dummy project to see how it works.
  • Place this mini-project inside the PyGame event loop and use it to send game information (grid state, game status- win or lose) on a user event.
  • Implement additional logic to receive data and update the user's game and send data on a user event.

Tip

  • In case of localhost, for testing, you can open two separate instances of the game and use 127.0.0.1 (localhost IP address) for connecting to the server for testing.
  • The game needs only one user to be active and perform an action for a particular state. Leverage this behaviour with sockets to send and receive data without having to sync both instances.

Note

  • To use sockets you need to be on the same network as that of the IP address of the server ( this server should be reachable from the client).
  • Also beware of not using ports that are being used by another service on the OS otherwise you will get "Port already in use" errors. Some ports reserved for other services are port 80 for HTTP.

Bring it On!

  • Try to use a different, say a dedicated server model for the game to improve UX (User Experience).
  • Try libraries like Socket.io for added functionality.
  • Build the game using callbacks for smoother UX. Read about callbacks here.

Expected Outcome

After this task is done you will have a fully functional Connect 4 game where user action on one instance will be reflected on the other instance.

expected_outcome

Add a synced scoreboard and active player indicator

In this module we use everything we have learnt until now to add a scoreboard to the game which keeps track of the score and indicates the active player who needs to make the move.

Requirements

  • An extension and refresher of what we already did until now. Add a simple scoreboard UI to the bottom of the game window.

expected_outcome

  • Add the logic to update score after a win is received or inferred in the event loop.
  • Add provision for user score in the data being sent/received. Add logic to parse the same.
  • In the handling user event section, update the current active player using the data being sent/received.

Bring it On!

  • Implement the provision to add more players.
  • Create other more complicated and simultaneous games like a multiplayer snake game.
  • A more fast-paced game like PUBG with minimal graphics will be the real deal.

Expected Outcome

After this milestone is completed you'll have a fully completed Connect 4 game with a score tracker.

expected_outcome