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();
}

function moveBlock() {
    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)...