Build Your Own OOP Connect 4 Game

OOP can make development faster, and your applications run faster. During this tutorial I'll demonstrate how to build an ActionScript Connect 4 game, using an organized OOP approach.

Let's get started!

Step 1: Start Off

In the source files I've included a connect4_start.fla file. Start from this file; it contains all the movieclips needed to finish the tutorial. It contains 4 movieclips. A red chip movieclip, a yellow chip movieclip, a boardpiece movieclip and a winner dialog movieclip.

Step 2: Create the Connect4 Class File

Create a new ActionScript file and save it with the name Connect4. Then add the following code:

 
package
{
	import flash.display.Sprite
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.geom.Point;
	import caurina.transitions.Tweener;
	
	public class Connect4 extends Sprite
	{
		private var columns:uint;
		private var rows:uint;
		private var board:Array = new Array();
		private var columnWidth:uint;
		private var rowHeight:uint;
		private var currentPlayer:uint = 1;
		private var currentChip;
		
		public function Connect4(columns:uint,rows:uint):void
		{
			this.columns = columns
			this.rows = rows
			
			columnWidth = new BoardPiece().width
			rowHeight = new BoardPiece().height
		}
	}
}

In this code block we import the classes (I also used the Tweener class which you can find here or in my source files). We define the field variables and we create the constructor. The constructor has two arguments, the number of columns and rows you want for your game. We put these values in our field variables.

Finally we init the columnWidth and rowHeight variable. One column has the same width as the width of one boardPiece (same principle for rowHeight).

Step 3: drawBoard Function

This function will draw the playboard of the game depending on how many columns and rows you want. Add this function to the constructor of the Connect4 class:


private function drawboard():void
{
	for(var i:uint = 0; i < rows; i++)
	{
		for(var j:uint = 0; j < columns; j++)
		{
			var boardpiece:BoardPiece = new BoardPiece();
			boardpiece.x = j * boardpiece.width;
			boardpiece.y = i * boardpiece.height;
			this.addChild(boardpiece);
		}
	}
}

Step 4: createBoardArray Function

Here we create a 2-dimensional array which will contain all the locations of the board.

We fill the array with 0's. A zero means there hasn't been a chip placed on that position. This function also needs to be added to the constructor.


private function createboardArray():void
{
	for(var i:uint = 0; i < rows; i++)
	{
		board[i] = []
		for(var j:uint=0; j < columns; j++)
		{
			board[i][j] = 0;
		}
	}
}

Step 5: putChipReady Function

In this function we identify who the current player is and add the matching chip to the display list. We give the chip a negative y value so it shows up above our playboard. Once again, add this function to the constructor.


private function putChipReady():void
{
	if(currentPlayer == 1)
	{
		currentChip = new RedChip();
	}
	else
	{
		currentChip = new YellowChip();
	}
	currentChip.y = -50;
	this.addChildAt(currentChip,0);
}

Step 6: enterFrameHander

On every frame this function calculates the column where the current chip should fall if you click at that moment. That way it's easier for the user to make a move. The function calculateColumn(explained in the next step) returns the column you are hovering.

Then we calculate the new x position of the chip. Therefore we multiply the currentColumn with the column width. Because the registration point of the chips in centered we have to add the column width divided by 2.

Finally we tween the current chip to the postion we just calculated.


private function enterFrameHandler(e:Event):void
{
	var currentcolumn:uint = calculateColumn(this.mouseX);
	var xPosChip:uint = currentcolumn * columnWidth + columnWidth/2
	Tweener.addTween(currentChip, {x:xPosChip, time:0.3, transition:"lineair"});
}

Add the enter frame Event Listener to the constructor.

1
2	this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

Step 7: calculateColumn Function

This helpfunction gets the x position of the mouse and returns whichever column matches.

If your mouse x position is less then zero then we return the first column(0 because array is zero-indexed). If your mouse x position is more then the width of your board we return the last column. If your mouse x position is on the board we devide the x postion by the width of one column.


private function calculateColumn(mouseXPos):uint
{
	if(mouseXPos < 0)
	{
		return 0;
	}
	else if(mouseXPos > this.width)
	{
		return columns - 1;
	}
	else
	{
		return mouseXPos/columnWidth;
	}
}

