Game Design – Greener Towns

Objective – Develop a multiplayer awareness game where players compete to have a greener city. 

Tools Used – Python, PHP, Bootstrap, HTML, CSS, Javascript, JQuery, AJAX, Sketch (wireframes), Adobe Illustrator (logo and activity cards design), Google Earth (cards/images).

The Game Play – The players draw cards from a deck of cards containing the images of a city or an activity. The cards having the city can only be connected where they have roads, i.e. you can connect road links of one card to the road link of another card. Each card has a greenery in square feet (calculation of greenery explained later), in the end whoever has more greenery wins the game. Both players take turns to draw cards from the same deck which has 30 cards, 24 are city cards and 6 are activity cards. The game ends when all cards are used up. The players have an option to use their cards later.

The Deck – The deck has 30 cards, out of which are city cards and 6 are activity cards. Types of activity cards:

  1. Deforestation (Wildfire Card) – each wildfire card states the percentage of greenery lost.  (Cards: –10%, –20%, –30%)
  2. Afforestation (Extra Greenery Card) – each greenery card gives the player extra percentage of greenery. (Cards: +10%, +20%, +30%)
  3. Bridges – in case the player cannot find roads to connect their city cards, they can use a bridge.

Each player gets 12 cards to build their city plus the activity cards they draw. The cards are always shuffled before the start of each game. As the levels progress the number of cards increase.

Calculating the Greenery – The greenery in each card is calculated by an algorithm that finds out the number of green pixels in the image as a percentage of the entire size of the image. This percentage is then multiplied by a common value, say 100, for all the images and is stored as the amount of greenery for that image.

Coding – The game is deployed on a web platform. It uses PhP for backend communication and JQuery on the front end. A PHP program is used to create a random deck of cards and store it in a text file. Two users are allowed to play this game at once and they can choose to be either player 1 or player 2, which is stored on their browsers. When the game beings, only one player is allowed to click on the deck to draw cards. An asynchronous call is made to the server to retrieve the first card from the deck and display it to the user. Once the player has made an action, the system allows the next player to draw a card. Continuous calls are made to the server to monitor the player’s turns. The scores of each player are updated based on the cards drawn and the game ends when there are no cards left in the deck


Step 1 – Design Logo, Activity Cards and Bridges

Screen Shot 2017-11-15 at 12.14.09 PM

Screen Shot 2017-11-15 at 12.14.20 PM

Step 2 – Paper Prototype and Playtest

To playtest, we built a paper prototype of cards and play tested with a group of users. In the paper prototype players withdrew cards from a deck and tried to build the city. Instead of an algorithmic calculation, the paper prototype required a human to calculate the score based on the cards drawn.

    Screen Shot 2017-11-15 at 12.15.25 PM
Step 3 – Wireframes

Screen Shot 2017-11-15 at 12.16.26 PM

Screen Shot 2017-11-15 at 12.16.36 PM
Step 4 – Final Game

Screen Shot 2017-11-15 at 12.17.29 PM


Future Plans for this Project –

  • Having more levels, with more cards with each progressive level
  • Citizens can upload pictures of their own city/street and other citizens can play using the
  • More types activity cards
  • UX & design changes in current version


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s