728x90
https://dreamhack.io/wargame/challenges/96/
Carve Party
Description 할로윈 파티를 기념하기 위해 호박을 준비했습니다! 호박을 10000번 클릭하고 플래그를 획득하세요!
dreamhack.io
이벤트성 문제인거같다. 풀어보자.
이번 문제는 HTTP서버를 따로 운영하고 있지 않다. html 파일 하나를 준다. 우선 들어가보겠다.
클릭을 만 번 해서 플래그를 가져가라는 문제인거같다. html파일을 줬으니 코드를 변경하면 쉽게 문제가 풀릴 것 같다.
코드를 살펴보자
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>do you want to build a jack-o-lantern?</title>
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
.jack { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.jack svg { width: 50%; cursor: pointer; }
#jack-target { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='50' viewport='0 0 100 100' style='fill:black;font-size:25px;'><text y='50%'>🗡️</text></svg>") 16 0, auto; }
.tada { animation: 1s tada infinite; }
@keyframes tada {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="jack">
<h1>click the pumpkin to make a jack-o-lantern!</h1>
<!-- openmoji.org -->
<svg id="jack-target" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#5C9E31" d="M47.8995,9.1325c0.0036-0.0902-0.0177-0.1854-0.02-0.277c-0.0012-0.1675-0.0161-0.3359-0.0366-0.5069 c-0.0126-0.0909-0.0187-0.1795-0.0366-0.2709c-0.0589-0.33-0.1401-0.6613-0.267-0.9896c-1.4448-3.7362-5.9587-4.9144-9.2682-2.8591 c-2.5414,1.5789-3.9725,4.4725-4.8703,7.2267c-0.8674,2.6562-1.3688,5.4905-1.5359,8.3c0.0057-0.0012,0.0123-0.002,0.0179-0.0032 c-0.0017,0.0278-0.0058,0.0557-0.0074,0.0834c0.8161-0.1688,1.7649-0.2942,2.8594-0.3484c0.0019-0.0265,0.006-0.053,0.0079-0.0795 c0.3639-0.0173,0.7436-0.0267,1.1403-0.0267c1.7114,0,3.1121,0.1713,4.2474,0.4241c-1.1245-2.8896-1.9282-6.282-1.0305-9.1633 c0.3867-1.2377,1.0952-2.5057,2.3122-3.1451c1.3619-0.7169,3.4476-0.1575,2.9586,1.75c-0.0953,0.373-0.4211,0.5609-0.616,0.8633 c-0.8978,1.3881,0.3412,2.3164,1.652,1.9849c1.6414-0.4139,2.4005-1.6262,2.4636-3.0253 C47.8793,9.0915,47.8909,9.1107,47.8995,9.1325z"/>
<path fill="#F4AA41" d="M26.6422,19.7574c0.0035-0.0016,0.0068-0.0037,0.0103-0.0053c-0.1259-0.0449-0.25-0.0787-0.3753-0.1198 c-0.1509-0.0496-0.3019-0.1002-0.4519-0.1443c-0.1786-0.0525-0.3558-0.0975-0.533-0.1425 c-0.1506-0.0382-0.3013-0.0776-0.4509-0.1104c-0.1745-0.0383-0.3475-0.0692-0.5206-0.1003 c-0.1498-0.0269-0.2999-0.0552-0.4486-0.0767c-0.1706-0.0247-0.3394-0.0422-0.5086-0.0601 c-0.1487-0.0157-0.2977-0.0329-0.4453-0.0434c-0.1665-0.0119-0.3312-0.0167-0.4962-0.022c-0.147-0.0048-0.2944-0.011-0.4402-0.0107 c-0.1638,0.0004-0.3257,0.0078-0.4879,0.0145c-0.1439,0.006-0.288,0.0103-0.4306,0.0211c-0.161,0.0123-0.3202,0.0314-0.4795,0.0498 c-0.1407,0.0162-0.2819,0.0308-0.4213,0.0517c-0.1581,0.0237-0.3139,0.0543-0.4701,0.0839 c-0.1374,0.0261-0.2751,0.0503-0.411,0.0808c-0.1557,0.035-0.309,0.0767-0.4628,0.1175c-0.1331,0.0353-0.2668,0.0686-0.3984,0.1082 c-0.1534,0.0461-0.3042,0.0988-0.4555,0.1504c-0.1284,0.0438-0.2575,0.0856-0.3843,0.1334 c-0.1512,0.0569-0.2998,0.1205-0.4488,0.183c-0.1235,0.0518-0.2477,0.1014-0.3696,0.1569 c-0.1494,0.0679-0.2958,0.1423-0.4428,0.2157c-0.1176,0.0587-0.2362,0.1152-0.3523,0.1773 c-0.1473,0.0788-0.2915,0.1639-0.4362,0.248c-0.1122,0.0652-0.2254,0.1281-0.3361,0.1964 c-0.1448,0.0894-0.2864,0.1851-0.4285,0.2797c-0.1065,0.0709-0.2142,0.1396-0.3192,0.2134 c-0.1428,0.1003-0.2821,0.2067-0.4219,0.3123c-0.0999,0.0754-0.2012,0.1484-0.2996,0.2263 c-0.1401,0.1109-0.2764,0.2277-0.4134,0.3436c-0.0945,0.08-0.1905,0.1577-0.2835,0.24c-0.1364,0.1207-0.2689,0.2471-0.402,0.3727 c-0.0889,0.0839-0.1794,0.1655-0.2668,0.2515c-0.134,0.1318-0.2639,0.269-0.3943,0.4057c-0.082,0.0858-0.1656,0.1693-0.2461,0.257 c-0.1306,0.1422-0.2568,0.2896-0.3837,0.4365c-0.0761,0.0881-0.1541,0.1739-0.2287,0.2637 c-0.1258,0.1512-0.247,0.3074-0.3689,0.463c-0.071,0.0907-0.144,0.1792-0.2136,0.2714c-0.1213,0.1606-0.2376,0.3259-0.3546,0.4906 c-0.0653,0.0919-0.1328,0.1818-0.1967,0.2751c-0.1155,0.1685-0.226,0.3414-0.337,0.5138 c-0.0607,0.0942-0.1237,0.1865-0.1831,0.2819c-0.1089,0.175-0.2125,0.3542-0.3168,0.533 c-0.0565,0.0969-0.1155,0.1919-0.1706,0.2898c-0.1023,0.1816-0.1989,0.3669-0.2965,0.5518 c-0.0519,0.0984-0.1064,0.1952-0.1569,0.2946c-0.0964,0.1894-0.1867,0.3821-0.278,0.5746 c-0.0465,0.0981-0.0957,0.1948-0.1409,0.2936c-0.0875,0.1917-0.169,0.3862-0.2514,0.5805 c-0.0438,0.1032-0.0904,0.205-0.1327,0.3089c-0.0831,0.2042-0.16,0.411-0.2374,0.6177c-0.0357,0.0952-0.0742,0.189-0.1087,0.2847 c-0.0733,0.2036-0.1399,0.4095-0.2076,0.6152c-0.0338,0.1027-0.0707,0.2042-0.1031,0.3073 c-0.0641,0.2042-0.1213,0.4104-0.1798,0.6162c-0.0298,0.105-0.0629,0.209-0.0912,0.3145c-0.0581,0.2161-0.1092,0.4339-0.161,0.6514 c-0.023,0.0966-0.0494,0.1924-0.0711,0.2893c-0.0527,0.2349-0.098,0.4709-0.1432,0.7069 c-0.0154,0.0805-0.0342,0.1605-0.0487,0.2411c-0.051,0.2827-0.0947,0.5662-0.1347,0.8497 c-0.0048,0.0343-0.0116,0.0685-0.0163,0.1028c-0.3012,2.2099-0.2696,4.4514,0.076,6.6451 c0.1729,1.0981,0.4187,2.1852,0.7521,3.2487c0.4583,1.4606,1.0642,2.8831,1.7966,4.2331c0.6502,1.1984,1.3989,2.3402,2.2521,3.3903 c0.0835,0.1027,0.1737,0.1989,0.259,0.2999c0.1797,0.2126,0.3576,0.4269,0.5455,0.6316c0.0008,0.0009,0.0015,0.0016,0.0023,0.0024 c0.2523,0.2747,0.5026,0.5352,0.7516,0.787c0.0829,0.0839,0.165,0.1624,0.2476,0.2438c0.1679,0.1655,0.3353,0.3282,0.5015,0.4839 c0.0938,0.0877,0.1868,0.1724,0.28,0.257c0.1547,0.1404,0.3085,0.2768,0.4616,0.4089c0.0943,0.0813,0.1883,0.1623,0.2819,0.2404 c0.158,0.1319,0.3145,0.2576,0.4708,0.3809c0.083,0.0656,0.1665,0.1335,0.2491,0.1966c0.2084,0.1595,0.4152,0.3112,0.6203,0.4559 c0.0272,0.0192,0.055,0.0409,0.0822,0.0599c0.2303,0.1606,0.4578,0.3104,0.6835,0.4533c0.0784,0.0496,0.1554,0.0947,0.2332,0.1422 c0.1491,0.0911,0.2977,0.1804,0.4447,0.264c0.0888,0.0506,0.1768,0.0985,0.2649,0.1464c0.1353,0.0737,0.2697,0.1446,0.4031,0.2122 c0.0882,0.0447,0.1761,0.0889,0.2634,0.131c0.136,0.0656,0.2705,0.127,0.4043,0.1865c0.079,0.0352,0.1584,0.0719,0.2367,0.105 c0.1684,0.0712,0.3347,0.1367,0.4996,0.1988c0.0403,0.0152,0.0815,0.0329,0.1216,0.0475c0.2014,0.0737,0.3996,0.1396,0.5952,0.2003 c0.0689,0.0214,0.1362,0.0394,0.2044,0.0592c0.1293,0.0377,0.2579,0.0742,0.3846,0.1066c0.0772,0.0197,0.1531,0.0375,0.2293,0.0553 c0.1164,0.0272,0.2316,0.0527,0.3457,0.0757c0.0753,0.0152,0.1501,0.03,0.2243,0.0433c0.1163,0.021,0.2306,0.0392,0.3442,0.0561 c0.0658,0.0098,0.1322,0.0206,0.1972,0.0291c0.14,0.0182,0.2772,0.0324,0.4129,0.0447c0.0353,0.0032,0.0719,0.0081,0.1069,0.0109 c0.1683,0.0135,0.3325,0.0222,0.4938,0.0273c0.0517,0.0016,0.1014,0.0013,0.1524,0.0021c0.111,0.0019,0.2208,0.0028,0.3282,0.0012 c0.058-0.0009,0.1144-0.0029,0.1713-0.0048c0.0989-0.0033,0.1963-0.0076,0.2919-0.0136c0.0549-0.0034,0.1092-0.0071,0.1631-0.0114 c0.0978-0.0078,0.1932-0.0172,0.2873-0.0275c0.0454-0.0049,0.0914-0.0094,0.1358-0.015c0.1164-0.0145,0.2295-0.0309,0.3399-0.0487 c0.0189-0.0031,0.039-0.0054,0.0577-0.0086c0.1305-0.0219,0.2561-0.046,0.3778-0.0716c0.0274-0.0058,0.053-0.0122,0.08-0.0181 c0.0928-0.0204,0.1835-0.0415,0.2709-0.0636c0.0342-0.0087,0.067-0.0175,0.1003-0.0264c0.0787-0.0209,0.1552-0.0421,0.2292-0.064 c0.03-0.0089,0.0594-0.0175,0.0885-0.0265c0.0775-0.0237,0.1517-0.0477,0.2235-0.0719c0.0207-0.007,0.0419-0.0137,0.062-0.0208 c0.1862-0.0645,0.3523-0.129,0.4965-0.1904c0.0011-0.0005,0.002-0.0009,0.0031-0.0014c0.0535-0.0228,0.1055-0.0453,0.153-0.0669 c0,0-0.0007-0.0005-0.001-0.0007c0.3469-0.1577,0.5346-0.278,0.5346-0.278c1.4692,1.4635,7.6696,1.7152,8.0888,1.7307 c0.0154,0.0005,0.0293,0.0005,0.0447,0c0.4192-0.0154,6.6196-0.2672,8.0888-1.7307c0,0,6.8438,4.4366,15.5886-5.0859 c7.0378-7.0443,7.9-20.5231,2.0165-28.6674c-0.5543-0.7675-1.1686-1.4874-1.8432-2.1503 c-1.0616-1.0431-2.2445-1.9655-3.5286-2.7019c-3.6327-2.0837-7.8248-2.3765-11.7263-0.8917c0,0-2.0279-2.4888-8.6181-2.4888 s-8.6181,2.4888-8.6181,2.4888C26.8595,19.8278,26.7515,19.7963,26.6422,19.7574"/>
<path fill="#E27022" d="M44.5882,59.6454c1.7503,0.8029,7.6702,2.5917,14.9042-5.3642c2.1951-2.4146,3.8261-5.4041,4.805-8.5551 c0.9897-3.1884,1.2669-6.5781,0.8197-9.8944c-1.3646-10.1149-9.7316-19.8646-20.2419-16.0795 c5.7584,2.7111,9.8136,9.4387,10.743,16.3279c0.4653,3.4475,0.176,6.9711-0.8522,10.2849 c-1.0174,3.2764-2.7123,6.3828-4.9942,8.8938C47.949,57.2634,46.207,58.6726,44.5882,59.6454z"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M39.4,17.6598c-0.68-2.34-0.98-4.83-0.3-7.02c0.39-1.24,1.1-2.5,2.31-3.14c1.36-0.72,3.45-0.16,2.96,1.75 c-0.09,0.37-0.42,0.56-0.62,0.86c-0.89,1.39,0.35,2.32,1.66,1.99c1.64-0.42,2.4-1.63,2.46-3.03c0.01,0.02,0.02,0.04,0.03,0.06 c0-0.09-0.02-0.18-0.02-0.27c0-0.17-0.02-0.34-0.04-0.51c-0.01-0.09-0.02-0.18-0.03-0.27c-0.06-0.33-0.14-0.66-0.27-0.99 c-1.45-3.74-5.96-4.92-9.27-2.86c-2.54,1.58-3.97,4.47-4.87,7.23c-0.66,2.01-1.11,4.13-1.36,6.26"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M7.1349,33.9318c-0.0522,0.2349-0.097,0.4709-0.1418,0.7069c-0.0153,0.0805-0.0338,0.1605-0.0482,0.2411 c-0.0505,0.2827-0.0938,0.5662-0.1334,0.8497C6.8067,35.7638,6.8,35.798,6.7954,35.8323 c-0.2982,2.2099-0.2669,4.4514,0.0752,6.6451c0.1711,1.0981,0.4145,2.1852,0.7446,3.2487 c0.4537,1.4606,1.0535,2.8831,1.7787,4.2331c0.6437,1.1984,1.3849,2.3402,2.2296,3.3903c0.0826,0.1027,0.172,0.1989,0.2564,0.2999 c0.1779,0.2126,0.354,0.4269,0.54,0.6316c0.0008,0.0009,0.0015,0.0016,0.0023,0.0024c0.2498,0.2747,0.4976,0.5352,0.7441,0.787 c0.0821,0.0839,0.1634,0.1624,0.2451,0.2438c0.1662,0.1655,0.332,0.3282,0.4965,0.4839c0.0928,0.0877,0.1849,0.1724,0.2772,0.257 c0.1531,0.1404,0.3054,0.2768,0.457,0.4089c0.0933,0.0813,0.1864,0.1623,0.2791,0.2404c0.1564,0.1319,0.3114,0.2576,0.4661,0.3809 c0.0822,0.0656,0.1649,0.1335,0.2466,0.1966c0.2064,0.1595,0.4111,0.3112,0.6141,0.4559c0.027,0.0192,0.0544,0.0409,0.0814,0.0599 c0.228,0.1606,0.4532,0.3104,0.6767,0.4533c0.0776,0.0496,0.1539,0.0947,0.2309,0.1422c0.1476,0.0911,0.2947,0.1804,0.4402,0.264 c0.088,0.0506,0.175,0.0985,0.2622,0.1464c0.134,0.0737,0.267,0.1446,0.399,0.2122c0.0873,0.0447,0.1744,0.0889,0.2608,0.131 c0.1346,0.0656,0.2678,0.127,0.4003,0.1865c0.0782,0.0352,0.1569,0.0719,0.2343,0.105c0.1667,0.0712,0.3314,0.1367,0.4946,0.1988 c0.0399,0.0152,0.0807,0.0329,0.1204,0.0475c0.1994,0.0737,0.3956,0.1396,0.5893,0.2003c0.0682,0.0214,0.1348,0.0394,0.2023,0.0592 c0.1281,0.0377,0.2554,0.0742,0.3807,0.1066c0.0764,0.0197,0.1516,0.0375,0.2271,0.0553c0.1152,0.0272,0.2293,0.0527,0.3422,0.0757 c0.0745,0.0152,0.1486,0.03,0.222,0.0433c0.1151,0.021,0.2283,0.0392,0.3408,0.0561c0.0652,0.0098,0.1309,0.0206,0.1952,0.0291 c0.1386,0.0182,0.2744,0.0324,0.4088,0.0447c0.035,0.0032,0.0712,0.0081,0.1058,0.0109c0.1666,0.0135,0.3292,0.0222,0.4889,0.0273 c0.0511,0.0016,0.1004,0.0013,0.1509,0.0021c0.1099,0.0019,0.2186,0.0028,0.3249,0.0012c0.0574-0.0009,0.1133-0.0029,0.1696-0.0048 c0.0979-0.0033,0.1943-0.0076,0.289-0.0136c0.0543-0.0034,0.1082-0.0071,0.1614-0.0114c0.0968-0.0078,0.1912-0.0172,0.2844-0.0275 c0.0449-0.0049,0.0905-0.0094,0.1345-0.015c0.1152-0.0145,0.2272-0.0309,0.3365-0.0487c0.0187-0.0031,0.0386-0.0054,0.0571-0.0086 c0.1292-0.0219,0.2535-0.046,0.374-0.0716c0.0272-0.0058,0.0524-0.0122,0.0792-0.0181c0.0919-0.0204,0.1817-0.0415,0.2682-0.0636 c0.0338-0.0087,0.0663-0.0175,0.0993-0.0264c0.0779-0.0209,0.1536-0.0421,0.2269-0.064c0.0297-0.0089,0.0588-0.0175,0.0876-0.0265 c0.0767-0.0237,0.1502-0.0477,0.2213-0.0719c0.0204-0.007,0.0414-0.0137,0.0614-0.0208c0.1843-0.0645,0.3488-0.129,0.4916-0.1904 c0.0011-0.0005,0.002-0.0009,0.0031-0.0014c0.053-0.0228,0.1045-0.0453,0.1515-0.0669c-0.0003-0.0002-0.0007-0.0005-0.001-0.0007 c0.3434-0.1577,0.5293-0.278,0.5293-0.278c1.4545,1.4635,7.593,1.7152,8.0081,1.7307c0.0152,0.0005,0.0291,0.0005,0.0443,0 c0.415-0.0154,6.5535-0.2672,8.0081-1.7307c0,0,6.7755,4.4366,15.4329-5.0859c6.9675-7.0443,7.8211-20.5231,1.9964-28.6674 c-0.5488-0.7675-1.1569-1.4874-1.8248-2.1503c-1.051-1.0431-2.222-1.9655-3.4933-2.7019 c-3.5964-2.0837-7.7466-2.3765-11.6092-0.8917c0,0-2.0076-2.4888-8.532-2.4888s-8.532,2.4888-8.532,2.4888 c-0.1086-0.0417-0.2155-0.0732-0.3237-0.1121"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M27.0273,19.7574c0.0035-0.0016,0.0067-0.0037,0.0102-0.0053c-0.1246-0.0449-0.2475-0.0787-0.3715-0.1198 c-0.1494-0.0496-0.2989-0.1002-0.4474-0.1443c-0.1768-0.0525-0.3522-0.0975-0.5277-0.1425 c-0.1491-0.0382-0.2983-0.0776-0.4464-0.1104c-0.1727-0.0383-0.344-0.0692-0.5154-0.1003 c-0.1483-0.0269-0.2969-0.0552-0.4442-0.0767c-0.1689-0.0247-0.3361-0.0422-0.5035-0.0601 c-0.1472-0.0157-0.2947-0.0329-0.4409-0.0434c-0.1648-0.0119-0.3279-0.0167-0.4912-0.022 c-0.1456-0.0048-0.2914-0.011-0.4358-0.0107c-0.1622,0.0004-0.3224,0.0078-0.483,0.0145c-0.1425,0.006-0.2852,0.0103-0.4263,0.0211 c-0.1594,0.0123-0.317,0.0314-0.4747,0.0498c-0.1393,0.0162-0.2791,0.0308-0.4171,0.0517 c-0.1565,0.0237-0.3108,0.0543-0.4655,0.0839c-0.136,0.0261-0.2724,0.0503-0.4069,0.0808 c-0.1541,0.035-0.3059,0.0767-0.4581,0.1175c-0.1318,0.0353-0.2641,0.0686-0.3945,0.1082 c-0.1519,0.0461-0.3011,0.0988-0.451,0.1504c-0.1271,0.0438-0.2549,0.0856-0.3805,0.1334 c-0.1497,0.0569-0.2968,0.1205-0.4443,0.183c-0.1223,0.0518-0.2452,0.1014-0.3659,0.1569 c-0.1479,0.0679-0.2928,0.1423-0.4384,0.2157c-0.1165,0.0587-0.2339,0.1152-0.3488,0.1773 c-0.1458,0.0788-0.2886,0.1639-0.4318,0.248c-0.1111,0.0652-0.2231,0.1281-0.3327,0.1964 c-0.1434,0.0894-0.2835,0.1851-0.4242,0.2797c-0.1055,0.0709-0.2121,0.1396-0.316,0.2134 c-0.1414,0.1003-0.2792,0.2067-0.4177,0.3123c-0.0989,0.0754-0.1992,0.1484-0.2966,0.2263 c-0.1387,0.1109-0.2736,0.2277-0.4092,0.3436c-0.0936,0.08-0.1886,0.1577-0.2807,0.24c-0.135,0.1207-0.2662,0.2471-0.3979,0.3727 c-0.088,0.0839-0.1776,0.1655-0.2642,0.2515c-0.1327,0.1318-0.2612,0.269-0.3904,0.4057c-0.0812,0.0858-0.1639,0.1693-0.2437,0.257 c-0.1293,0.1422-0.2543,0.2896-0.3798,0.4365c-0.0754,0.0881-0.1525,0.1739-0.2264,0.2637"/>
<g id="jack-mouth" style="opacity: 0;">
<path fill="#FCEA2B" d="M20,48c0,0,15,10,32,0C52,48,36,68,20,48z"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M20,48c0,0,15,10,32,0C52,48,36,68,20,48z"/>
</g>
<g id="jack-nose" style="opacity: 0;">
<polygon fill="#FCEA2B" points="35.896,47.9282 34.1847,44.9641 32.4734,42 35.896,42 39.3187,42 37.6073,44.9641"/>
<polygon fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" points="35.896,47.9282 34.1847,44.9641 32.4734,42 35.896,42 39.3187,42 37.6073,44.9641"/>
</g>
<g id="jack-right" style="opacity: 0;">
<path fill="#FCEA2B" d="M48.974,37.8449c2.5901-0.9575,3.9136-3.8335,2.956-6.4235l-9.3796,3.4675 C43.508,37.479,46.3839,38.8024,48.974,37.8449z"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M48.974,37.8449c2.5901-0.9575,3.9136-3.8335,2.956-6.4235l-9.3796,3.4675C43.508,37.479,46.3839,38.8024,48.974,37.8449z"/>
</g>
<g id="jack-left" style="opacity: 0;">
<path fill="#FCEA2B" d="M22.818,37.8449c-2.5901-0.9575-3.9136-3.8335-2.956-6.4235l9.3796,3.4675 C28.2841,37.479,25.4081,38.8024,22.818,37.8449z"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M22.818,37.8449c-2.5901-0.9575-3.9136-3.8335-2.956-6.4235l9.3796,3.4675C28.2841,37.479,25.4081,38.8024,22.818,37.8449z"/>
</g>
</svg>
<canvas width=720>
<div class="txtStyle"></div>
</canvas>
<p><span id="clicks">10000</span> more clicks to go!</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script>
var pumpkin = [ 124, 112, 59, 73, 167, 100, 105, 75, 59, 23, 16, 181, 165, 104, 43, 49, 118, 71, 112, 169, 43, 53 ];
var counter = 0;
var pie = 1;
function make() {
if (0 < counter && counter <= 1000) {
$('#jack-nose').css('opacity', (counter) + '%');
}
else if (1000 < counter && counter <= 3000) {
$('#jack-left').css('opacity', (counter - 1000) / 2 + '%');
}
else if (3000 < counter && counter <= 5000) {
$('#jack-right').css('opacity', (counter - 3000) / 2 + '%');
}
else if (5000 < counter && counter <= 10000) {
$('#jack-mouth').css('opacity', (counter - 5000) / 5 + '%');
}
if (10000 < counter) {
$('#jack-target').addClass('tada');
var ctx = document.querySelector("canvas").getContext("2d"),
dashLen = 220, dashOffset = dashLen, speed = 20,
txt = pumpkin.map(x=>String.fromCharCode(x)).join(''), x = 30, i = 0;
ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";
(function loop() {
ctx.clearRect(x, 0, 60, 150);
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
dashOffset -= speed; // reduce dash length
ctx.strokeText(txt[i], x, 90); // stroke letter
if (dashOffset > 0) requestAnimationFrame(loop); // animate
else {
ctx.fillText(txt[i], x, 90); // fill final letter
dashOffset = dashLen; // prep next char
x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
ctx.rotate(Math.random() * 0.005); // random rotation
if (i < txt.length) requestAnimationFrame(loop);
}
})();
}
else {
$('#clicks').text(10000 - counter);
}
}
$(function() {
$('#jack-target').click(function () {
counter += 1;
if (counter <= 10000 && counter % 100 == 0) {
for (var i = 0; i < pumpkin.length; i++) {
pumpkin[i] ^= pie;
pie = ((pie ^ 0xff) + (i * 10)) & 0xff;
}
}
make();
});
});
</script>
</body>
</html>길다....우선 필요한 부분만 빼보겠다.
$(function() {
$('#jack-target').click(function () {
counter += 1;
if (counter <= 10000 && counter % 100 == 0) {
for (var i = 0; i < pumpkin.length; i++) {
pumpkin[i] ^= pie;
pie = ((pie ^ 0xff) + (i * 10)) & 0xff;
}
}
make();
});
});
#jack-target
은 위 사진에 있는 호박을 말한다. 호박을 클릭하는 이벤트가 발생하면
1. counter를 증가시킨다.
2. counter가 10000이하이면서 100으로 나누어 떨어지면 for문을 실행한다. for문은 어려운 수식인데....일단 패스하자
3. make 함수를 실행한다.
중간에 while 함수를 끼워 넣으면 쉽게 풀릴거 같다.
$(function() {
$('#jack-target').click(function () {
while(counter<10001){
counter += 1;
if (counter <= 10000 && counter % 100 == 0) {
for (var i = 0; i < pumpkin.length; i++) {
pumpkin[i] ^= pie;
pie = ((pie ^ 0xff) + (i * 10)) & 0xff;
}
}
make();
}
});
});
counter값을 10001으로 해놓은 것을 볼 수 있다. 왜 10000으로 하지 않고 한 번 더 돌릴까? make함수를 살펴보자.
function make() {
if (0 < counter && counter <= 1000) {
$('#jack-nose').css('opacity', (counter) + '%');
}
else if (1000 < counter && counter <= 3000) {
$('#jack-left').css('opacity', (counter - 1000) / 2 + '%');
}
else if (3000 < counter && counter <= 5000) {
$('#jack-right').css('opacity', (counter - 3000) / 2 + '%');
}
else if (5000 < counter && counter <= 10000) {
$('#jack-mouth').css('opacity', (counter - 5000) / 5 + '%');
}
if (10000 < counter) {
$('#jack-target').addClass('tada');
var ctx = document.querySelector("canvas").getContext("2d"),
dashLen = 220, dashOffset = dashLen, speed = 20,
txt = pumpkin.map(x=>String.fromCharCode(x)).join(''), x = 30, i = 0;
ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";
(function loop() {
ctx.clearRect(x, 0, 60, 150);
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
dashOffset -= speed; // reduce dash length
ctx.strokeText(txt[i], x, 90); // stroke letter
if (dashOffset > 0) requestAnimationFrame(loop); // animate
else {
ctx.fillText(txt[i], x, 90); // fill final letter
dashOffset = dashLen; // prep next char
x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
ctx.rotate(Math.random() * 0.005); // random rotation
if (i < txt.length) requestAnimationFrame(loop);
}
})();
}
else {
$('#clicks').text(10000 - counter);
}
}가장 상단의 가정법을 살펴보면
counter가 1000이하일 때는 코를 그리고
3000이하일 때는 왼쪽 눈을 그리고
5000이하일 때는 오른 눈을 그리고
10000이하일 때는 입을 그린다는 것으로 추측할 수 있다.
플래그를 그려주는 코드가 없다. 실제로 10000으로 맞춰서 실행해보면 호박 얼굴만 그려지고 플래그는 나오지 않는다.
그 밑에 가정법에 counter가 10000보다 클 때 실행하는 코드가 있다. 이것이 플래그를 그려주는 코드라고 추측해볼 수 있다.
따라서 counter의 값을 10000보다 큰 값으로 설정해주어야 값이 제대로 출력된다.
성공!
근데 코드를 건들이지 않고 좀 더 고급지게 풀 수 있는 방법은 없나 생각해보았다.
개발자도구 콘솔을 이용하는 방법도 소개해보겠다.
for문으로 10001번 클릭하는 명령어를 실행시킨다.
성공! 22222
728x90
반응형
'드림핵' 카테고리의 다른 글
| [드림핵] session-basic 풀이 (0) | 2023.03.09 |
|---|---|
| [드림핵] devtools-sources 풀이 (0) | 2023.03.09 |
| 드림핵 web-ssrf 문제 풀이 (0) | 2023.02.17 |
| 드림핵 file-download-1 문제 풀이 (0) | 2023.02.11 |
| 드림핵 image-storage 풀이 (0) | 2023.02.09 |
