liamrathke / a4-creative-coding Goto Github PK

Live demo: https://a4-creative-coding-liamrathke.herokuapp.com/

The goal of this submission was to modify the HTML5 Canvas-based game I had built for A2 and A3 to conform with A4's requirements, as well as to make several user experience and usability improvements. Most of the challenging work was completed earlier this term, when the game was initially built - I learned about HTML5 Canvas rendering, including strategies for clearing/reusing the canvas, syncing game progress to a refresh rate, and since this application uses the VueJS framework, properly registering interval-based code so that it works properly with the VueJS lifecycle. To add substance for A4, users are now able to customize the player and food colors using sliders (several colors are pre-selected), bringing the total user-modifiable parameters up to the four required: the player's X position, the player's Y positoin, the player's color, and the food's color. Additionally, navigation buttons (to move the player up, down, left, or right) were added, so that users on mobile devices could still play the game without needing a keyboard. One additional challenging bug was somewhat improved: the original game listened to all keystrokes triggered on the webpage, which could cause issues if the user entered a name that contained letters in WASD, or if the user tried to use arrow keys to navigate through the input options. By listening only to keystrokes on the canvas, this unintentional behavior should be fixed.