Sudoku with JQuery
HTML
<script src="https://cdn.rawgit.com/iAmMortos/JSConsole/master/console.min.js"></script>
<div id="sudoku"></div>
<button id="export_btn">Export</button>
<button id="reset_btn">Reset Puzzle</button>
<button id="clear_btn">Clear Board</button>
<div id="output"></div>
CSS
html { opacity: .3; }
.sudokuTable { border-collapse: collapse; }
.sudokuCell {}
.sudokuNumberBox
{
position: relative;
width: 34px;
height: 34px;
border: solid 1px #000;
}
.sudokuNumberBox div
{
position: absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
JavaScript
var easyPuzzleStr = "..6..73..\n.18..9.5.\n5......64\n92..8....\n...763...\n....9..75\n63......8\n.9.3..52.\n..24..6.."
function main()
{
enableConsole();
var sudoku = new Sudoku();
sudoku.importPuzzle(easyPuzzleStr);
var generator = new SudokuGenerator()
var solver = new SudokuSolver();
$("#export_btn").click(function(){
$("#output").text(sudoku.getPuzzleArrayStr());
});
$("#reset_btn").click(function(){
sudoku.clearUserInput();
console.log("Puzzle Reset!");
});
$("#clear_btn").click(function(){
sudoku.clearBoard();
console.log("Board Cleared!");
});
}
$(document).ready(main);
function Sudoku()
{
var $domobj = $("#sudoku");
var $table = $("<table>").addClass("sudokuTable");
var _self = this;
var selectedCell = new Vec2d();
var selectedRow = 0;
var selectedCol = 0;
var selectedBox = 0;
var selectedNum = '';
$domobj.append($table);
var data = new Array(9);
for (var y = 0; y < data.length; y++)
{
var curRow = $("<tr>");
$table.append(curRow);
data[y] = new Array(9);
for (var x = 0; x < data[y].length; x++)
{
var cell = $("<td>");
cell.addClass("sudokuCell");
if (x % 3 === 2 && x !== 8)
cell.addClass("hspace");
if (y % 3 === 2 && y !== 8)
cell.addClass("vspace");
curRow.append(cell);
var numBox = $("<div>").addClass("sudokuNumberBox");
cell.append(numBox);
data[y][x] = new Cell(new Vec2d(x, y), numBox, this);
}
}
$(document).on("keydown", function(e){
var evt = e || window.event;
// Prevent backspace from navigating back.
if (e.which === 8 && !$(e.target).is("input, textarea"))
e.preventDefault();
switch(evt.which)
{
case 37: // left
_self.moveSelected(-1, 0);
break;
case 38: // up
_self.moveSelected(0, -1);
break;
case 39: // right
_self.moveSelected(1, 0);
break;
...