Return to Blog Home

Tic Tac Toe

Source Live

Tic Tac Toe

A classic with a auditory twist!

It's considered a rite of passage to create some Tic Tac Toe variant, and that's exactly what I've done - but with an OOP theme, and eventually usage of the Speech Recognition Web API.


First I implemented the base class to manage the game state itself, from tile values to the current player and winner calculation.

Next came the DOM implementation: a 3x3 grid of buttons displaying the value within along with the latest message, supporting a simple reset button. Then came a textual implementation, allowing the game to be played via browser dialogs.

Speech Recognition

Finally was the Speech Recognition API, allowing the user to speak which position to place their tile to play the entire game. Unfortunately this Web API exists only truly for Chrome, but after learning the API and promisying the prompting the events, I was able to extend the DOM version of the game, even adding the ability to restart the game via voice too.

Future

Additional possibilities for this would be combining it with the Speech Synthesis Web API to allow the game to be fully playable to those without vision, and even implement the ability for the computer to also play against the user.