html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>[minigame] Shapes Puzzle</title>
</head>
<body>
<div id="drag-zone">
<canvas class="heart"
type="filled"
style="left:0px;top:0px;z-index:1;">
</canvas>
<canvas class="triangle"
type="filled"
style="left:150px;top:0px;z-index:1;">
</canvas>
<canvas class="square"
type="filled"
style="left:300px;top:0px;z-index:1;">
</canvas>
<canvas class="circle"
type="filled"
style="left:450px;top:0px;z-index:1;">
</canvas>
<canvas class="circle"
type="container"
style="left:0px;top:150px;z-index:-1;">
</canvas>
<div class="complete"
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
canvas {
position: absolute;
background: transparent;
}
.complete {
position: absolute;
display: none;
z-index: 9000;
color: green;
font-weight: bold;
}
#goal {
position: absolute;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function(e){
alert("Hi! This is a mini shapes puzzle where you should place the filled shaped in the empty one. \n\n Enjoy! \n\n Edit 170614: \n Thank you for the feedback! \n Now scale and position the shapes on small layout to avoid the scroll");
window.is_down = false;
var drag_zone = document.getElementById("drag-zone");
var offset_x = drag_zone.offsetLeft;
var offset_y = drag_zone.offsetTop;
var default_width = 440;
var document_width = document.body.clientWidth;
var ratio = 1;
if (document_width < default_width)
{
ratio = document_width / default_width;
}
var last_x;
var last_y;
var uncompleted = 4;
draw_canvas();
function addListenerMulti(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i=0, iLen=events.length; i<iLen; i++) {
element.addEventListener(events[i], listener, false);
}
}
addListenerMulti(document.body, 'touchstart mousedown', function(e) {
handle_mouse_down(e);
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run