4 In a Row Website Complete Breakdown

This blog will completely explain to you exactly how we made our 4 in a row game website. We will go over how we made the webpages and also go over how we added the functioning of the game along with how we made the AI. This blog is written with the purpose of being simple and easy to understand and still providing great value and information.

This website consists of the following pages :-

Home Page
Player VS Player
Player VS AI

Homepage

The homepage for this website is minimal and to the point. It gives the user two clear options to pick, Pass and Play or Play VS AI.

In the body of the html code, we have a background video of a pink and green gradient giving of a bright and fun look to the homepage.

Then we have a master div which contains all of the tags of the webpage. In the div, we have a Heading, and then another div. In the second div, we have 2 images, which lead to the desired game mode upon clicking. Along with the image, we also have provided some alternate text just in case the image fails to load correctly.

All of this paired with suitable CSS used for aligning and adding some hover effects, we are finished with the home page of the website.

Player VS Player (Pass and Play)

This page is also very minimalistic and easy to comprehend, just as the other pages in this website. It consists of a basic looking board in the center of the board with a number of cells in which the player can click and play their move in attempt to make a 4 in a row. Under the cells we have a button to restart the game which resets all the moves played.

Let’s skip the boring part and get straight to the Java Script Explanation.

This function initializes the game board by creating a grid of cells. Each cell is assigned a row and column index and is set to respond to click events. This function processes a player’s move. It checks if the game is still ongoing, finds the available row in the selected column, updates the cell’s class to reflect the current player’s color, and checks for a win or draw condition. This function processes a player’s move. It checks if the game is still ongoing, finds the available row in the selected column, updates the cell’s class to reflect the current player’s color, and checks for a win or draw condition.

We also have a function which checks for direction. And, we also have a function responsible for highlighting winning squares when a player wins. Another function is the reset button which just resets the board back to empty and making the current player back to player 1. You can find the code in the provided source code files at the end of this blog.

Now, enough of that, lets now go over how we made this AI.

Player VS AI

The AI uses a Minimax Algorithm. The Minimax algorithm is a decision-making algorithm commonly used in two-player turn-based games like chess, checkers, and tic-tac-toe. Its goal is to minimize the possible loss for a worst-case (maximum loss) scenario. The algorithm assumes that both players play optimally. One player is trying to maximize their score (Maximizer), and the other is trying to minimize it (Minimizer).

This is how we integrated this with the code.

The minimax function takes three parameters:

board: The current state of the game board.
depth: The maximum depth to explore in the game tree.
maximizing Player: A Boolean indicating whether the current player is the maximizing player.

The function follows these steps:

Check for valid moves and if the game is in a terminal state.
If the maximum depth is reached or the game is over, return a score based on the board state.
If it is the maximizing player’s turn, iterate through valid moves, recursively calling minimax to evaluate each move’s score.
If it is the minimizing player’s turn, perform a similar evaluation but aim to minimize the score.

Conclusion

And there you have it! You’ve built a 4-in-a-row game with a smart AI opponent in JavaScript! Whether you’re a budding coder or an experienced developer, I hope this project has sparked your creativity and coding passion. Feel free to share your thoughts or any questions in the comments below. Happy coding!