Overview The goals of this assignment are: 1. Practice creating a web application using JavaScript event handling. 2. Practice responding to events through JavaScript DOM manipulation. 3. Practice the concept of state and variables within a web app. If something is not specified, then you have flexibility to be creative. If you are uncertain, please post a question in the discussions area. Please note that there are many solutions on the Internet that might work as starter code for this assignment however, you are required to write all code yourself from your own ingenuity. Please see the Academic Integrity Policy or ask a question if you are unsure. Violations will be treated as academic offenses. Content In this assignment you are being asked to create a simple game. Since we have no back-end support, we will need to work 100% client side. You will be creating a simple game or puzzle application. Do not over complicate the game itself, it can be as simple as a heads/tails coin flipping game, a dice game, memory matching puzzles, or some other simple game that you wish to create. Perhaps there's even a Happy Chicken assignment in your Java course that can serve as inspiration. You will keep track of the number of wins and losses the player has had and display it on the screen. The game does not have to consider multiple players, or any sort of permanence (i.e., tracking high scores between page reloads). Getting the overall idea working is sufficient. You may use Bootstrap 5 or multimedia elements, including CSS animations to make your project visually appealing and interesting. You may not use jQuery. Your game must accept a username and a preference choice that is appropriate to your game. These elements must be collected using a form, and appropriate input elements. The specifics are up to you, but some ideas that you might consider are a colour theme choice, the number sides each die would have, the amount of time allowed, etc. The preference must be used in your game somehow, and thus must be meaningful. If you put a difficulty selector, easy/medium/hard, then I will expect to see gameplay that reflects this decision. My advice is not to follow typical game patterns, but to pick something simple and achievable. The output below is an example and you are not required to match it. Additionally you are not required to provide console.log() messages, they are included here to help you understand what actions I have attempted. See 2 See User Name Color for X's http://www.activityvillage.co.uk/dice-games for some inspiration. https://www.mindgames.com/game/Memory+Trainer for some inspiration. COMP 10259: Assignment 4 Stephen Adams, Mohawk College, 2022 with inspiration from Sam Scott 10065 A3 User Name Color for X's Figure 1: Initial screen To signal that the user has entered both pieces of information a submit button labelled "Start Game" should be provided. When the start button is pressed you must validate that the inputs are valid using JavaScript, according to rules below. If they are not valid you must show a noticeable error message to the user explaining what they should have done. Note: the use of HTML validation rules is not sufficient to fulfil this requirement - you must use JavaScript to perform the validation. Username rules: User Name: olor for X's ne Name for X's Note that for the 3rd rule you may wish to be user friendly and convert any incorrect entry into a valid username. The preference rules will be designed by you, one idea is allowing a valid numeric range. Username must be letters only, and between 4 and 8 characters inclusive Each character in the username must be alphabetically bigger than the letter before (e.g. abcd is a valid username, but adcb is not) The username must start with an uppercase letter Figure 2: Bad input - element required asdf abcde Assignment 4 Sample Solution Start Game. abcde. Start Game 3 You may wish to use the charAt() function: https://www.w3schools.com/jsref/jsref charat.asp COMP 10259: Assignment 4 Stephen Adams, Mohawk College, 2022 with inspiration from Sam Scott 10065 A3 Start Game Figure 3: Bad input, non-ascending letters Start Game Assignment 4 Sample Solution Sta Figure 4: Bad input, Color black not allowed Assignment 4 Sample Solution Initial State Assignment 4 Sample Sol Figure 5: Valid input, game started Assignment 4 Sample Solution Input Error State - error message - repeat inputs - no username - no preference choice. - wins 0 - losses = 0 Tic Tac Toe! Player X Gol reset game Please fill out this field. invalid/missing username invalid/missing preference COMP 10259: Assignment 4 Stephen Adams, Mohawk College, 2022 with inspiration from Sam Scott 10065 A3 username must have 4-8 ascending letters pick a non-black color. username must have 4-8 ascending letters pick a non-black color Error: username must have 4-8 ascending letters pick a non-black color invalid/missing username invalid/missing preference username must have 4-8 ascending letters. Error: color must not be black Valid username Valid preference The Rules This is primarily a programming task. Valid username Valid preference Ready to Play Rev 20221500 - wins # - losses # Note that a game like Tic-Tac-Toe is not required, and that the username should be used somewhere in the output. Modifying the presented examples, instead of "Player X Go!" I could have used "abcde - place your X". set up initial game state R COMP 10259: Assignment 4 Stephen Adams, Mohawk College, 2022 with inspiration from Sam Scott 10065 A3 The overall flow of your web application is: username m L a Elements IC e top O Always use addEventListener to add event handlers. Put all your code in the load event listener. Do not use alerts, prompts or confirm boxes. Elements Sources O top O Filter Load event completed. Doing data validation Name asdf is not valid. Sources Filter pic Elements Sources O top O Filter Load event completed. Doing data validation Name asdf is not valid. Doing data validation Name abcde is valid. Color #000000 is not valid. Rev 20221500 Load event completed. Doing data validation Name asdf is not valid. Doing data validation Name abcde is valid. color #000000 is not valid. Doing data validation Name abcde is valid. Color #f50000 is valid. Disabling submit button, enabling game area 4 See https://torquemag.io/2021/08/hide-elements-css/ for some ideas on hiding elements. The game or The app must All JavaScript and CSS code must be in separate, external files. Recorder A You should make some effort to hide unneeded elements by clever use of attributes like display:none or similar technique4. For example, during your initial state the controls for your game don't need to be visible. During most states we don't want to see the error messages. Con Rev 20221500 Playing Game - game state to be determined by you You should also display a score or timer that updates during game play, as well as a total of games won and lost since the original page load. zzle must always end with a or fail message. run from beginning to end with no bugs or errors in the Console. Game Over - update wins/losses allow game to be reset You must use variables to track the state of the game. Except in the validation sections, you must not directly access the input elements. You must not read the number of wins and losses from your HTML elements, instead use your variables to update the elements. Once the game has started you must not allow the user the change their username or preference. COMP 10259: Assignment 4 Stephen Adams, Mohawk College, 2022 with inspiration from Sam Scott 10065 A3 There must be a "help" button once the game starts. When clicked it should display some instructions for the user. Rev 20221500 The page should look ok on a phone (i.e. maximum width 320px) and on desktops as well. All files must be documented according to "Documenting JavaScript Programs" on the LMS.