Documentation: Javascript Sudoku Game - 11/28/2016

Game Description:

The Sudoku Game I created follows the basic rules of a traditional Sudoku puzzle. A player must fill in the remaining numbers using logic and the numbers given in the starting puzzle.

Utilizing core javascript I implemented a point and click style user interface for the game. Additionally, I added some visual tools and effects to both aid the player in solving the puzzle as well as making the game play more interesting.

The following is a breakdown of the features of the game, and how they meet the project requirements:

• Game grid that uses CSS and is generated by JavaScript (20 pts):
  The game grid is a 9X9 HTML table. Utilizing a simply scintillating mixture of both CSS and Javascript I created various borders and images to create the 9 "sub-grids", (each 3x3), and style each of the cells accordingly.

  ❱ Many of the javascript functions that involve the rendering of the game are contained in the javascript file located at: /View/Render.js. Other aspects of the game beyond just the grid are rendered with the following functions:

  • renderStartMenu(): Renders the initial game menu
  • renderHowTo(): Renders the menu containing a video "how to play" tutorial
  • removeOldStuff(nodeID): Commonly used function to remove html based on parent ID parameter
  • renderPickGame(): Renders the "choose a difficulty" menu & animations
  • renderGameButtons(): Renders the number, settings, hint, and error buttons for the game grid
  • renderGameWinTiles(t): Renders the game win animation and menu
  • renderGameLose(numRem, gameTime): Renders the game lose animation and menu

  ❱ The key function used for generating the grid is renderGame(gameInfo,x,y), which takes 3 parameters: an object containing the game data, and the height and width of the generated grid.

• User input in the form of text, select options, and/or buttons (20 pts):
  The main form of user input for the game in this regard is the game buttons, which are strategically located at the bottom of the game grid.

  ❱ The number buttons are key, as the user is required to select one of the numbers, (1-9) before they can begin completing the puzzle. Selecting a number will highlight the matching numbers on the puzzle grid, (to aid the user in locating them), and subsequently allow the user to place the selected number in blank spaces on the grid.

  • changeBtClicked(): Changes the selected number variable, and kicks of several functions that change the appearance of the grid, the cursor, and the buttons

  ❱ Other user input options are located in the Settings menu, which is accessible by clicking on the small "settings-cog" icon in the bottom left of the game. The user inputs include:

  • Dropdowns: 2 dropdowns include settings to disable highlighting, and a no-lose mode
  • Yahoo Weather API (checkbox): A possibly unrelated setting that displays weather information below the game grid, powered by parsing a JSON response from the Yahoo weather API. Since this feature was more experimental/temporary, the code for this is located in the script tags of the GameGrid.html page, (it's pretty cool though, I recommend you take a look).
  • Input Text Box: Allows you to customize the title of the game
• User input in the form of mouse clicks (20 pts):
  The entire grid is clickable, except for the sudoku numbers that have already been entered.

❱ Event handlers are added to each of the cells and the buttons in their respective rendering functions. In addition, there is a somewhat hidden 'cheat' for the game. By right clicking an empty cell, the correct number is placed in the cell.

• Dynamic modification of HTML using innerHTML or DOM functions (20 pts):
  As each correct, (or incorrect), number is placed on the grid, the grid is dynamically modified to display the numbers. Additionally, the various game menus are rendered/removed entirely using javascript DOM manipulation.

  ❱ highlightSameNums(myElem): Is an example of DOM manipulation via innerText, as it is the function that changes the inner html of the table cell

• Use of XMLHttpRequest to load JSON or XML game data that is displayed on the grid page (20 pts)

  ❱ For detailed documentation on how this was implemented read the separate readme.txt file dedicated to the implementation of this, (located in the base folder of the project).

• Incorporates HTML 5 audio tags, video tags, canvas, or local storage (20 pts):
  The How To Play menu has an HTML 5 video tag, which displays a short tutorial video. Additionally, the game has various audio tags that are triggered by clicking the cells of the table, (and losing the game creates a canvas animation, explained further at the bottom of the page).
• Game logic code (120 pts):

  ❱ The majority of the game logic code is contained in the /Model/AssignmentScript.js file. Here are some example functions that handle base functionality:

  • correctNumber(): Logic to verify the number that was entered is correct
  • giveHint(): Randomly generates up to three hints, (given numbers), on the grid
  • setCheckMark() & setXMark(): Logic for the error and hint buttons, to verify that the user doesn't exceed the alloted amount
  • countSelectedNum(): This function counts the number of the selected sudoku number, (in order to check to see if the number is completely filled in), and kicks off some animation if it is
  • gameWin(): Stops game functionality, saves game data, and calls a rendering function to display the game win animations
  • gameLose(): Stops game functionality, saves game data, and sends game data to a gameLose animation function.

  ❱ Additional logic for other features of the game, (that haven't been mentioned yet), include the animation logic in the /View/Animation.js file, the timer logic in the /Model/stopwatch.js file, and some experimental random puzzle generation logic in the /Model/RandomPuzzle.js file.

• Extra Credit Worthy Stuff (... pts?):

  ❱ When losing the game, a canvas animation is triggered, which duplicates all of the numbers on the board, and turns them into canvas objects, and animates them dropping from the board. The canvas animation code can be found in the /View/Canvas.js file

  ❱ An unrequired feature that is in the project is linking to the Yahoo Weather API, which parses a JSON response from Yahoo containing weather information, (this feature can be seen by enabling the Yahoo API setting from the game grid 'Settings' menu).