✨ 🛸 🪐 An astronomical take on the OG 3x3 board game with retro vibes. 🌙 🚀 ✨
Sure, you could play Tic-Tac-Toe on paper, but why not shoot for the stars and go paperless? Grab a friend, choose from one of two awesomely adorable space-age-themed tokens, and have fun! The app even tracks your wins, so you don't have to!
Play remotely or via Zoom using remote screen control!
- Javascript
- CSS
- HTML
- Classic Tic-Tac-Toe rules apply, so a "win" can be horizontal, vertical, or diagonal. Users cannot select a space that is already occupied.
- Players' scores are displayed and updated automatically.
- Gameboard resets automatically following each win or tie.
- Instructions are clearly displayed and update as each player takes their turn.
- Fun animation when a player has won.
- Alt text added for increased accessibility.
My daughter Maggie helped me with my demonstration. Enjoy!
- Fork this repo.
- Clone the repo to your local machine.
- View and play Space-Age Tic Tac Toe in the browser by running 'open index.html' in your terminal!
Alycia Canavan
A student in the Turing Front-End program, I completed this project during my fifth week of being a developer (Mod 1, in Turing-speak). This was our end-of-mod solo assignment, and I had a blast (🚀 pun very much intended) building this out on my own. In case you're interested, here are the project specs. I used the Git workflow, which is making more and more sense to me as I get more practice!
- I was really excited to get the chance to plan this undertaking on my own. I used Trello to organize my work, set deadlines for myself, and add "to dos" as I went. I sketched out my HTML "skeleton" by hand before doing any coding. I also used Replit to "test" my ideas for gameplay functionality.
- The functionality and design came together for me quickly, which allowed me to focus a good amount of time on my refactor. I used Turing's Style Guides to refactor my JS, CSS, and HTML. I also employed the BEM naming convention when writing my HTML.
- I also added some pizzazz to my project, including alt text for accessibility and animation.
- One challenge I encountered was the balance between responsive and reliable CSS. Let me explain - I 💜 Flexbox, and would gladly use it for everything. But sometimes dimensions just need to be hard-coded, and I am learning when to flex and when to be more hard-headed.
- I really wanted to add CSS breakpoints that would allow for my game to be played on mobile devices, but decided to "put a pin in" that idea, at least until we learn how it's done!
Added 9/2022:
- I revisited this project during the intermission between Mods 2 and 3 to add a local storage feature, so that players' scores persist across page refreshes. This wasn't something we were taught, so it required some self-study.
- CSS breakpoints to allow gameplay on mobile devices
- Allow users to select from a range of tokens
- Allow users to select different game play rules (e.g., Tic Tac No)
- First to my Project Manager, Leta, for fielding my multiple questions about just how far I could deviate from the comp.
- Second to my family, for not being (visibly) embarrassed or exasperated when I spent a whole dinner date talking through how to tell a computer how Tic-Tac-Toe works.
- Third to my fabulous mentor, Meg, who is always terrifically supportive and agreed to help me with my refactor!