Fire JS Bin - Sudoku

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

//Ello. M.Firdaus wrote this code. He doesn't know about copyright but he just wants to be attributed =)
window.onload=function(){
var
SQUARE_SMALL=(window.location.search.substring(1)=="small")?2:3,//Easter egg. Because 4 is too much and 2 is too cute ;_;
SAMPLE_SIZE=SQUARE_SMALL*SQUARE_SMALL,
GRID_SIZE=SAMPLE_SIZE*SAMPLE_SIZE,
CELL_SIZE=50,

rp=[],cp=[],sp=[],tn=[],or=[],p={},np={},
allPoss=Math.pow(2,SAMPLE_SIZE)-1,
wrong=0,working=0,

grid=$("grid"),
input=$("input"),
showGuide=$("guide"),
newGameButton=$("new"),
blankButton=$("blank"),
limitInput=$("limitInput"),
solveButton=$("solve"),
loading=$("loading"),
control=$("control"),
reset=$("reset"),
good=$("good"),
difficulty=$("difficulty")

for(var i=0;i<SAMPLE_SIZE;i++){
  p[i+1]=Math.pow(2,i)
  np[p[i+1]]=i+1
}

grid.innerHTML=(new Array(GRID_SIZE+1)).join("<div></div>")
input.innerHTML=(new Array(SAMPLE_SIZE+1)).join("<div></div>")

grids=grid.getElementsByTagName("div")
buttons=input.getElementsByTagName("div")
grid.style.width=SAMPLE_SIZE*CELL_SIZE+"px"
input.style.width=SQUARE_SMALL*CELL_SIZE+"px"

showGuide.onclick=refresh
difficulty.onchange=newGame
newGameButton.onclick=newGame
blankButton.onclick=blankGame
solveButton.onclick=function(){
  for(var i=0;i<GRID_SIZE;fill(i++));
  refresh()
}
reset.onclick=function(){
  tn=or.slice(0)
  repro()
  refresh()
}
for(var i=grids.length;i--;){
  grids[i].num=i
  grids[i].className=(sx(i)+sy(i)%2)%2?"":"dark"
  grids[i].onmousedown=function(){
    if(!working&!or[this.num]){
    if(tn[this.num]){
    unset(this.num)
    refresh()
    }  else {
    input.className=""
    input.num=this.num
    input.style.left=(x(this.num)+0.5)*CELL_SIZE+"px"
    input.style.top =(y(this.num)+0.5)*CELL_SIZE+"px"
    for(var j=0;j<buttons.length;j++)
      buttons[j].innerHTML=(!limitInput.checked|gs(input.num)&p[j+1])?j+1:" ";
    }}
  }
}

for(var i=buttons.length;i--;){
  buttons[i].n=i+1;
  buttons[i].innerHTML=i+1
  buttons[i].onmousedown=function(){
    if(this.innerHTML!=" "){
      set(input.num,this.n)
      refresh()
    if(solved()){
      good.className=""
      if(confirm("It is done! New game?"))newGame()
    }}
  }
}

function refresh(){
  input.className="hidden"
  good.className="hidden"
  free()
  for(var i=0;i<GRID_SIZE;i++){
   grids[i].className=((sx(i)+sy(i)%2)%2?"":"dark") + ((or[i])?" orig":"")
   grids[i].innerHTML=
    tn[i]?tn[i]:((showGuide.checked)?"<span>"+has(gs(i)).join(" ")+"</span>":" ")
  }
}

function loadGame(start){
  init()
  for(var i=0;i<start.length;i++)
   if(start[i])set(i,start[i],2)
}

function has(gt){
  for(var i=0,str=[];i<SAMPLE_SIZE;i++)
  if(gt&p[i+1])str.push(i+1)
  return str
}

function randomNumber(gt){
  str=has(gt)
  return str[Math.floor(str.length*Math.random())]
}

function create(){
busy()
for(var i=0;i<GRID_SIZE;i++){
  if(!gs(i)){
    i=0
    init()
  } else if(!tn[i]) set(i,randomNumber(gs(i)),1)
}
free()
}

//16x16 grid is impossible without better algorithm
function unSolve(ii){
return function(){
  busy()
  var temp,temp2
  if(ii){
    temp=tn.slice(0)
    unset(Math.floor(Math.random()*GRID_SIZE));
    unset(Math.floor(Math.random()*GRID_SIZE));
    temp2=tn.slice(0)
    for(var i=0;i<GRID_SIZE;fill(i++));
    if(solved()) loadGame(temp2);else loadGame(temp)
    window.setTimeout(unSolve(--ii),0)
  } else {
   refresh()  
  }
}}

function busy(){
 working=1
 loading.className=""
 control.className="hidden"
}

function free(){
 working=0
 loading.className="hidden"
 control.className=""
}

function newGame(){
  init()
  refresh()
  create()
  unSolve(difficulty.value)()
}

function blankGame(){
  init()
  refresh()
}

newGame()
} //I'm just going to submit this now. Sorry for the mess. Thanks for reading. -M.Fir

