This game application allows the user to create and log into an account, play rounds of the ever popular game of Tic Tac Toe, and track their total games played. I (Steven Hecking) completed this application as my first complete coding project at General Assembly Boston.
Link to the application: https://shecking.github.io/tictactoe-client/ Link to the application's repo: https://github.com/shecking/tictactoe-client
As this project represents my first real step into software engineering, it was essential for me to spend time planning the structure of the application, define its pieces and their interactions, and make small, incremental steps rather than have the end goal in mind immediately.
Loosely following a project schedule outlined by General Assembly for what problems to tackle, I studied related sets of documentation for the project to familiarize myself with their structures, considered user experience by creating a list of user stories, and sketched a basic wireframe for the application to begin to visualize its form.
Additionally, I made a list of each element that the application needed to function, in what general order they needed to be created, and what I'd like to incorporate into the final product. This list included displaying the game board and messages to the player with HTML and CSS elements, handling user input with jQuery, basic interaction and data storage with an external API, and creating a strctured game logic with parameters for success and failure in JavaScript.
As I began coding each of these elements, it was important for me to remember to achieve functionality before achieving form; the user facing material can always be displayed differently, just like the back end can always be reformatted for clarity and concision, but achieving basic functionality with minimal (if any) errors was paramount in this application's development. For sake of time, I made many decisions that substantially changed the final outcome in terms of presentation, but successfully created every functional attribute of the application. To name a few example, the user interface is clear and succinct, gameplay and in-game messaging is smooth, and every page element executes its intended role.
My personal strategy I used when tackling this project was fairly straightforward, even though getting the final result was not as straightforward as I would have liked:
- First, I observe; taking detailed notes in class, documenting form and syntax, and thinking through the problem step by step in a logical way. I watch others troubleshoot a problem or complete an exercise, and commit as much as I can to memory.
- Second, I practice; trying out exercises for myself, challenging myself to replicate the intended result, making a mental note of elements that I get hung up on.
- Finally, I execute and troubleshoot; utilizing my prior knowledge base on a topic, combining it with the observation and practicing above, and attacking problems as they arise in a experimental but procedural way.
Throughout the development process, I referenced many sources of information to familiarize myself with language functions and syntax, best practices for programming, and in order to troubleshoot errors and code bugs. These sources include language documentation, error logging, Google Chrome's Developer Tools, external blogs and internet resources, as well as discussing issues with fellow students and our instructors.
As a user, I want to create a personal account with password security. As a user, I want to be able to replay the game as many times as I want. As a user, I want feedback on all my actions while in-game. As a user, I want to be able to save statistics about my gameplay to review in the future. As a user, I want a game interface that looks nice and is easy to understand.
- HTML/CSS
- JavaScript
- Bootstrap
- jQuery/AJAX
- GitHub
- DOM/APIs
- JSON
As of "version 1.0" the application is fully functional, with the ability to play Tic Tac Toe games on a registered user account. However, it largely lacks visual aesthetic, and does not currently translate to a mobile environment very well. Future versions of this application might include an reformatted mobile version, an updated visual presentation, and further down the line would ideally support a wider range of stored user statistics and multiplayer capabilities.
Wireframe image: https://i.imgur.com/BFLOLyP.jpg?1
