Open View.html in a browser. The application supports multiple browers, including IE10, Chrome, Firefox, Safari and Opera.
Clicks on 'Let's start' in the starter page and then choose a difficulty to start the game.
When game is over, a popup window will be displayed to let user choose to restart or return to the starter page.
Interactions:
-
user can use keyboard or the Input panel to fill a number in a cell. If input is invalid, the cell will become red
-
when user select a filled cell, other cells with the same number will be highlighted
-
when a row, column or block is fully filled, an animation will be displayed
To make UI look nice in multiple broswers and devices is challenging.
To implement responsive design, I did couple things:
-
use relative sizes instead of absolute size for components
-
calculate component size dynamically based on window's size
-
use an Input Panel for user input, considering it's difficult and slow to use keyboard in mobile devices
The whole structure are designed based on MVC framework.
- View
(1) View.jade: draws the basic UI, which is translated to HTML by Jade engine automatically
(2) SudokuView.js: it dynamicly draws UI of the sudoku board and of the digits panel
- Model
(1) SudokuGenerator.js: creates the board data model
(2) SudokuSolver.js: manipulates the board data model
(3) Cell.js: represents a cell object in the sudoku board. It contains properties: row, column, value and possible values
- Controller
(1) ViewController.js: handles user action events
- Helper:
(1) Config.js: contains constants which are used universally. it defines dimension of the board so that we can create an advanced Soduku game in a larger board than 9*9
(2) Util.js: contains general helper methods
using Qunit test framework to test logic in sudoku solver and in utility methods