Tic Tac Toe
About:
This is an Angular PWA I created while following along a video tutorial, and have made many modifications to the original. The tutorial video was created by Jeff Delaney and can be viewed here:
https://fireship.io/courses/angular/start-angular-beginner-tutorial/
Changes I made to the original:
- Created an options dialog that allows the user to change the settings of the game.
- Added the ability to play against the computer.
- The computer can also play against itself.
- The user can choose whether...
- X always goes first.
- O always goes first.
- The player to go first is chosen at random.
- The player to go first alternates back and forth.
- Fixed bug where X's and O's can be placed after a winner was determined.
- Added ability to determine a draw.
- Made improvements to the appearance:
- Fixed bug where clicking on a square would decorate the square next to it (which can be seen in the video).
- Made the app responsive so it will look good on mobile.
- The winning "3 in a row" are now highlighted for clarity.
- Replaced default Angular Icon/Favicon.
- Lots of other small improvements.
To see all of the code differences between the end of the tutorial, and the additions that I wrote, click here:
https://github.com/dapirra/tic-tac-toe/compare/end-of-tutorial...master?diff=split#files_bucket
What's a PWA?
A PWA (Progressive Web App) is a web app that can be downloaded and "installed" to your mobile device or desktop. Windows, macOS, Linux, Android, and iOS are all capable of running a PWA. When installed, the browser downloads an offline copy of the web app to the user's phone/computer, and shortcuts are created on the user's home screen/desktop/start menu.
To install a PWA, Chrome, Safari, or Microsoft Edge are required. Then, it's as simple as navigating to the URL of the app and either looking in the address bar for a button with a plus in it or looking in the browser menu for an install menu item. On Safari, the share button would have to be pressed and then the web app can be added to the user's home screen.
More information regarding PWAs can be viewed here:
https://en.wikipedia.org/wiki/Progressive_web_application
Icon Credit:
It's just a screenshot I took of the game.