PhotoPuzzle

by Shawn Lackey

HTML

<script src="jquery-ui.js"></script>
<title>Shuffle Picture Game</title>
<img src="http://lackeyinnovations.azurewebsites.net/images/mountain.jpg" alt="Mountain"></img>

CSS

body {background-color: #808080; font-family: Arial, Helvetica, sans-serif}

.drop {
    float: inherit;
    width: 600px;
    height: 200px;
    background-color: #494775;
    image-orientation: initial;
    
}
img{

   width: 600px;

   height: 400px;

}

p {text-indent: 0.0em}
#imgcntr{
    text-align: center;
    padding: 16px;
    border-image-source: url(./Cards);
}
body 
{ background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; 
  
}
h1 
{ display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; 
  -moz-animation: "draw"
}
#container 
{ 
    width:600px; margin:0 auto; 
    
}
#myCanvas 
{ background:#333; border:1px solid #2e2e2e;
  
}
#nav 
{ display:block; width:100%; text-align:center; 
  
}
#nav li 
{ 
display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; 
  
}
#nav li a 
{ color:#000; display:block; text-decoration:none; width:100%; height:100%; 
  
}

JavaScript

function imageBlock(no, x, y) {

    this.no = no;
    this.x = x;
    this.y = y;
    this.isSelected = false;
}

function SetImageBlock() {

    var total = TOTAL_PIECES;
    imageBlockList = new Array();
    blockList = new Array();

    var x1 = BLOCK_IMG_WIDTH + 20;
    var x2 = canvas.width - 50;
    var y2 = BLOCK_IMG_HEIGHT;

    for (var i = 0; i < total; i++) {

        var randomX = randomXtoY(x1, x2, 2);
        var randomY = randomXtoY(0, y2, 2);

        var imgBlock = new imageBlock(i, randomX, randomY);

        imageBlockList.push(imgBlock);

        var x = (i % TOTAL_COLUMNS) * BLOCK_WIDTH;
        var y = Math.floor(i / TOTAL_COLUMNS) * BLOCK_HEIGHT;

        var block = new imageBlock(i, x, y);
        blockList.push(block);

    }

}

function drawAllImages() {

    for (var i = 0; i < imageBlockList.length; i++) {
        var imgBlock = imageBlockList[i];
        if (imgBlock.isSelected == false) {

            drawImageBlock(imgBlock);
        }
    }
}

function drawImageBlock(imgBlock) {

    drawFinalImage(imgBlock.no, imgBlock.x, imgBlock.y, BLOCK_WIDTH, BLOCK_HEIGHT);

}

function drawFinalImage(index, destX, destY, destWidth, destHeight) {

    ctx.save();

    var srcX = (index % TOTAL_COLUMNS) * IMG_WIDTH;
    var srcY = Math.floor(index / TOTAL_COLUMNS) * IMG_HEIGHT;

    ctx.drawImage(image1, srcX, srcY, IMG_WIDTH, IMG_HEIGHT, destX, destY, destWidth, destHeight);

    ctx.restore();
}
canvas.onmousedown = handleOnMouseDown;
canvas.onmouseup = handleOnMouseUp;
canvas.onmouseout = handleOnMouseOut;
canvas.onmousemove = handleOnMouseMove;

function handleOnMouseDown(e) {

    // remove old selected
    if (selectedBlock != null) {

        imageBlockList[selectedBlock.no].isSelected = false;

    }

    selectedBlock = GetImageBlock(imageBlockList, e.pageX, e.pageY);

    if (selectedBlock) {
        imageBlockList[selectedBlock.no].isSelected = true;
    }

}

function handleOnMouseMove(e) {

    if (selectedBlock) {

       ...