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= 1) { var prev_el = trim_canvas.previousElementSibling; if (prev_el.getAttribute("class") == "complete") { prev_el = prev_el.previousElementSibling } trim_canvas.style.left = parseInt(prev_el.style.left) + parseInt(prev_el.clientWidth) + "px"; } } var completed_alert = document.getElementsByClassName("complete"); for (var j = 0; j < completed_alert.length; j++) { var canvas_attached = completed_alert[j].previousElementSibling; completed_alert[j].style.left = parseInt(canvas_attached.style.left) + parseInt(canvas_attached.clientWidth) - 25 + "px"; } } function handle_mouse_down(e) { var target = e.target; var target_type = target.getAttribute("type"); if (target_type != "filled" || target.getAttribute("completed")) return; e.preventDefault(); e.stopPropagation(); // save mouse position var current_x = e.clientX || e.touches[0].pageX; var current_y = e.clientY || e.touches[0].pageY; last_x = parseInt(current_x - offset_x); last_y = parseInt(current_y - offset_y); window.is_down = true; } function handle_mouse_up(e) { e.preventDefault(); e.stopPropagation(); window.is_down = false; var target = e.target; if (target.style.zIndex == 9999) { var shape = target.getAttribute("class"); var shape_elements = document.getElementsByClassName(shape); for (var i =0; i < shape_elements.length; i++) { if (shape_elements[i].getAttribute("type") == "container") { var success_x = parseInt(shape_elements[i].style.left); var success_y = parseInt(shape_elements[i].style.top); var target_x = parseInt(target.style.left); var target_y = parseInt(target.style.top); // check if the shape is place in its correct container if((Math.abs(success_x - target_x) < 5 || Math.abs(target_x - success_x) < 5) && (Math.abs(success_y - target_y) < 5 || Math.abs(target_y - success_y) < 5)) { target.style.left = shape_elements[i].style.left; target.style.top = shape_elements[i].style.top; var complete = document.getElementsByClassName("complete"); for (var c =0; c < complete.length; c++) { if (complete[c].getAttribute("type") == shape) { // show the completed message above the completed shape complete[c].style.display = "block"; target.setAttribute("completed", true); shape_elements[i].style.zIndex = -10; target.style.zIndex = -10; // update the goal message uncompleted--; var count_complete = document.getElementById("count-complete"); count_complete.innerHTML = uncompleted; if (uncompleted == 0) { var goal = document.getElementById("goal"); goal.style.display = "none"; alert("You completed the puzzle ! \n\n Thank you for playing! \n Feel free to leave a like or comment if you have any tip or idea to improve the game."); } } } } } } } } function handle_mouse_move(e) { if (!window.is_down) { return; } e.preventDefault(); e.stopPropagation(); var target = e.target; // get the current mouse position var current_x = e.clientX || e.touches[0].pageX; var current_y = e.clientY || e.touches[0].pageY; var mouse_x = parseInt(current_x - offset_x); var mouse_y = parseInt(current_y - offset_y); // calculate how far the mouse has moved since the last mousemove var dx = mouse_x - last_x; var dy = mouse_y - last_y; // save mouse position last_x = mouse_x; last_y = mouse_y; // get the current canvas position var current_target_x = parseInt(target.style.left); var current_target_y = parseInt(target.style.top); // move the canvas according to the mousemove target.style.zIndex = 9999; target.style.left = current_target_x + dx + "px"; target.style.top = current_target_y + dy + "px"; } function draw_heart() { var canvas = document.getElementsByClassName('heart'); for (var i = 0; i < canvas.length; i++) { if (canvas[i].getContext) { var canvas_type = canvas[i].getAttribute("type"); var ctx = canvas[i].getContext('2d'); ctx.beginPath(); ctx.moveTo(75 * ratio, 40 * ratio); ctx.bezierCurveTo(75 * ratio, 37 * ratio, 70 * ratio, 25 * ratio, 50 * ratio, 25 * ratio); ctx.bezierCurveTo(20 * ratio, 25 * ratio, 20 * ratio, 62.5 * ratio, 20 * ratio, 62.5 * ratio); ctx.bezierCurveTo(20 * ratio, 80 * ratio, 40 * ratio, 102 * ratio, 75 * ratio, 120 * ratio); ctx.bezierCurveTo(110 * ratio, 102 * ratio, 130 * ratio, 80 * ratio, 130 * ratio, 62.5 * ratio); ctx.bezierCurveTo(130 * ratio, 62.5 * ratio, 130 * ratio, 25 * ratio, 100 * ratio, 25 * ratio); ctx.bezierCurveTo(85 * ratio, 25 * ratio, 75 * ratio, 37 * ratio, 75 * ratio, 40 * ratio); if (canvas_type == "filled") { ctx.fillStyle = "pink"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = '#f19baa'; ctx.stroke(); } else { ctx.lineWidth = 2; ctx.strokeStyle = '#f19baa'; ctx.stroke(); } canvas[i].style.left = parseInt(canvas[i].style.left) + ratio + "px"; } } } function draw_triangle() { var canvas = document.getElementsByClassName('triangle'); for (var i = 0; i < canvas.length; i++) { if (canvas[i].getContext) { var canvas_type = canvas[i].getAttribute("type"); var ctx = canvas[i].getContext('2d'); ctx.beginPath(); ctx.moveTo(25 * ratio, 25 * ratio); ctx.lineTo(125 * ratio, 25 * ratio); ctx.lineTo(25 * ratio, 125 * ratio); ctx.lineTo(25 * ratio, 25 * ratio); if (canvas_type == "filled") { ctx.fillStyle = "green"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = '#036503'; ctx.stroke(); } else { ctx.lineWidth = 2; ctx.strokeStyle = '#036503'; ctx.stroke(); } canvas[i].style.left = parseInt(canvas[i].style.left) + ratio + "px"; } } } function draw_square() { var canvas = document.getElementsByClassName('square'); for (var i = 0; i < canvas.length; i++) { if (canvas[i].getContext) { var canvas_type = canvas[i].getAttribute("type"); var ctx = canvas[i].getContext('2d'); ctx.moveTo(25 * ratio, 25 * ratio); ctx.lineTo(125 * ratio, 25 * ratio); ctx.lineTo(125 * ratio, 125 * ratio); ctx.lineTo(25 * ratio, 125 * ratio); ctx.lineTo(25 * ratio, 25 * ratio); if (canvas_type == "filled") { ctx.fillStyle = "red"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = '#af0000'; ctx.stroke(); } else { ctx.lineWidth = 2; ctx.strokeStyle = '#af0000'; ctx.stroke(); } canvas[i].style.left = parseInt(canvas[i].style.left) + ratio + "px"; } } } function draw_circle() { var canvas = document.getElementsByClassName('circle'); for (var i = 0; i < canvas.length; i++) { if (canvas[i].getContext) { var canvas_type = canvas[i].getAttribute("type"); var ctx = canvas[i].getContext('2d'); var centerX = canvas[i].width / 4; var centerY = canvas[i].height / 2; var radius = 55 * ratio; ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); if (canvas_type == "filled") { ctx.fillStyle = "yellow"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = '#c3c306'; ctx.stroke(); } else { ctx.lineWidth = 2; ctx.strokeStyle = '#c3c306'; ctx.stroke(); } } } } // trim canvas by removing transparent pixels // solution found here : https://gist.github.com/remy/784508 function trim(c) { var ctx = c.getContext('2d'), copy = document.createElement('canvas').getContext('2d'), pixels = ctx.getImageData(0, 0, c.width, c.height), l = pixels.data.length, i, bound = { top: null, left: null, right: null, bottom: null }, x, y; for (i = 0; i < l; i += 4) { if (pixels.data[i+3] !== 0) { x = (i / 4) % c.width; y = ~~((i / 4) / c.width); if (bound.top === null) { bound.top = y; } if (bound.left === null) { bound.left = x; } else if (x < bound.left) { bound.left = x; } if (bound.right === null) { bound.right = x; } else if (bound.right < x) { bound.right = x; } if (bound.bottom === null) { bound.bottom = y; } else if (bound.bottom < y) { bound.bottom = y; } } } var trimHeight = bound.bottom - bound.top + 5, trimWidth = bound.right - bound.left + 5, trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight); copy.canvas.width = trimWidth; copy.canvas.height = trimHeight; copy.putImageData(trimmed, 0, 0); return copy.canvas; } function vm() { var vm = document.getElementById("sign"); var ctx = vm.getContext("2d"); var gradient = ctx.createLinearGradient(0,0,vm.width,0); gradient.addColorStop("0","#f19baa"); gradient.addColorStop("0.25","#036503"); gradient.addColorStop("0.50","#af0000"); ctx.font="20px Georgia"; ctx.fillStyle=gradient; ctx.fillText("Vincent Martinez",10,20); } };

[minigame] shapes puzzle