Build a Multiplayer Minesweeper Game: Client-Side Creation

This is the second installment of the Minesweeper game mini-series. In this tutorial, you will learn how to fully implement the client side of the application. We will use a native iOS application that connects to the web servers, parses the data, and displays the user interface interaction.

Project Overview

Minesweeper Flag is a multi-player board game that is played between two opponents. Commonly, blue or red is assigned to each player. The board is composed by 256 equal squares, and each board has 51 mines placed in entirely random positions.

Figure 5: Blue player
Preview of the Final Effect

Review of Part 1

Before you start the second part of the series make sure you have the first part fully tested and implemented.

Step 1: Installing Cocos 2D

The first step is to download and install the Cocos 2D game engine. For this tutorial, we used Cocos 2D version 2.

Once downloaded, you need to install it and integrate it with Xcode. Unpack the file downloaded before and you will notice a file called Open a terminal window and run that file using the following command

Step 2: Create a New Project

Using Xcode, create a new project: File -> New -> Project.

Figure 1: New cocos2d project

Choose the Cocos2d v2.x on the left side menu and Cocos2d iOS on the right one.

Step 3: Configure Project Settings

Give your project a name and a company identifier. For this tutorial, we use the iPad device family option.

Figure 2: New cocos2d project

Step 4: Verify the Setup

If everything is correct you should see a window similar to the following one:

Figure 3: Project files

Step 5: Add New Classes

Now you should add two new Objective-c classes. To do this, access the menu option File -> New -> File.

Add the following classes:

  • LoadingScene: This class will serve as a loading screen for the user while he / she is waiting for another player to join the game.
  • GameScene: This is the core class of the game; is where the main logic is programmed.

Step 6: Add Resource Files

In order to correctly run the game you should add the resource files to your project. Here you can download the resource files used. Next, copy them to the resources folder.

Step 7: Create the HelloWorldLayer Class

Change your HelloWorldLayer header file to the following:

Change the HelloWorldLayer implementation file to the following:

Step 8: Create the LoadingScene Class

Change your LoadingScene header file to the following:

Change your LoadingScene implementation file to the following:

Step 9: Create the GameScene Class

Change your GameScene header file to the following:

Change your GameScene implementation file to the following:

Step 10: Build & Run the Game

After you include the abovementioned code, the next step is to build and test the application. Use the cmd + b shortcut. If everything is fine you should see the iPad simulator up and running the game.

Figure 4: iPad

Step 11: Enjoy the Game

In this final step the objective is to enjoy the game. Since the game is a two-player game the best way to play it is with a friend!

In the following screens we can see the final game board though the vision of the two-players (blue and red). The arrow above the player avatar indicates the current player turn; the player that is currently playing.

Blue player game board:

Figure 5: Blue player

Red player game board:

Figure 6: Red player

Step 12: Conclusions

This concludes the Part II of how to create a Minesweeper Flag game using both server-side and client-side code. By now, you should have enough knowledge to create a simple Cocos2D game using the same game engine. If you have any questions or comments, please feel free to leave them in the comments section here.