Check for a Tic Tac Toe winner with Regular Expressions

Tom — Mon, 18 Oct 2021 18:22:26 +0000

Regular Expressions are complicated. The syntax can be very messy and it's all too easy to make mistakes. I am fairly inexperienced with them and so I decided to get some practice during one of my projects. I built a Tic Tac Toe game that uses a Regular Expression to identify the winner. Here I will discuss how I achieved this and if someone has a cleaner solution (as I'm sure there are many!) please comment below.

The problem

Imagine the following setup. We have built a 3x3 grid as a table in HTML. The grid squares have id's numbered as such:

|1|2|3|
|4|5|6|
|7|8|9|

Clicking on a square fills it with an X or O depending on who's turn it is. We need a way of determining if the play that has just been made, won that player the game.

For the sake of this discussion the game is being played by 2 people, each clicking on squares in turn.

The solution

Before the game starts we define two empty strings to track each player's moves and an array of the free grid squares.

let xLocations = '';
let oLocations = '';
let empty = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

When a player clicks on a square we add that square's id to the relevant string. For example, if the first move of the game is X clicking the center square, then xLocations becomes equal to the string '5'. We also remove that id from the empty array.

Next we define every winning combination in Tic Tac Toe.

const winners = ['123', '456', '789', '147',
 '258', '369', '159', '357'];

After each play, we need to check if the locations string matches any of these winning combinations. However there are several complicating factors:

The play '321' is technically the same as '123' as the order played is irrelevant.
The length of the location string will not be constant, eg '17382' is a valid winner as it contains '123'.

Therefore we need to test if a given location string contains any of the winning combinations. My solution is as follows. Every time a square is clicked we run the following function and pass in either xLocations or oLocations depending on whether X or O just played.

const checkWinner = (locations) => {
  if (locations.length < 3) return;

  for (let i = 0; i < winners.length; i++) {
    let regexStr = winners[i].split('').join('|');
    let regex = new RegExp(regexStr, 'g');
    if (regex.test(locations)) {
      if (locations.match(regex).length === 3) return 'win';
    }
  }
  if (empty.length === 0) return 'draw';
};

Let's break this down.

Firstly, as a minimum of 3 plays is required to win, we can discard any locations strings shorter than 3. We then loop over the winners array and create a Regular Expression for each value in turn. For the first value this would look like the following:

// winners[0] = '123'
let regexStr = winners[0].split('').join('|');
// regexStr = '1|2|3|'
let regex = new RegExp(regexStr, 'g');
// regex = /1|2|3/g

This can be used to test if locations contains any of those three numbers. Therefore all we need to do is test for strings that match it exactly 3 times.

if (regex.test(locations)) {
  if (locations.match(regex).length === 3) return 'win';
}

Finally if the line if (empty.length === 0) return 'draw'; runs true it means that the grid is full and there is no winner.

And that's it! If you have any questions or improvements feel free to comment them below.

From Physics to Front End Development 🚀 ➡ 💻

Tom — Sat, 04 Sep 2021 21:20:48 +0000

It doesn't need to be said, but 2020 was a strange year.

On top of the global pandemic grinding the entire planet to a standstill, it is also the year I graduated from university, with a Master's degree in Physics and Astronomy. After 4 long, but rewarding years, I was done. Well what now?

I did not have a clear plan for after university. In the following months I remained at my part time job, earned some money and took a little time off. During this time I really thought about what I wanted to do for a career. I enjoyed my degree, the topics were broadly interesting but I did not feel particularly drawn to research or a PHD.

Coding in Physics

I realized that the parts of my degree I had enjoyed by far the most had been the coding. I had zero programming experience prior to university and my first introduction was in 1st year, learning Python. Throwing together line after line of spaghetti code to achieve a (somewhat) functioning game of connect 4 was a memorable experience and since then my love for coding has only increased.

During the remainder of my degree the code became more complicated and the project scope increased. The two standouts were a traffic simulation, which showed that any graph can look exciting with the right colour palette.

And secondly my Master's project, which involved writing a simulation to model emission from accretion disks. Both were as challenging as they were enjoyable and I would be very interested to revisit either in the future.

My introduction to front end development

After establishing a trajectory towards coding, I decided to start learning web development. I had dabbled a tiny amount before, but now it was time to get serious.

By far the most useful resource in the early stages was FreeCodeCamp. As the name implies, this is an entirely free resource and it breaks down concepts and ideas really well. Each tutorial contains all the information you need and then a console for you to complete a simple task before moving on. This means you are coding from the very beginning and it removes the need for you to set up anything. Just open a web browser and you can start learning and writing code.

Personally, I have completed the Responsive Web Design and JavaScript Algorithms and Data Structures Certifications. I have also completed the majority of the Front End Development Libraries but it is at this point I would recommend branching out your learning to other sources. The course provides a nice introduction to Bootstrap, jQuery, SASS and React but personally these didn't really click until I started incorporating into my own projects.

A React course that I am currently working through and would highly recommend is React - The Complete Guide (incl Hooks, React Router, Redux). This provides a much deeper dive into React and the instructor is fantastic. It is paid, but Udemy courses are perpetually on sale and there are many free alternatives on YouTube.

Some other helpful resources:

Frontend Mentor - challenges you with designs to replicate. Provides images, basic starting templates and active community solutions.
Grepper - Chrome extension that places code snippets to the top of Google results. Life and time saver.

What's next for me?

I am currently focusing on creating projects and finishing the React course. From there I want to dive into React Native, continue building my skills and then finally start applying for jobs. I hope this blog will be a document of that journey and some of the things I have learnt along the way.

If you wish to have a look at some of the projects I have created so far, you can find them on my GitHub.

DEV Community: Tom