Noughts and Crosses

by Daniel Nguyen, October 2021

Check out the live version here!

📖 Background

This was my first project in General Assembly's Software Engineering Immersive, completed during Week 3 of the 12-week course. It took me four days to write.

It combines everything we'd learnt so far about HTML, CSS, JavaScript and jQuery.

🎯 Project Brief

We had to create our own Tic Tac Toe game. I called it "Noughts and Crosses" to unAmericanise it.

See the full spec here: Project-Brief.md.

💡 Inspiration

I used Google's version as the inspo for my game design.

(Their animations are better than mine 😢... for now!!)

🛠 How I approached the task

Having readable code is very important to me, so I separated my JS code into backend.js and frontend.js files. And even all my CSS files are separated by component.

No DOM manipulation occurs in the backend, which also allows for future scalability to different frontend frameworks!

Code overview:

Full documentation will come if I ever get around to it.

backend.js:

const GAME = {
  // The backend database.
  // Contains everything needed to play the game, even in the console!
  // eg. board, settings, players, play(), result, reset()...
}

frontend.js:

const RENDER = {
  // Contains all the methods for rendering HTML via jQuery
  // this.render() and this.resetBoard() call all the other RENDER methods
};

const HANDLERS = {
  // These are the only methods in the whole program that interact with both backend.js and frontend.js
  // These are called by methods in $(document).ready()
};

$(document).ready(function () {
  // Contains all event listeners
});

🪲 Bugs

Sound effects don't always play (a problem with how they're loaded?)
On game-over, user can still click on cells and trigger sounds
vs Computer, user can click before the computer's move has rendered

🙏 Coming soon

Improved responsive design for mobile browsers 📱
Funner styling – I really hate styling 🤮
Customising player tokens
LocalStorage to persist data locally to allow games to continue after page refresh or loss of internet connectivity
Google Firebase for networked multiplayer
Playing against AI ( Easy, Medium and Impossible ). I think I need to read about game trees

🍻 Thanks

Thanks to Joel, Rowena and Pat (the instructional team) for their quality Slack content, gifs and memes so far... and also the teaching, I guess.

cheddachedda/noughts-and-crosses