Play it here
Try it on your smartphone too :)
This a my first project with General Assembly - to build a tictactoe game from scratch. I had a lot of fun building it - everything from developing the logic in JS to animating it with CSS libraries.
##Technologies Used
- Files: html, css, javascript, sounds (mp3), icons(png)
- Hosted on github-pages (obviously)
- Animation css library (highly recommended!) - https://daneden.github.io/animate.css/
- Media queries
That's it really... nothing fancy...
##Approach Taken
Initially planned out the structure and logic - functions, for loops and generally what variables I would need. I then coded the logic (javascript) and got a 2 player game to work there - updating variables etc. Then I implemented some basic graphical features so I could see what was going on. Then I used created the logic for P1 vs Computer trying to use a lot of the same code and keep it DRY. However, I think this made it more messy and perhaps I should have tried to separate the game logic for P1 vs P2 and P1 vs Comp. Then I worked (for ages) on the layout and graphics to get everything aligned and working right on phones. I tried to make an animation myself using transitions - which turn out pretty average. Thank goodness my tutor told me about animate.css - that worked like a dream!
Oh and I forgot to mention - I spent ages ironing out bugs and refactoring my code. For example, in order to make the winner line animate, I had to identify which line was winning, so I had to refactor and use nested arrays and a .some high level function which took me some time to understand and get working. Got guidance from tutors here.
I sure enjoyed it though and super happy with the outcome :)
##Unsolved Problems
- There is considerable room for the computer player logic to improve. Would be cool to implement the mini-max algorithm.
- Could have some more features
##Installation Instructions:
- Clone my master folder for tictactoe (when you click the 'clone or download' link, copy the link).
- In your terminal, go to the directory where you want to clone this game to.
- Type git clone "link" e.g. "git clone https://github.com/AndrewPratley/tictactoe.git"
- After it has cloned, go into the tictactoe folder.
- type open index.html and now you have it on your computer and can play it without the internet. Who needs the internet anyways...:P
##Other:
- I installed lolcommits as as well - which takes a picture every time I make a commit which is just a bit of fun.
##Credits:
- Computer Error Sound - License: Attribution 3.0 | Recorded by Mike Koenig
- Robot Blip Sounds - License: Attribution 3.0 | Recorded by Marianne Gagnon
- People and Spin Icons made by Freepik in Interface and People from www.flaticon.com
- Stop Icon made by Chanut is Industries in Multimedia from www.flaticon.com
Thanks for reading
/