XYZ CODE: Image Puzzle Game source code

Image Puzzle Game source code

Note: you need to replace the image.jpg url with your own in the following code.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/pure-min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/grids-responsive-min.css">


<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
p, td { line-height: 1.5; }
ul { padding: 0 0 0 20px; }
th { background: #eee; white-space: nowrap; }
th, td { padding: 10px; text-align: left; vertical-align: top; font-size: .9em; font-weight: normal; border-right: 1px solid #fff; }
td:first-child { white-space: nowrap; color: #008000; width: 1%; font-style: italic; }
h1, h2, h3 { color: #4b4b4b; font-family: "Source Sans Pro", sans-serif; font-weight: 300; margin: 0 0 1.2em; }
h1 { font-size: 4.5em; color: #1f8dd6; margin: 0 0 .4em; }
h2 { font-size: 2em; color: #636363; }
h3 { font-size: 1.8em; color: #4b4b4b; margin: 1.8em 0 .8em }
h4 { font: bold 1em sans-serif; color: #636363; margin: 4em 0 1em; }
a { color: #4e99c7; text-decoration: none; }
a:hover { text-decoration: underline; }
p, pre { margin: 0 0 1.2em; }
::selection { color: #fff; background: #328efd; }
::-moz-selection { color: #fff; background: #328efd; }
@media (max-width:480px) {
h1 { font-size: 3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.5em; }
td:first-child { white-space: normal; }
}
.inline-code { padding: 1px 5px; background: #eee; border-radius: 2px; }
pre { padding: 15px 10px; font-size: .9em; color: #555; background: #edf3f8; }
pre i { color: #aaa; } /* comments */
pre b { font-weight: normal; color: #cf4b25; } /* strings */
pre em { color: #0c59e9; } /* numeric */
/* Pure CSS */
.pure-button { margin: 5px 0; text-decoration: none !important; }
.button-lg { margin: 5px 0; padding: .65em 1.6em; font-size: 105%; }
/* required snapPuzzle styles */
.snappuzzle-wrap { position: relative; display: block; }
.snappuzzle-pile { position: relative; }
.snappuzzle-piece { cursor: move; }
.snappuzzle-slot { position: absolute; background: #fff; opacity: .8; }
.snappuzzle-slot-hover { background: #eee; }
</style>

<div id="puzzle-containment" style="border-top: 1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;margin:30px 0;padding:10px;text-align:center">
<div class="pure-g" style="max-width:1280px;margin:auto">
<div class="pure-u-1 pure-u-md-1-2"><div style="margin:10px">
<img id="source_image" class="pure-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJfvavq4T062LvIfx1E3rJvHNus-zCZ-r0DLcmCDx99-vNJnf1I04-VmEjP-D4GA7jQHLtZSWSSRHBvaisNWyuhKpJURmvjScEUjlbnSGUp9YEmH5V4_3K_h8Mkx3okWsTH8kR9ukekc6B/s1600/image.jpg">
</div></div>
<div class="pure-u-1 pure-u-md-1-2">
<div id="pile" style="margin:10px">
<div id="puzzle_solved" style="display:none;text-align:center;position:relative;top:25%">
<h2 style="margin:0 0 20px">Well done!</h2>
<a class="pure-button button-lg restart-puzzle" data-grid="3">Restart Puzzle</a>
<br><br>
<a href="#" class="restart-puzzle" data-grid="5">5x5</a>
  <a href="#" class="restart-puzzle" data-grid="7">7x7</a>
  <a href="#" class="restart-puzzle" data-grid="10">10x10</a>
</div>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
/*
jQuery snapPuzzle v1.0.0
Copyright (c) 2014 Hans Braxmeier / Simon Steinberger / Pixabay
GitHub: https://github.com/Pixabay/jQuery-snapPuzzle
License: http://www.opensource.org/licenses/mit-license.php
*/

(function($){
$.fn.snapPuzzle = function(options){
var o = $.extend({ pile: '', containment: 'document', rows: 5, columns: 5, onComplete: function(){} }, options);

// public methods
if (typeof options == 'string') {
this.each(function(){
var that = $(this),
o = that.data('options'),
pieceWidth = that.width() / o.columns,
pieceHeight = that.height() / o.rows,
pile = $(o.pile),
maxX = pile.width() - pieceWidth,
maxY = pile.height() - pieceHeight,
puzzle_offset = that.closest('span').offset(),
pile_offset = pile.offset();

if (options == 'destroy') {
$('.'+o.puzzle_class).remove();
that.unwrap().removeData('options');
pile.removeClass('snappuzzle-pile');
} else if (options == 'refresh') {
$('.snappuzzle-slot.'+o.puzzle_class).each(function(){
var x_y = $(this).data('pos').split('_'), x = x_y[0], y = x_y[1];
$(this).css({
width: pieceWidth,
height: pieceHeight,
left: y*pieceWidth,
top: x*pieceHeight
});
});
$('.snappuzzle-piece.'+o.puzzle_class).each(function(){
if ($(this).data('slot')) {
// placed on slot
var x_y = $(this).data('slot').split('_'), slot_x = x_y[0], slot_y = x_y[1],
x_y = $(this).data('pos').split('_'), pos_x = x_y[0], pos_y = x_y[1];;
$(this).css({
width: pieceWidth,
height: pieceHeight,
left: slot_y*pieceWidth+puzzle_offset.left-pile_offset.left,
top: slot_x*pieceHeight+puzzle_offset.top-pile_offset.top,
backgroundPosition: (-pos_y*pieceWidth)+'px '+(-pos_x*pieceHeight)+'px',
backgroundSize: that.width()
});
} else {
// placed anywhere else
var x_y = $(this).data('pos').split('_'), x = x_y[0], y = x_y[1];
$(this).css({
width: pieceWidth,
height: pieceHeight,
left: Math.floor((Math.random()*(maxX+1))),
top: Math.floor((Math.random()*(maxY+1))),
backgroundPosition: (-y*pieceWidth)+'px '+(-x*pieceHeight)+'px',
backgroundSize: that.width()
});
}
});
}
});
return this;
}

function init(that){
var puzzle_class = 'sp_'+new Date().getTime(),
puzzle = that.wrap('<span class="snappuzzle-wrap"/>').closest('span'),
src = that.attr('src'),
pieceWidth = that.width() / o.columns,
pieceHeight = that.height() / o.rows,
pile = $(o.pile).addClass('snappuzzle-pile'),
maxX = pile.width() - pieceWidth,
maxY = pile.height() - pieceHeight;

o.puzzle_class = puzzle_class;
that.data('options', o);

for (var x=0; x<o.rows; x++) {
for (var y=0; y<o.columns; y++) {
$('<div class="snappuzzle-piece '+puzzle_class+'"/>').data('pos', x+'_'+y).css({
width: pieceWidth,
height: pieceHeight,
position: 'absolute',
left: Math.floor((Math.random()*(maxX+1))),
top: Math.floor((Math.random()*(maxY+1))),
zIndex: Math.floor((Math.random()*10)+1),
backgroundImage: 'url('+src+')',
backgroundPosition: (-y*pieceWidth)+'px '+(-x*pieceHeight)+'px',
backgroundSize: that.width()
}).draggable({
start: function(e, ui){ $(this).removeData('slot'); },
stack: '.snappuzzle-piece',
containment: o.containment
}).appendTo(pile).data('lastSlot', pile);

$('<div class="snappuzzle-slot '+puzzle_class+'"/>').data('pos', x+'_'+y).css({
width: pieceWidth,
height: pieceHeight,
left: y*pieceWidth,
top: x*pieceHeight
}).appendTo(puzzle).droppable({
accept: '.'+puzzle_class,
hoverClass: 'snappuzzle-slot-hover',
drop: function(e, ui){
var slot_pos = $(this).data('pos');

// prevent dropping multiple pieces on one slot
$('.snappuzzle-piece.'+puzzle_class).each(function(){
if ($(this).data('slot') == slot_pos) slot_pos = false;
});
if (!slot_pos) return false;

ui.draggable.data('lastSlot', $(this)).data('slot', slot_pos);
ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });
if (ui.draggable.data('pos')==slot_pos) {
ui.draggable.addClass('correct');
// fix piece
// $(this).droppable('disable').fadeIn().fadeOut();
$(this).droppable('disable').css('opacity', 1).fadeOut(1000);
ui.draggable.css({opacity: 0, cursor: 'default'}).draggable('disable');
if ($('.snappuzzle-piece.correct.'+puzzle_class).length == o.rows*o.columns) o.onComplete(that);
}
}
});
}
}
}

return this.each(function(){
if (this.complete) init($(this));
else $(this).load(function(){ init($(this)); });
});
};
}(jQuery));

</script>
<script>
// jQuery UI Touch Punch 0.2.3 - must load after jQuery UI
// enables touch support for jQuery UI
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
function start_puzzle(x){
$('#puzzle_solved').hide();
$('#source_image').snapPuzzle({
rows: x, columns: x,
pile: '#pile',
containment: '#puzzle-containment',
onComplete: function(){
$('#source_image').fadeOut(150).fadeIn();
$('#puzzle_solved').show();
}
});
}
$(function(){
$('#pile').height($('#source_image').height());
start_puzzle(3);
$('.restart-puzzle').click(function(){
$('#source_image').snapPuzzle('destroy');
start_puzzle($(this).data('grid'));
});
$(window).resize(function(){
$('#pile').height($('#source_image').height());
$('#source_image').snapPuzzle('refresh');
});
});
if (~window.location.href.indexOf('http')) {
(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=114593902037957";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
$('#github_social').html('\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-snapPuzzle&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
<iframe style="float:left;margin-right:15px" src="//ghbtns.com/github-btn.html?user=Pixabay&repo=jQuery-snapPuzzle&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>\
');
}
</script>