Accessible Draggable Blobs
Made with TypeScript.
Modelled after this tutorial, because of the way it handled both mouse and touch events, and inspired by this video for the original’s look. I converted the scripts to typescript and edited them to allow for multiple draggable items, keyboard access and color changing option, as well as deleting and adding blobs, and additionally set the positions to localStorage memory so the blobs don’t reset every time the page is refreshed.
The Controls
Mouse use
Click and drag to move the blobs around.
Change their color by dragging them to one of the color blocks on the right-hand side.
Change the size of the blob in focus by scrolling with the mouse wheel or by dragging them to either the “L” or “S”-symbols on the left.
Make a duplicate of a blob by dragging it to the plus-symbol on the top-left.
Delete a blob by dragging it to the bottom-left minus-symbol.
Keyboard use
Use arrow keys to move blobs when focused.
Change color by pressing Enter.
Press 0 (zero) to place the blob that is in focus behind the others.
Press 1 to make the blob smaller and 2 to make it larger.
Press 3 or + (plus) to clone a blob and Delete or – (minus) to remove a blob.
Press the Esc key to exit.
The New Version of the Draggable Blobs
Made a more visually appealing version using feColorMatrix values instead of simply contrast and blur, also adding the option to modify the background lightness and saturation.
The Original
See also my accessible pong javascript game and random dog generator.