Puzzel - Ik Stop Verspreiding Corona

IK STOP VERSPREIDING CORONA U OOK?

Ik Stop Verspreiding Corona U ook?
Ga naar de inhoud

Puzzel

Ontspanning
Snapfit.js (javascript jigsaw puzzle functionality for images)

Snapfit.js 1.5 allows you to add jigsaw puzzle functionality to images on your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.

Setting Up

Include snapfit.js into your webpages HEAD section.

<script type="text/javascript" src="snapfit.js"></script>

Using It

To add snapfit just set the event onload="snapfit.add(this);" to an div surrounded image.

<div><img onLoad="snapfit.add(this);" width="400" height="200" ...></div>

Mouse- and Keyboard-driven handling:

Move:
Click & Drag
Rotate clockwise in steps of 90°:
DoubleClick
Flip along X-axis:
DoubleClick & [alt]Key or Right Mouse Button
Flip along Y-axis:
DoubleClick & [shift]Key or Middle Mouse Button

Keyboard-driven handling: (if focused through mouse over image)

Reset:
Press [escape]
Mixup:
Press [delete] or [backspace]
Solve (animated):
Press [return] or [enter]

Usage

Set defaults
snapfit.defaultMixed        = false; //BOOLEAN mix pieces at startup
snapfit.defaultSimple       = false; //BOOLEAN mix the positions only
snapfit.defaultNokeys       = false; //BOOLEAN no keyboard control
snapfit.defaultTofront      = false; //BOOLEAN on snap automatically set all pieces behind the current to front
snapfit.defaultPolygon      = false; //BOOLEAN polygons instead of rectangles
snapfit.defaultLevel        = 3; //INT 0-6 (0==simple and 6==difficult)
snapfit.defaultSpace        = 0; //INT 0-50 (%) inner frame space
snapfit.defaultSnap         = 8; //INT 0-24 (px) snap radius
snapfit.defaultCallback     = false; //JS function(){ ... } call on manual solving
snapfit.defaultMatchcolor   = '#00d000'; //STR '#000000'-'#ffffff'
snapfit.defaultFalsecolor   = '#ff0000'; //STR '#000000'-'#ffffff'
snapfit.defaultAreacolor    = '#e0e0e0'; //STR '#000000'-'#ffffff'
snapfit.defaultBgrndcolor   = '#000000'; //STR '#000000'-'#ffffff'
snapfit.defaultAreaimage    = false; //BOOLEAN image as background
snapfit.defaultAreaborder   = false; //BOOLEAN background border
snapfit.defaultBorderwide   = 2; //INT/FLOAT 1.0-6.0 (px) pieces border width
snapfit.defaultAreaopacity  = 0.33; //FLOAT 0.0-1.0 background area/image opacity
snapfit.defaultBorderopacity= 0.5; //FLOAT 0.0-1.0 pieces border/backside opacity
snapfit.defaultShadowopacity= 0.75; //FLOAT 0.0-1.0 active piece shadow opacity
snapfit.defaultForcetouchui = false; //BOOLEAN forces touch UI over the mouse UI if both available

Add functionality to image
snapfit.add(image[, options]);
image  == <img> element
options         e.g. {level: 2, bwide: 3, ...}
level      == INT 0 - 6 Default: 3
space      == INT 0 - 50 Default: 0
snap       == INT 1 - 24 Default: 8
mixed      == BOOLEAN true or false Default: false
simple     == BOOLEAN true or false Default: false
nokeys     == BOOLEAN true or false Default: false
tofront    == BOOLEAN true or false Default: false
polygon    == BOOLEAN true or false Default: false
mcolor     == STRING '#000000' to '#ffffff' Default: '#00d000'
fcolor     == STRING '#000000' to '#ffffff' Default: '#ff0000'
acolor     == STRING '#000000' to '#ffffff' Default: '#e0e0e0'
bcolor     == STRING '#000000' to '#ffffff' Default: '#000000'
aimage     == BOOLEAN true or false Default: false
aborder    == BOOLEAN true or false Default: false
aopacity   == FLOAT 0.0 - 1.0 Default: 0.33
bopacity   == FLOAT 0.0 - 1.0 Default: 0.50
sopacity   == FLOAT 0.0 - 1.0 Default: 0.75
bwide      == FLOAT 1.0 - 6.0 Default: 2.0
forcetui   == BOOLEAN true or false Default: false
callback   == JS false or function(){ ... }

Get some informations
FLOAT = snapfit.version;
STRING = snapfit.released;

Change puzzle level
snapfit.reset(image [, value]);
value == level 0-6 (0==simple, 6==difficult, default==3)
(0-6 corresponds to pieces of the pixel dimension 160/128/104/80/64/56/48)

Mixup puzzle
snapfit.admix(image [, value]);
value == simple true or false (Mix positions only if true)

Solve puzzle
snapfit.solve(image); (animated)

Remove functionality from image
snapfit.remove(image);

Examples
<img onLoad="snapfit.add(this);" ...>
snapfit.add(document.getElementById('img'));
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
snapfit.add($('img'));
snapfit.add($('img'), {level:6, bwide:1});
<button type="button" onclick="snapfit.admix($('img'));"> Admix </button>
<button type="button" onclick="snapfit.solve($('img'));"> Solve </button>
alert('snapfit: '+snapfit.version+' ('+snapfit.released+')');
snapfit.reset($('img'),1);
snapfit.admix($('img'),true);
snapfit.solve($('img'));
snapfit.remove($('img'));

Demonstration

girl
Level
move: Click 'n drag!
rotate: Doubleclick!
flip-y: Doubleclick 'n press [shift] or Middle Mouse Button!
flip-x: Doubleclick 'n press [alt] or Right Mouse Button!
test
OnMouseOver keyboard support:
Reset: Press [escape]!
Solve: Press [enter]!
Mixup: Press [backspace]!
Admix: Press [delete]!

Images used are copyrighted and are used for demonstration only.

TOUR
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Terug naar de inhoud