JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div id="image-container"> <img src="secret_technique/1-comic.png" usemap="#imageMap"> <map name="imageMap"> <area shape="poly" coords="1611,1014,1621,1004,1634,999,1667,1001,1676,972,1683,965,1688,965,1691,972,1690,998,1716,1002,1736,1014,1738,1026,1735,1040,1718,1047,1718,1069,1712,1079,1707,1079,1704,1070,1697,1083,1692,1083,1685,1076,1682,1045,1680,1045,1678,1073,1671,1080,1666,1080,1659,1072,1653,1079,1649,1079,1644,1072" data-passage="Passage2" data-original-coords="1611,1014,1621,1004,1634,999,1667,1001,1676,972,1683,965,1688,965,1691,972,1690,998,1716,1002,1736,1014,1738,1026,1735,1040,1718,1047,1718,1069,1712,1079,1707,1079,1704,1070,1697,1083,1692,1083,1685,1076,1682,1045,1680,1045,1678,1073,1671,1080,1666,1080,1659,1072,1653,1079,1649,1079,1644,1072"> </map> </div> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } #image-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } img { max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; position: relative; } #ui-bar { display: none; } map area { cursor: pointer; } </style> <<script>> $(document).ready(function() { var $area = $('map area'); var originalCoords = $area.attr('data-original-coords').split(',').map(Number); var $img = $('img'); var originalWidth = 2000; var originalHeight = 1800; function scaleImageMap() { var img = $img[0]; var rect = img.getBoundingClientRect(); var displayWidth = rect.width; var displayHeight = rect.height; if (displayWidth > 0 && displayHeight > 0) { var scaleX = displayWidth / originalWidth; var scaleY = displayHeight / originalHeight; var scaledCoords = []; for (var i = 0; i < originalCoords.length; i++) { scaledCoords[i] = Math.round(originalCoords[i] * (i % 2 === 0 ? scaleX : scaleY)); } $area.attr('coords', scaledCoords.join(',')); } } function initializeScaling() { setTimeout(function() { scaleImageMap(); if ($img[0].getBoundingClientRect().width === originalWidth) { setTimeout(scaleImageMap, 100); } }, 100); } $img.on('load', initializeScaling); if ($img[0].complete) { initializeScaling(); } $(window).on('resize', function() { requestAnimationFrame(scaleImageMap); }); $area.on('click', function(e) { e.preventDefault(); var passage = $(this).attr('data-passage'); if (passage && State.has(passage)) { Engine.play(passage); } }); }); <</script>>
<div id="image-container"> <img src="secret_technique/2-creature.png" usemap="#imageMap"> <map name="imageMap"> <area shape="poly" coords="719,1034,632,1033,481,967,426,921,388,825,389,760,420,701,522,627,596,603,731,610,846,624,927,622,940,420,967,253,997,195,1023,177,1072,224,1092,274,1086,491,1092,580,1084,611,1244,589,1406,595,1509,655,1543,699,1556,746,1560,856,1557,903,1524,971,1485,1002,1413,1027,1335,1045,1356,1145,1357,1259,1341,1335,1323,1368,1304,1386,1285,1393,1230,1366,1207,1336,1207,1320,1202,1307,1194,1324,1159,1351,1131,1355,1087,1323,1077,1246,1070,1150,1081,1095,1081,1070,996,1069,993,1241,978,1292,944,1338,921,1354,896,1358,864,1332,845,1284,818,1338,793,1348,750,1338,714,1315,696,1258,700,1084" data-passage="Passage3" data-original-coords="719,1034,632,1033,481,967,426,921,388,825,389,760,420,701,522,627,596,603,731,610,846,624,927,622,940,420,967,253,997,195,1023,177,1072,224,1092,274,1086,491,1092,580,1084,611,1244,589,1406,595,1509,655,1543,699,1556,746,1560,856,1557,903,1524,971,1485,1002,1413,1027,1335,1045,1356,1145,1357,1259,1341,1335,1323,1368,1304,1386,1285,1393,1230,1366,1207,1336,1207,1320,1202,1307,1194,1324,1159,1351,1131,1355,1087,1323,1077,1246,1070,1150,1081,1095,1081,1070,996,1069,993,1241,978,1292,944,1338,921,1354,896,1358,864,1332,845,1284,818,1338,793,1348,750,1338,714,1315,696,1258,700,1084"> </map> </div> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } #image-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } img { max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; position: relative; } #ui-bar { display: none; } map area { cursor: pointer; } </style> <<script>> $(document).ready(function() { var $area = $('map area'); var originalCoords = $area.attr('data-original-coords').split(',').map(Number); var $img = $('img'); var originalWidth = 2000; var originalHeight = 1800; function scaleImageMap() { var img = $img[0]; var rect = img.getBoundingClientRect(); var displayWidth = rect.width; var displayHeight = rect.height; if (displayWidth > 0 && displayHeight > 0) { var scaleX = displayWidth / originalWidth; var scaleY = displayHeight / originalHeight; var scaledCoords = []; for (var i = 0; i < originalCoords.length; i++) { scaledCoords[i] = Math.round(originalCoords[i] * (i % 2 === 0 ? scaleX : scaleY)); } $area.attr('coords', scaledCoords.join(',')); } } function initializeScaling() { setTimeout(function() { scaleImageMap(); if ($img[0].getBoundingClientRect().width === originalWidth) { setTimeout(scaleImageMap, 100); } }, 100); } $img.on('load', initializeScaling); if ($img[0].complete) { initializeScaling(); } $(window).on('resize', function() { requestAnimationFrame(scaleImageMap); }); $area.on('click', function(e) { e.preventDefault(); var passage = $(this).attr('data-passage'); if (passage && State.has(passage)) { Engine.play(passage); } }); }); <</script>>
<div id="image-container"> <img src="secret_technique/3-murder.png" usemap="#imageMap"> <map name="imageMap"> <area shape="rect" coords="948,1530,1766,1639" data-passage="Passage4" data-original-coords="948,1530,1766,1639"> </map> </div> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } #image-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } img { max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; position: relative; } #ui-bar { display: none; } map area { cursor: pointer; } </style> <<script>> $(document).ready(function() { var $area = $('map area'); var originalCoords = $area.attr('data-original-coords').split(',').map(Number); var $img = $('img'); var originalWidth = 2000; var originalHeight = 1800; function scaleImageMap() { var img = $img[0]; var rect = img.getBoundingClientRect(); var displayWidth = rect.width; var displayHeight = rect.height; if (displayWidth > 0 && displayHeight > 0) { var scaleX = displayWidth / originalWidth; var scaleY = displayHeight / originalHeight; var scaledCoords = []; for (var i = 0; i < originalCoords.length; i++) { scaledCoords[i] = Math.round(originalCoords[i] * (i % 2 === 0 ? scaleX : scaleY)); } $area.attr('coords', scaledCoords.join(',')); } } function initializeScaling() { setTimeout(function() { scaleImageMap(); if ($img[0].getBoundingClientRect().width === originalWidth) { setTimeout(scaleImageMap, 100); } }, 100); } $img.on('load', initializeScaling); if ($img[0].complete) { initializeScaling(); } $(window).on('resize', function() { requestAnimationFrame(scaleImageMap); }); $area.on('click', function(e) { e.preventDefault(); var passage = $(this).attr('data-passage'); if (passage && State.has(passage)) { Engine.play(passage); } }); }); <</script>>
<div id="image-container"> <img src="secret_technique/5-end.png" usemap="#imageMap"> <map name="imageMap"> <area shape="poly" coords="1699,1799,1706,1781,1693,1771,1681,1754,1681,1731,1685,1718,1700,1707,1729,1706,1756,1715,1783,1730,1800,1709,1817,1695,1831,1693,1833,1700,1803,1742,1817,1756,1824,1769,1824,1789,1819,1799" href="https://www.twitch.tv/heckmaybe" data-original-coords="1699,1799,1706,1781,1693,1771,1681,1754,1681,1731,1685,1718,1700,1707,1729,1706,1756,1715,1783,1730,1800,1709,1817,1695,1831,1693,1833,1700,1803,1742,1817,1756,1824,1769,1824,1789,1819,1799"> <area shape="rect" coords="1320,1559,1860,1590" href="https://itch.io/jam/make-literally-anything-jam" data-original-coords="1320,1559,1860,1590"> <area shape="rect" coords="1867,1708,1977,1770" data-passage="Passage1" data-original-coords="1867,1708,1977,1770"> </map> </div> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } #image-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } img { max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; position: relative; } #ui-bar { display: none; } map area { cursor: pointer; } </style> <<script>> $(document).ready(function() { var $areas = $('map area'); var $img = $('img'); var originalWidth = 2000; var originalHeight = 1800; function scaleImageMap() { var img = $img[0]; var rect = img.getBoundingClientRect(); var displayWidth = rect.width; var displayHeight = rect.height; if (displayWidth > 0 && displayHeight > 0) { var scaleX = displayWidth / originalWidth; var scaleY = displayHeight / originalHeight; $areas.each(function() { var originalCoords = $(this).attr('data-original-coords').split(',').map(Number); var scaledCoords = []; for (var i = 0; i < originalCoords.length; i++) { scaledCoords[i] = Math.round(originalCoords[i] * (i % 2 === 0 ? scaleX : scaleY)); } $(this).attr('coords', scaledCoords.join(',')); }); } } function initializeScaling() { setTimeout(function() { scaleImageMap(); if ($img[0].getBoundingClientRect().width === originalWidth) { setTimeout(scaleImageMap, 100); } }, 100); } $img.on('load', initializeScaling); if ($img[0].complete) { initializeScaling(); } $(window).on('resize', function() { requestAnimationFrame(scaleImageMap); }); }); <</script>>
<div id="image-container"> <img src="secret_technique/4-mystery.png" usemap="#imageMap"> <map name="imageMap"> <area shape="poly" coords="78,825,938,825,938,520,1039,520,1039,825,1999,825,1999,964,1506,964,1506,1280,1421,1280,1421,964,1012,964,1012,1295,921,1292,921,964,515,964,515,1292,442,1292,442,964,0,964,0,908,78,908" data-text="creature?????" data-original-coords="78,825,938,825,938,520,1039,520,1039,825,1999,825,1999,964,1506,964,1506,1280,1421,1280,1421,964,1012,964,1012,1295,921,1292,921,964,515,964,515,1292,442,1292,442,964,0,964,0,908,78,908"> <area shape="rect" coords="0,825,77,907" data-text="creature!!!!!" data-original-coords="0,825,77,907"> <area shape="rect" coords="55,1101,143,1244" data-text="heck sr you sure are a freak but hey that's pretty cool man" data-original-coords="55,1101,143,1244"> <area shape="rect" coords="515,1142,589,1263" data-text="hey it's hell jr wonder what that little guy is lookin' at" data-original-coords="515,1142,589,1263"> <area shape="rect" coords="655,1150,708,1231" data-text="huh who is this little scamp is" data-original-coords="655,1150,708,1231"> <area shape="rect" coords="1014,1146,1069,1199" data-text="aw hey these buds are havin' fun good for them" data-original-coords="1014,1146,1069,1199"> <area shape="rect" coords="1578,1145,1706,1277" data-text="hey hell j- wait a minute.... heck jr??????" data-original-coords="1578,1145,1706,1277"> <area shape="rect" coords="1501,1113,1579,1270" data-text="hey heck sr!" data-original-coords="1501,1113,1579,1270"> <area shape="poly" coords="1611,1014,1621,1004,1634,999,1667,1001,1676,972,1683,965,1688,965,1691,972,1690,998,1716,1002,1736,1014,1738,1026,1735,1040,1718,1047,1718,1069,1712,1079,1707,1079,1704,1070,1697,1083,1692,1083,1685,1076,1682,1045,1680,1045,1678,1073,1671,1080,1666,1080,1659,1072,1653,1079,1649,1079,1644,1072" data-text="the creature" data-original-coords="1611,1014,1621,1004,1634,999,1667,1001,1676,972,1683,965,1688,965,1691,972,1690,998,1716,1002,1736,1014,1738,1026,1735,1040,1718,1047,1718,1069,1712,1079,1707,1079,1704,1070,1697,1083,1692,1083,1685,1076,1682,1045,1680,1045,1678,1073,1671,1080,1666,1080,1659,1072,1653,1079,1649,1079,1644,1072"> <area shape="rect" coords="62,975,132,987" data-passage="Passage5" data-original-coords="62,975,132,987"> </map> <div id="overlay-text"></div> </div> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } #image-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } img { max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; position: relative; } #ui-bar { display: none; } map area { cursor: default; } #overlay-text { position: absolute; font-family: Comic Sans MS, sans-serif; color: #fac3f7; font-size: 24px; pointer-events: none; text-align: center; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); display: none; } </style> <<script>> $(document).ready(function() { var $areas = $('map area'); var $img = $('img'); var $overlay = $('#overlay-text'); var originalWidth = 2000; var originalHeight = 1800; var displayTimeout = null; function scaleImageMap() { var img = $img[0]; var rect = img.getBoundingClientRect(); var displayWidth = rect.width; var displayHeight = rect.height; if (displayWidth > 0 && displayHeight > 0) { var scaleX = displayWidth / originalWidth; var scaleY = displayHeight / originalHeight; $areas.each(function() { var originalCoords = $(this).attr('data-original-coords').split(',').map(Number); var scaledCoords = []; for (var i = 0; i < originalCoords.length; i++) { scaledCoords[i] = Math.round(originalCoords[i] * (i % 2 === 0 ? scaleX : scaleY)); } $(this).attr('coords', scaledCoords.join(',')); }); var imageLeft = rect.left; var imageTop = rect.top; var centerX = imageLeft + (displayWidth / 2); var centerY = imageTop + (displayHeight / 2); $overlay.css({ left: centerX + 'px', top: centerY + 'px', transform: 'translate(-50%, -50%)' }); } } function showText(event, area) { var text = area.data('text'); if (displayTimeout) { clearTimeout(displayTimeout); } $overlay.text(text).show(); displayTimeout = setTimeout(function() { $overlay.hide(); displayTimeout = null; }, 2000); } $areas.on('click', function(e) { e.preventDefault(); showText(e, $(this)); }); function initializeScaling() { setTimeout(function() { scaleImageMap(); if ($img[0].getBoundingClientRect().width === originalWidth) { setTimeout(scaleImageMap, 100); } }, 100); } $img.on('load', initializeScaling); if ($img[0].complete) { initializeScaling(); } $(window).on('resize', function() { requestAnimationFrame(scaleImageMap); }); }); <</script>>