Project 1:

Phwoar-in-a-row

About the app...

Phwoar-In-A-Row is a take on the popular game Connect4 or 'four in a row'.

Instructions to play are:

  1. Each user selects a token piece to play
  2. They then select a column to place their token
  3. The Winner is the first to place 4 in a row vertically, diagonally or horizontally.

Future Enhancements...

With a little additional time, here are some of the future improvements I would like to make:

  1. Incorporate a player leader board
  2. Add validation that a user token has been selected, technically you can play without a token!
  3. Make the site responsive to ensure the grid doesn't change its column width
  4. Add some options for backgrounds and music on or off

Technologies used:

HTML
CSS
javaScript
jQuery

Home Page

Wins

Ensuring that the rules of gravity were observed when a token was placed in a column as well as making sure that the token couldn't be placed in a slot more than once

Designing the logic for the grid in order to identify the win conditions and the subsequent winner of each match

Behind the Scenes...

The crux of this game is in providing a way in which the grid can be defined and managed as an array.

The problem

Provide a way to:

  • identify and log a slot that has been selected
  • ensure the token occupies the lowest available slot in a column
  • prevent occupied slots from being re-used during a game
  • logging game process for 2 players and storing the data to determine a winner

The solution

The game grid was mapped out with 6 rows of arrays, each with 7 columns. This provided 42 indices mapped against a slot.

This provided a unique identifier for each slot - ie an array and its index.

.pop is used so that only the last number of the array, which is also the the lowest available slot of a column, is available for a token to be 'placed in'. In this way .pop removed the index from the column so it couldn't be re-used. Additionally it added that reference to the players array to build the set of token locations by which to check for a win.

Nice Touches...

A bit of fun...

I used the retro hunks theme as a bit of fun with a 'Barry White' voiceover as a surprise when the mouse rolled over a picture. A short fan fair also announces the winner.

Scores

Players can keep a tally of their on-going score if they prefer an ongoing competition.

Select a token

Players get to choose their favourite hunk as their player token.

Game Play

The Grid's Array

Github

GitHub

README

Read-me