Plaats het onderstaande javascript ergens in de body van jouw pagina en verwijs, in het script, naar een afbeelding van 480px (breed) en 360px (hoog). Het javascript zal de puzzel, met de door jouw opgegeven coördinaten, op de juiste plaats in de pagina "zetten". De variabelen voor de positie zijn (in het script) linker_marge_jigsaw_puzzle en top_marge_jigsaw_puzzle. Om de puzzle te spelen kan je op een blokje klikken, waardoor dat blokje "draggable" wordt. Verplaats het blokje (ongeveer) naar de plaats waar je het "puzzel-stukje" wilt hebben en klik nog een keer. Het puzzel-stukje zal zich zelf op de juiste plaats "vastklikken". Zoals je kan zien heeft het speelbord rode en zwarte (achtergrond)vlakken. De rode vlakken dienen er voor om genoeg ruimte te hebben om de stukjes een beetje te sorteren. De puzzle zélf moet gelegd worden op de zwarte vlakken. Als de jigsawpuzzle klaar is, wordt de gespeelde tijd en het aantal zetten weergegeven.
<script>
/*global window: false */
/*global alert: false */
var ie_browser = 1;
ie_browser = {
browser_versie: function() {
var de_versie = 999;
if (navigator.appVersion.indexOf("MSIE") !== -1) {
de_versie = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return de_versie;
}
};
var puzzle = "http://static.dns5.nl/jigsaw-puzzle.jpg",
puzzle_ok,
puzzle_blokje,
linker_marge_jigsaw_puzzle = 80,
top_marge_jigsaw_puzzle = 260,
jigsaw_x,
jigsaw_y,
x_puzzle,
y_puzzle,
blok_puzzle = -1,
i,
j,
jigsaw_timer,
jigsaw_move = 0;
var s = 60,
nx = 8,
ny = 6,
nxy = 48;
var pos = new Array(144);
function verplaats(e) {
if (window.event) {
e = window.event;
}
if (e.pageX) {
jigsaw_x = e.pageX;
jigsaw_y = e.pageY;
}
else if (e.clientX) {
jigsaw_x = e.clientX;
jigsaw_y = e.clientY;
if (!window.opera && navigator.userAgent.indexOf('MSIE') >= 0) {
jigsaw_x += document.documentElement.scrollLeft;
jigsaw_y += document.documentElement.scrollTop;
if(ie_browser<7){
jigsaw_x += document.body.scrollLeft;
jigsaw_y += document.body.scrollTop;
}
}
}
if (blok_puzzle >= 0) {
puzzle_blokje.left = (jigsaw_x - x_puzzle) + 'px';
puzzle_blokje.top = (jigsaw_y - y_puzzle) + 'px';
}
}
function naar_beneden() {
if (jigsaw_x >= linker_marge_jigsaw_puzzle && jigsaw_y >= top_marge_jigsaw_puzzle && jigsaw_x < linker_marge_jigsaw_puzzle + 480 && jigsaw_y < top_marge_jigsaw_puzzle + 480) {
j = Math.floor((jigsaw_x - linker_marge_jigsaw_puzzle) / s) + Math.floor((jigsaw_y - top_marge_jigsaw_puzzle) / s) * nx;
if (blok_puzzle < 0) {
if ((i = pos[j]) < 0) {
return;
}
pos[j] = -1;
x_puzzle = (jigsaw_x - linker_marge_jigsaw_puzzle) % s + (i % nx) * s;
y_puzzle = (jigsaw_y - top_marge_jigsaw_puzzle) % s + Math.floor(i / nx) * s;
puzzle_blokje = document.getElementById('b' + i).style;
puzzle_blokje.zIndex = 2;
blok_puzzle = i;
} else {
if (pos[j] >= 0) {
return;
}
pos[j] = blok_puzzle;
puzzle_blokje.left = (linker_marge_jigsaw_puzzle + (j % nx - blok_puzzle % nx) * s) + 'px';
puzzle_blokje.top = (top_marge_jigsaw_puzzle + (Math.floor(j / nx) - Math.floor(blok_puzzle / nx)) * s) + 'px';
puzzle_blokje.zIndex = 1;
blok_puzzle = -1; ++jigsaw_move;
for (i = 0; i < nxy && pos[i] === i; ++i) {
puzzle_ok = i;
}
if (i === nxy) {
document.onmousedown = null;
j = new Date();
j = Math.floor((j.getTime() - jigsaw_timer.getTime()) / 1000);
alert("Perfect! Je deed het in\n\nzetten:\t" + jigsaw_move + "\nTijd:\t" + j + " seconden");
}
}
}
}
function start_jigsaw_puzzle() {
if (document.getElementById) {
document.onmousedown = naar_beneden;
document.onmousemove = verplaats;
jigsaw_timer = new Date();
} else {
alert("oeps! Er gaat iets fout");
}
}
jigsaw_timer = window.location.search;
if (jigsaw_timer.length > 0) {
puzzle = jigsaw_timer.substring(2);
jigsaw_timer = jigsaw_timer.substring(1, 2);
if (jigsaw_timer === "4") {
s = 120;
nx = 4;
ny = 3;
nxy = 12;
}
if (jigsaw_timer === "1") {
s = 40;
nx = 12;
ny = 9;
nxy = 108;
}
}
for (i = 0; i < 144; ++i) {
pos[i] = -1;
}
document.write("<div style='height:550px;position:relative;z-index:2;left:", linker_marge_jigsaw_puzzle + 600, "px;top:", top_marge_jigsaw_puzzle, "px;width=136px'>");
document.write("<img border=1 src='", puzzle, "' width=132 height=99><br><br><input name='reset' type='button' value='reset' class=btn style='width:136px' onclick='location.href=\"http://kompoos.nl/javascripts/games/jigsaw-puzzle.html\"'></div>");
document.write("<div style='position:absolute;left:", linker_marge_jigsaw_puzzle, "px;top:", top_marge_jigsaw_puzzle, "px;z-index:0'>");
document.write("<table cellpadding=0 cellspacing=1 border=0 bgcolor=#111133>");
for (i = 0; i < nx; ++i) {
document.write("<tr>");
for (j = 0; j < nx; ++j) {
document.write("<td width=", s - 1, " height=", s - 1, " bgcolor=#", (i < ny) ? "000000": "330000", "> </td>");
}
document.write("</tr>\n");
}
document.write("</table></div>");
for (i = 0; i < nxy; ++i) {
do {
j = Math.floor(Math.random() * nx * nx);
}
while (pos[j] >= 0);
pos[j] = i;
var x = (i % nx) * s,
y = Math.floor(i / nx) * s;
var x1 = (j % nx) * s,
y1 = Math.floor(j / nx) * s;
document.write("<div id=b", i, " style='position:absolute;left:", linker_marge_jigsaw_puzzle + x1 - x, "px;top:", top_marge_jigsaw_puzzle + y1 - y, "px;clip:rect(", y, "px ", x + s, "px ", y + s, "px ", x, "px);z-index:1;'>");
document.write("<img border=0 src='", puzzle, "'></div>");
}
onload = start_jigsaw_puzzle;
</script>