About the Project
Layout and Design Notes
-Game screen layout achieved by overlaying a bootstrap grid with absolute positioning onto a background image. -Put game controls under game board for better narrow screen UX. -experimented with background images for fireButton, messageArea, form, guessInput. -failed to implement a downloaded ttf font and reverted to google font. -Removed metallic form background. It was too visually "heavy" and didn't mesh with other visual elements. -Implemented LESS nesting, functions, variables and operations. LESS compiled using Crunch2. -Game sounds and soundtracks using HTML5 audio tags, and JS event handlers. -Screen transitions implemented with location.assign(). Delays and timing implemented with setTimeout(). -Heroku hosting enabled with a single required index.php file that "includes" our home.html home screen file (static html sites not otherwise allowed on heroku).
- Game logic code is inside a model, view and controller object and a few other functions.
- View object functions display messages and game graphics when players fire and hit or miss.
- The model object tracks ship locations, hit-status and other vital stats and game variables. It also has methods to randomly generate ship locations, help the controller process user guesses and implement related game logic.
- The controller object processes user guesses, calling on model object helper methods and initiates game over sequence.
- Bootstrap column grid for x-small is broken on smartphone emulation in dev tools and not great on my phone.
- Smartphone user story not met as keyboard pop-up on phone obscures game. unacceptable. Need to implement fire by tap on table cells.