Games: Jumping Jamping
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> :root { --env-safe-area-inset-top: 0px; --env-safe-area-inset-right: 0px; --env-safe-area-inset-bottom: 0px; --env-safe-area-inset-left: 0px; background: black; } body { animation: 0.35s htmlIn; } @keyframes htmlIn { from { opacity: 0 } } </style> </head> <body> <style> @import url("/games/jumping-jamping/root.css"); @import url("/games/jumping-jamping/style.css"); </style> <div class="main"> <section class="menu opened"> <div class="centered"> <div class="title">Jumping<br/>Jamping</div> <div class="buttons"> <div class="button" id="play">Play</div> <div class="button" id="difficulty">Medium</div> </div> </div> </section> <section class="game" difficulty="3" score="00"> <div class="jumper"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="50" overflow="hidden" viewBox="118 155 400 400"><path d="M152.324 477C146.532 504.544 140.74 532.088 141.009 545.385 141.278 558.682 148.821 558.336 153.94 556.782 159.058 555.228 166.467 535.024 171.72 536.06 176.973 537.096 181.283 562.826 185.459 562.999 189.635 563.172 193.271 539.341 196.774 537.096 200.276 534.851 205.125 557.991 206.472 549.529 207.819 541.068 206.337 513.696 204.855 486.325" stroke="black" stroke-width="8" stroke-miterlimit="8" fill="#f4b183" fill-rule="evenodd" id="fire"></path><path d="M178.5 256.5 215.5 256.5 215.5 487.5 178.5 487.5C158.065 487.5 141.5 470.938 141.5 450.508L141.5 293.492C141.5 273.062 158.065 256.5 178.5 256.5Z" stroke="black" stroke-width="21.3333" stroke-miterlimit="8" fill="red" fill-rule="evenodd"></path> <path d="M228.792 574.509C213.674 565.018 217.649 557.317 215.747 498.372 213.845 439.428 204.061 280.47 217.378 220.843 230.694 161.217 261.156 147.893 295.647 140.614 330.139 133.335 395.52 144.696 424.327 177.17 453.135 209.644 464.544 274.334 468.493 335.457 472.443 396.581 464.599 504.99 448.024 543.911 431.448 582.833 384.091 574.955 369.043 568.987 353.994 563.018 364.946 518.941 357.733 508.102 350.519 497.262 333.643 492.217 325.762 503.951 317.88 515.686 332.192 562.749 316.03 574.509 299.869 586.268 243.91 583.999 228.792 574.509Z" stroke="black" stroke-width="21.3333" stroke-miterlimit="8" fill="red" fill-rule="evenodd"></path> <path d="M324.175 221.267C353.04 200.455 401.147 206.058 428.408 211.661 455.669 217.265 479.589 237.81 487.741 254.887 495.892 271.964 497.763 299.714 477.318 314.123 456.872 328.531 393.263 343.207 365.067 341.339 336.87 339.471 314.954 322.928 308.139 302.916 301.324 282.904 295.311 242.08 324.175 221.267Z" stroke="black" stroke-width="21.3333" stroke-miterlimit="8" fill="#5dd4ff" fill-rule="evenodd"></path></svg> </div> <div class="pillars"> </div> </section> <section class="end"> <div class="centered"> <div class="title">Defeat</div> <div class="desc"> <div class="reason">Jamping fell</div> <div class="score">Score: <span>0</span></div> </div> <div class="buttons"> <div class="button" id="retry">Retry</div> <div class="button" id="mainmenu">Main Menu</div> </div> </div> </section> <section class="transition"> <div class="garage up"></div> <div class="garage down"></div> </section> </div> <script src="/games/jumping-jamping/script.js"></script> <script src="/modules.js"></script> </body> <script> window.addEventListener("message", function (event) { if (event.data.inset) { document.body.style.setProperty("--env-safe-area-inset-top", event.data.inset.top); document.body.style.setProperty("--env-safe-area-inset-right", event.data.inset.right); document.body.style.setProperty("--env-safe-area-inset-bottom", event.data.inset.bottom); document.body.style.setProperty("--env-safe-area-inset-left", event.data.inset.left); } }); function forwardEventToParent(type, event) { const data = { type, pointerType: event.pointerType || null, touches: event.touches ? [...event.touches].map(t => ({ clientX: t.clientX, clientY: t.clientY, identifier: t.identifier, force: t.force, radiusX: t.radiusX, radiusY: t.radiusY, rotationAngle: t.rotationAngle, })) : null, clientX: event.clientX, clientY: event.clientY, buttons: event.buttons, ctrlKey: event.ctrlKey, shiftKey: event.shiftKey, altKey: event.altKey, metaKey: event.metaKey, }; window.parent.postMessage({ source: "iframe-event", data }, "*"); } ["touchstart", "touchmove", "mousemove"].forEach(evt => window.addEventListener(evt, e => forwardEventToParent(evt, e), { passive: false }) ); </script> </html>
Games: Jumping Jamping
Games: Jumping Jamping