<!DOCTYPE html>
<html lang="en"><head>
  <title>Sudoku.js</title>
  <meta charset="utf-8">
  <meta name="description" content="Another day, another sudoku app. Made in javascript, but not quite HTML5. By M.Firdaus, for 10k Apart">
</head><body>

<div id="header">
    <h1>Sudoku.js</h1>
    <img id="loading" src="/attach/load.gif"/><img id="good" src="/attach/good.gif"> 
    <div id="stuff">
      <q>Another day, another sudoku app.<br />Made in javascript, but not quite HTML5.</q>
      <br />By <a href="http://twitter.com/mfirdaus">M. Firdaus</a>, for <a href="http://10k.aneventapart.com/">10k Apart</a>.
    </div>
  </div>

<div id="sudoku">
    <div id="grid"></div>
    <div id="input"></div>
    <ul id="control">
      <li><a id="new" href="#">New Game</a></li>
      <li><a id="reset" href="#">Reset Puzzle</a></li>
      <li><a id="blank" href="#">Blank Grid</a></li>
      <li><a id="solve" href="#">Try Solving</a></li>
      <li>
        <input id="guide" type="checkbox"/> Guides<br />
        <input id="limitInput" type="checkbox"/> Limit Inputs 
        <select id="difficulty">
          <option value="30">Easier</option>
          <option value="80" selected="selected">Normal</option>
          <option value="150">Harder</option>
        </select>
      </li>
    </ul>
  </div>
</body></html>

* { margin:0px; padding:0px; font-family:Cambria, Serif }
body { background:#DDD; font:12pt Cambria, Serif; margin:20px 30px; }
h1 { color:#AAA; width:180px; z-index:2; position:relative; font-size:32px }
#sudoku { position:relative; top:-7px; z-index:1 }
#grid { border-bottom:1px solid #666; border-right:1px solid; float:left; text-align:center; background:#FFF; }
#grid div { float:left; height:49px; line-height:49px; border-left:1px solid #666; border-top:1px solid #666; cursor:pointer; color:#33F; width:49px; }
#input { line-height:49px; text-align:center; border-bottom:1px solid; border-right:1px solid; float:left; position:absolute; background:#FFF; z-index:3 }
#input div { float:left; width:49px; border-left:1px solid; border-top:1px solid; cursor:pointer; font-size:12pt }
#description { margin-top:20px; width:200px; float:left; text-align:justify; margin-left:10px; color:#555; line-height:150%; font-size:8pt }
#stuff { font-size:8pt; position:absolute; top:14px; left:300px; z-index:4; width:300px }
#stuff q { color:#999 }
.hidden { display:none }
.dark { background:#EEE }
.orig { color:#000 !important; cursor:default !important }
a { text-decoration:none }
li a { display:block; color:#000; line-height:40px; text-align:center; }
li a:hover { background:#FFF }
span { font:8px Cambria; display:block; text-align:left; color:#999 }
ul { list-style:none; clear:left; line-height:20px; float:left; height:50px; margin-top:5px; }
li { float:left; font-size:8pt; margin-right:10px; width:80px }
input { position:relative; top:2px }
select { width:80px; font-size:8pt }
img { position:absolute; top:30px; left: 200px; }
/* Also a mess; _; */

Pop out