Step 8: boardClick Function

This function first checks which column you clicked (by using the calculate column function which I explained in the previous step).

The for loops through all the rows and as soon as board[row][columnclicked] == 0 we know the chip has to be placed on that location. Remember 0 in the BOARD array means the location is empty.

If we find the location where the chip has to fall, we fill that postion in the board array with the number of the current player (we need these numbers later on to check for the winner) and we place that chip with the placeChip function (explained in the next step).

Finally we toggle the player (explained 2 steps further) and we put another chip ready. The return makes sure we exit the for loop.


private function boardClick(e:MouseEvent):void
{
	var columnclicked:uint = calculateColumn(e.currentTarget.mouseX);
	
	for(var row:int=rows-1; row>=0; row--)
	{
		
		if(board[row][columnclicked]==0)
		{
			board[row][columnclicked] = currentPlayer;
			placeChip(new Point(row,columnclicked))
			togglePlayer();
			putChipReady();
			return
		}
	}		
}

Add the click Event Listener to the constructor.

1
2	this.addEventListener(MouseEvent.CLICK, boardClick)

Step 9: placeChip Function

This function gets the row(position.x) and column(position.y) where the chip has to enter, then calculates the y- and x distance.

distanceY: you multiply the row you clicked with the height of one row. Because the registration point of the chips is centered we have to add the row height divided by 2.

distanceX uses the same principle.

Then we use tweener to tween the current chip to the right position.


private function placeChip(position:Point):void
{
	var distanceY:int = position.x * rowHeight + rowHeight/2;
	var distanceX:int = position.y * columnWidth + columnWidth/2;
	Tweener.addTween(currentChip, {x: distanceX, y:distanceY, time:0.7, transition:"easeOutBounce"});
}

Step 10: togglePlayer Function

This function is pretty straight-forward. If the current player is 1 switch to player 2, else switch back to player 1.


private function togglePlayer():void
{
	if(currentPlayer == 1)
	{
		currentPlayer = 2
	}
	else
	{
		currentPlayer = 1
	}
}

At this point you can already place the chips, but there's currently no check to see if a player managed to connect 4 chips. The next step is to code this check.

Step 11: checkForWinner Function

This function has 1 argument, the position of the last placed chip and return true or false. The function uses 4 subfunctions each of which checks for a winner.

We pass through the position for each subfunction. If one of the 4 returns true we have a winner.


private function checkForWinner(position:Point):Boolean
{
	if(verticalCheck(position))return true;
	if(horizontalCheck(position))return true;
  	if(leftUpDiagonalCheck(position))return true;
    if(rightUpDiagonalCheck(position))return true;
    return false;
}

Step 12: verticalCheck

