Puslespill

// split an image into 9 pieces
// and place them in game element according to 
// structure in HTML-file
// pieces dimensions, 
var pWidth=0; 
//max value for any is 100px 
var pHeight=0;
var maxDim=100; 
// resize  image and prepare canvas
function reziseSolution(imId){
    var imElt=document.getElementById(imId);
    var w=parseInt(imElt.width);
    var h=parseInt(imElt.height);
    //console.log(w,h);
    if( w > 3*maxDim){
        h=h*((3*maxDim)/w);
        w=3*maxDim;
    }
    if(h>3*maxDim){
        w=w*((3*maxDim)/w);
        h=3*maxDim;
    }
    
    imElt.style.width=w+"px";
    imElt.style.height=h+"px";
    
    pWidth=w/3;
    pHeight=h/3;
    console.log(pWidth,pHeight);
    
    var canElt=document.getElementById("splitcanvas");
    canElt.width=pWidth;
    canElt.height=pHeight;
}
// place a piece of the image
// source of total image, where to put the piece, 
// piece horisontal(1..3), piece vertical(1..3)
function makePiece(imSourceId,pieceX,pieceY){
    var canElt=document.getElementById("splitcanvas");
    var imSourceElt=document.getElementById(imSourceId);
    var imWrapper=document.getElementById(""+pieceX+pieceY);
    var imTargetElt=imWrapper.getElementsByTagName("img")[0];
        
    var pieceWidth=imSourceElt.width/3;
    var pieceHeight=imSourceElt.height/3;
    
    //set correct size on wrapper
    imWrapper.style.left=10+(pieceX-1)*pWidth+"px";
    imWrapper.style.top= 50+(pieceY-1)*pHeight+"px";
    
    // drop lower left image. its blank
    if(pieceX==3 && pieceY==3){
        imTargetElt.src="tom.png";
        return;
    }
    
    // move the imagepart via the canvas
    var dc=canElt.getContext("2d");
    var imageObj = new Image();
    
    imageObj.onload = function() {
        // draw it on canvas
        dc.drawImage(imageObj,
            //from image        
            (pieceX-1)*pieceWidth, (pieceY-1)*pieceHeight, pieceWidth, pieceHeight, 
            // to canvas
            0,0, canElt.width,canElt.height);
        // move the canvas content to image elt
        var dataUrl=canElt.toDataURL();
        imTargetElt.src=dataUrl;
        
     };
    imageObj.src = imSourceElt.src;
}
function setUp(){
    reziseSolution("helebildet");
    makePiece("helebildet",1,1);
    makePiece("helebildet",1,2);
    makePiece("helebildet",1,3);
    makePiece("helebildet",2,1);
    makePiece("helebildet",2,2);
    makePiece("helebildet",2,3);
    makePiece("helebildet",3,1);
    makePiece("helebildet",3,2);
    makePiece("helebildet",3,3);
}

// Fixed set up for 3x3 squares
// 8 images  + 1 blank image
// square holds the content of each square
// the number 9 in the square means it is free
// Solved when squares are as initiated below
var problemSolved=false;
var freeRow=3;
var freeCol=3;
// 1000 is any number not 1..9, 
// simplify test for neighbour
var square=[[1000,1000,1000,1000,1000],
            [1000,1,2,3,1000],
            [1000,4,5,6,1000],
            [1000,7,8,9,1000],
            [1000,1000,1000,1000,1000]];