To check for a vertical connect 4 we only have to look at the chips beneath the current chip. (There can't be a chip above the current chip at this point).

First we check if there are 3 locations beneath the current chip. If not, there's no way you can connect 4 and we return false.

If there are 3 or more locations beneath, we start a loop which goes through the 3 rows beneath. If one of the chips beneath is from the other player we did not connect 4 chips (return false).
If the loop can be finished we know there are 4 connected (return true).


function verticalCheck(position:Point):Boolean
{
	var row:uint = position.x;
	var column:uint = position.y;
	var player:uint = board[row][column];

	if (row >= rows - 3)
	{
		return false;
	}
	
	for (var i:uint = row+1; i <= row + 3; i++)
	{
		if (board[i][column] != player)
		{
			return false;
		}
	}
	return true;
}

Step 13: horizontalCheck

What we do here is first check the chips on the left of the current chip and then the chips on the right side.

Therefore we init a counter with 1 (the chip you just placed is the first one in the row). Then we go to the left until we reach a chip of an other player and meanwhile we count the chips of the current player.

We do the same for the right side. So if our counter is 4 or more we have connected 4 chips (return true).


function horizontalCheck(position:Point):Boolean
{
	var row:uint = position.x;
	var column:uint = position.y;
	var player:uint = board[row][column];
	var counter:uint = 1;
			
	for(var i:uint = column-1; i>=0; i--)
	{
		if(board[row][i] != player)
		{
			break;
		}
		counter++;
	}
			
	for(var j:uint = column+1; j<columns; j++)
	{
		if(board[row][j] != player)
		{
			break;
		}
		counter++;
	}
			
	if(counter >=4)
	{
		return true;
	}
	else
	{
		return false;
	}
}

Step 14: leftUpDiagonalCheck

This functions is similar to the horizontal check. The only difference is that we now check diagonally.

First we go left upwards: we count the chips of the current player and if we come across a chip of the other player we break the loop. To make sure we don't go outside our board array the while loop has to stop when our row or our column is less then 0.

We use the same principle to check the positions right downwards.


function leftUpDiagonalCheck(position:Point):Boolean
{
	var player:uint = board[position.x][position.y];
		
	var row:Number = position.x - 1;
	var column:Number = position.y - 1;
		
	var counter:uint = 1;

	while (row >= 0 && column >= 0)
	{
		if (board[row][column] == player)
		{
			counter++;
			row--;
			column--;
		} 
		else
		{
			break;            
		}
	}
		
	row = position.x + 1;
	column = position.y + 1;
		
	while (row < rows && column < columns)
	{            
		if (board[row][column] == player)
		{
			counter++;
			row++;
			column++;
		} 
		else
		{
			 break;
		}
	}
	if(counter >=4)
	{
		return true;
	}
	else
	{
		return false;
	}
}

Step 15: rightUpDiagonalCheck

This function is almost identical to the previous function. The only difference is the direction of the diagonal we check.


private function rightUpDiagonalCheck(position:Point):Boolean
{
	var player:uint = board[position.x][position.y];
	
	var row:Number = position.x + 1;
	var column:Number = position.y - 1;
		
	var counter:uint = 1;
		
	while (row < rows && column >= 0)
	{
		if (board[row][column] == player)
		{
			counter++;
			row++;
			column--;
		} 
		else
		{
			break;            
		}
	}
		
	row = position.x - 1;
	column = position.y + 1;

	while (row >= 0 && column < columns)
	{            
		if (board[row][column] == player)
		{
			counter++;
			row--;
			column++;
		} 
		else
		{
			 break;
		}
	}
	if(counter >=4)
	{
		return true;
	}
	else
	{
		return false;
	}
}

Step 16: Updating the boardClick Function

Now we have to implement the code we just wrote. After we place the chip we check for a winner. If we have a winner we remove our EventListeners so you can't place a new chip and we show who's won (explained in the next step). If we don't have a winner we togglePlayer and put a new chip ready.


private function boardClick(e:MouseEvent):void
{
	var columnclicked:uint = calculateColumn(e.currentTarget.mouseX);
			
	for(var row:int=rows-1; row>=0; row--)
	{
				
		if(board[row][columnclicked]==0)
		{
			board[row][columnclicked] = currentPlayer;
			placeChip(new Point(row,columnclicked))
			if(checkForWinner(new Point(row,columnclicked)))
			{
				this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
				this.removeEventListener(MouseEvent.CLICK, boardClick);
				showWinnerDialog();
			}
			else
			{
				togglePlayer();
				putChipReady();
			}
			return
		}
	}	
}

Step 17: showWinnerDialog Function

This function simply adds a new instance of the WinnerDialog which you can find in the library. If the current player is 1 red wins, else yellow wins.


private function showWinnerDialog():void
{
	var dialog:WinnerDialog = new WinnerDialog();
	var winner:String = (currentPlayer == 1)? "red" : "yellow"
	dialog.txtWinner.text = winner + " wins!!!";
	dialog.x = (this.width - dialog.width)/2;
	dialog.y = 100;
	this.addChild(dialog);
}

Step 18: Create the Document Class

Create a new ActionScript file and save it with the name "Application".

In this class we add an instance of the Connect4 Class we wrote to the display list. Don't forget the constructor arguments.


package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Application extends MovieClip
	{
		public function Application():void
		{
			var connect4:Connect4 = new Connect4(7,6);
			connect4.x = (stage.stageWidth - connect4.width)/2;
			connect4.y = (stage.stageHeight - connect4.height)/2 + 50;
			this.addChild(connect4);
		}
	}
}

Finally, click on the stage and set the Document Class to "Application".

Conclusion

You just learned how to create a connect 4 game and how multiple dimensions can make life a lot easier! I hope you enjoyed the tutorial and thank you for reading.