var shuffling=false;
function squareHit(r,c){
  if(freeNeighbour(r,c))
  {
    switchImages(r+''+c+'',freeRow+''+freeCol+'');
    tmp=square[r][c];
    square[r][c]=square[freeRow][freeCol];
    square[freeRow][freeCol]=tmp;
    if(isSolved()){
      elt1=document.getElementById('header');
      elt2=document.getElementById('doneit');
      elt1.innerHTML=elt2.innerHTML;
      showAll();
      problemSolved=true;
              
      document.getElementById('howto').innerHTML=
          document.getElementById('restart').innerHTML;
    }
    else
    {
      elt1=document.getElementById('header');
      elt2=document.getElementById('reshuffle');
      elt1.innerHTML=elt2.innerHTML;
    }
  }
}
function freeNeighbour(r,c){
  if(square[r-1][c]==9){freeRow=r-1;freeCol=c;  return true;}
  if(square[r+1][c]==9){freeRow=r+1;freeCol=c;  return true;}
  if(square[r][c-1]==9){freeRow=r;  freeCol=c-1;return true;}
  if(square[r][c+1]==9){freeRow=r;  freeCol=c+1;return true;}
  return false;
}
function switchImages(id1,id2){
  var elt1=document.getElementById(id1);
  var elt2=document.getElementById(id2);
  var etmp=elt1.innerHTML;
  elt1.innerHTML=elt2.innerHTML;
  elt2.innerHTML=etmp;
}
function shuffle(){
  if(problemSolved)
      return;
  shuffling=true;
  for (ix=0;ix<200;ix++){
    r=Math.round(2*Math.random())+1;
    c=Math.round(2*Math.random())+1;
    squareHit(r,c);
  }
  shuffling=false;
}
function isSolved(){
  if (shuffling)
     return false;
  return square[1][1]==1 && square[1][2]==2 && square[1][3]==3 &&
         square[2][1]==4 && square[2][2]==5 && square[2][3]==6 &&
         square[3][1]==7 && square[3][2]==8 && square[3][3]==9;
}
function showAll(){
  elt1=document.getElementById('complete');
  elt2=document.getElementById('game');
  elt2.innerHTML=elt1.innerHTML;
}

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>puzzle</title>
    <style>
      .framed{border-style:solid;border-color:black; border-width:1px}
    </style>

<script language="Javascript" src="play.js"> </script>
<script language="Javascript" src="split.js"> </script>
</head>
<body onload="setUp()">
<!-- top text -->
<div id="header" onClick="shuffle()" 
     style="position:absolute;left:10px;top:10px;font-size:24px;font-weight:600;color:#993306;">
     Klikk her for å stokke brikkene
</div>
<div id="game" >
<!-- squares -->
<div id="11" style="z-index:10;position:absolute;left:10px;top:50px" onClick="squareHit(1,1)">
  <img src="im-1.png" alt="im1" class="framed"/>
</div>
<div id="12" style="z-index:10;position:absolute;left:210px;top:50px" onClick="squareHit(1,2)">
  <img src="im-2.png" alt="im2" class="framed"/>
</div>
<div id="13" style="z-index:10;position:absolute;left:410px;top:50px" onClick="squareHit(1,3)">
  <img src="im-3.png" alt="im3" class="framed"/>
</div>
<!-- ========= -->
<div id="21" style="z-index:10;position:absolute;left:10px;top:250px" onClick="squareHit(2,1)">
  <img src="im-4.png" alt="im4" class="framed"/>
</div>
<div id="22" style="z-index:10;position:absolute;left:210px;top:250px" onClick="squareHit(2,2)">
  <img src="im-5.png" alt="im5" class="framed"/>
</div>
<div id="23" style="z-index:10;position:absolute;left:410px;top:250px" onClick="squareHit(2,3)">
  <img src="im-6.png" alt="im6" class="framed"/>
</div>
<!-- ========= -->
<div id="31" style="z-index:10;position:absolute;left:10px;top:450px" onClick="squareHit(3,1)">
  <img src="im-7.png" alt="im7" class="framed"/>
</div>
<div id="32" style="z-index:10;position:absolute;left:210px;top:450px" onClick="squareHit(3,2)">
  <img src="im-8.png" alt="im8" class="framed"/>
</div>
<div id="33" style="z-index:10;position:absolute;left:410px;top:450px" onClick="squareHit(3,3)">
  <img src="tom.png" alt=" " />
</div>
</div> <!-- game -->
<!-- how to -->
<div id="howto" style="position:fixed;left:10px;bottom:30px">
  Klikk på en av naboene til den blanke ruta
</div>
<!-- messages to use -->
<div id="doneit" style="display:none">
  Gratulerer problemet er løst
</div>
<div id="restart" style="display:none">
  <button onclick="location.reload();">Reload for å spille igjen</button>
</div>
<div id="reshuffle" style="display:none">
  Klikk å stokke brikkene igjen
</div>
<!-- can put images inside here -->
<div id="complete"  style="display:none">
    <img id="helebildet" src="landscape.jpg" alt="im9" style="z-index:10;position:absolute;left:10px;top:50px"/>
</div>
<div  style="display:none">    
<canvas id="splitcanvas" width="100" height="100"> </canvas>
    <img id="test" src="" alt="empty" />
</div>

</body>
</html>