From 3a93a362440f6a36a728f66db6785d1c240d5bf0 Mon Sep 17 00:00:00 2001
From: LEGALISE_PIRACY <legalise_piracy@noreply.codeberg.org>
Date: Tue, 23 Apr 2024 03:47:13 +0000
Subject: [PATCH] Add semag/fld/index.html

---
 semag/fld/index.html | 537 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 537 insertions(+)
 create mode 100644 semag/fld/index.html

diff --git a/semag/fld/index.html b/semag/fld/index.html
new file mode 100644
index 00000000..6e458a3a
--- /dev/null
+++ b/semag/fld/index.html
@@ -0,0 +1,537 @@
+<div class="ctn">
+  <canvas id="c" width="360px" height="640px"></canvas>
+  <div id="scoreboard">0</div>
+  <div id="start-screen">
+    <div id="ctrl-ctn">
+      <div id="up" class="ctrl-btn">↑</div>
+      <div id="space" class="ctrl-btn">SPACE</div>
+      <div id="tap" class="ctrl-btn">TAP</div>
+    </div>
+  </div>
+  <div id="gameover-screen">
+    <div id="gameover">GAME OVER</div>
+    <div id="replay">REPLAY</div>
+  </div>
+</div>
+<style>
+  body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Helvetica, sans-serif;
+  overflow-x: hidden;
+}
+
+canvas {
+  position: absolute;
+}
+
+.ctn {
+  position: relative;
+  width: 360px;
+  height: 640px;
+}
+
+#scoreboard {
+  position: absolute;
+  top: 540px;
+  width: 360px;
+  text-align: center;
+  font-size: 50px;
+  color: #333333;
+}
+
+#start-screen {
+  position: absolute;
+  top: 20px;
+}
+
+#gameover-screen {
+  visibility: hidden;
+  position: absolute;
+  width: 360px;
+  height: 640px;
+  opacity: 0;
+  transition: opacity 1s;
+  text-align: center;
+}
+
+#gameover {
+  width: 280px;
+  background-color: #333333;
+  color: #ffffff;
+  padding: 10px 20px;
+  font-size: 40px;
+  letter-spacing: 4px;
+  margin: auto;
+  margin-top: 200px;
+}
+
+#replay {
+  width: 100px;
+  background-color: #333333;
+  color: #ffffff;
+  padding: 10px 20px;
+  font-size: 20px;
+  letter-spacing: 4px;
+  transition: background-color 1s;
+  margin: 100px auto;
+}
+
+#replay:hover {
+  background-color: #ffffff;
+  color: #333333;
+  cursor: pointer;
+}
+
+#ctrl-ctn {
+  position: absolute;
+  top: 300px;
+  left: 80px;
+  opacity: 1;
+  transition: opacity 1s;
+}
+
+.ctrl-btn {
+  background-color: #333333;
+  color: #ffffff;
+  text-align: center;
+  font-size: 18px;
+  padding: 8px 16px;
+  margin: 10px;
+}
+
+</style>
+<script>
+  var bgSVG = `
+            <svg id="bg-svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
+                height="640" viewBox="0 0 360 640.00001" width="360" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
+                xmlns:dc="http://purl.org/dc/elements/1.1/">
+                <rect id="rect5189-8" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                    height="640" width="360" y="0" x="0" fill="#d7eef4" />
+                <g fill="#333333">
+                    <path id="path10590-3-7-0" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                        d="m153.94 443.28c-1.6123 0-2.9194 1.2047-2.9194 2.6916v10.868c0 5.5017-2.7017 5.5166-4.9971 5.5166v-11.866c0-2.5165-1.8644-4.5558-4.1642-4.5558-2.2999 0-4.1643 2.0393-4.1643 4.5558v20.342c-2.2954 0-4.9971-0.015-4.9971-5.5165v-9.4802c0-1.4869-1.3071-2.6916-2.9193-2.6916-1.6123 0-2.9193 1.2047-2.9193 2.6916v12.354c0 5.6939 4.6336 9.0964 10.836 9.0964v15.213h8.3285v-23.689c6.2021 0 10.836-3.4012 10.836-9.0952v-13.743c0-1.4869-1.3071-2.6916-2.9193-2.6916z" />
+                    <path id="path10590-3-5-8-4" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                        d="m225.91 447.5c2.2227 0 4.0245 1.9708 4.0245 4.4028v14.293c2.2182 0 4.8292-0.0145 4.8292-5.3313v-5.9423c0-1.4369 1.2632-2.6012 2.8213-2.6012s2.8213 1.1642 2.8213 2.6012v8.7195c0 5.5027-4.4781 8.7908-10.472 8.7908v20.068h-8.0489v-40.597c0-2.432 1.8018-4.4028 4.0244-4.4028z" />
+                    <path id="path10590-3-4-6-4" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                        d="m46.842 445.94c-2.2999 0-4.1643 2.0403-4.1643 4.5568v20.342c-2.2954 0-4.9971-0.0161-4.9971-5.5176v-7.2581c0-1.4869-1.307-2.6927-2.9193-2.6927s-2.9193 1.2058-2.9193 2.6927v10.133c0 5.6939 4.6337 9.0952 10.836 9.0952v15.214h8.3285v-17.648c6.2021 0 10.836-3.4013 10.836-9.0952v-5.9699c0-1.4869-1.307-2.6916-2.9193-2.6916s-2.9193 1.2047-2.9193 2.6916v3.095c0 5.5016-2.7017 5.5165-4.9971 5.5165v-17.906c0-2.5165-1.8644-4.5568-4.1642-4.5568z" />
+                    <path id="path10590-3-4-6-4-6" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                        d="m320.43 445.94c-2.2998 0-4.1642 2.0403-4.1642 4.5568v20.342c-2.2954 0-4.9972-0.0161-4.9972-5.5176v-7.2581c0-1.4869-1.307-2.6927-2.9193-2.6927-1.6122 0-2.9193 1.2058-2.9193 2.6927v10.133c0 5.6939 4.6337 9.0952 10.836 9.0952v15.214h8.3285v-17.648c6.2021 0 10.836-3.4013 10.836-9.0952v-5.9699c0-1.4869-1.307-2.6916-2.9193-2.6916s-2.9193 1.2047-2.9193 2.6916v3.095c0 5.5016-2.7018 5.5165-4.9971 5.5165v-17.906c0-2.5165-1.8644-4.5568-4.1643-4.5568z" />
+                </g>
+            </svg>
+        `;
+
+var fgSVG = `
+            <svg id="fg-svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
+                height="150" viewBox="0 0 360 150" width="360" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
+                xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
+                <rect style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                    height="147.5" width="360" y="2.5" x="0" fill="#ffb380" />
+                <path stroke="#333333" stroke-width="5" fill="none" d="m-0.000001625 2.5h360" />
+                <circle id="a" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                    cx="-9.75" cy="11" r="2.5" fill="#333333" />
+                <use xlink:href="#a" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 9.025 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 18.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(15 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 24.025 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 33.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(30 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 39.025 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 48.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(45 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 54.025 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 63.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(60 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 69.025 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 78.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(75 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 84.025 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 93.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(90 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 99.025 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 108.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(105 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 114.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 123.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(120 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 129.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 138.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(135 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 144.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 153.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(150 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 159.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 168.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(165 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 174.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 183.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(180 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 189.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 198.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(195 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 204.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 213.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(210 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 219.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 228.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(225 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 234.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 243.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(240 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 249.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 258.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(255 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 264.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 273.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(270 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 279.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 288.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(285 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 294.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 303.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(300 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 309.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 318.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(315 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 324.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 333.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(330 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 339.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 348.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(345 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 354.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 363.05 17.2)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="translate(360 -3.7151e-8)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.9 0 0 .9 369.03 8.6)" height="100%" width="100%" y="0" x="0" />
+                <use xlink:href="#a" transform="matrix(.8 0 0 .8 378.05 17.2)" height="100%" width="100%" y="0" x="0" />
+            </svg>
+        `;
+
+var boneOpen = `
+            <svg id="bone" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
+                height="400" viewBox="0 0 79.999993 400.00001" width="80" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
+                xmlns:dc="http://purl.org/dc/elements/1.1/">
+        `;
+var boneMid = `
+            <path id="path4855-9" stroke-linejoin="round" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                d="m12.343 397.5-0.274-343.44c-0.066-8.49-9.569-14.59-9.569-27.05 0-12.457 7.957-24.615 21.609-24.551 7.448 0.0614 12.539 3.9094 15.891 8.055 3.352-4.1456 8.443-7.9937 15.891-8.055 13.652-0.0637 21.609 12.094 21.609 24.551s-9.5033 18.557-9.5692 27.044l-0.27382 343.41z"
+                stroke="#333333" stroke-linecap="round" stroke-width="5" fill="#e9ddaf" />
+            <g stroke-linejoin="round" stroke="#333333" stroke-linecap="round" stroke-width="5" fill="none">
+                <path id="path4855-2-0" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                    d="m13.781 26.92a11.746 12.772 0 0 1 11.746 -12.78" />
+                <path id="path5025" d="m56.472 115.85v78.183" />
+                <path id="path5025-3-6" d="m56.472 92.06v10.609" />
+                <path id="path5025-0" d="m56.472 253.62v126.19" />
+                <path id="path5025-3-6-6" d="m56.472 212.25v24.515" />
+            </g>
+        `;
+var boneClose = "</svg>";
+
+var botBoneSVG = boneOpen + boneMid + boneClose;
+var topBoneSVG =
+  boneOpen +
+  '<g transform="rotate(180) translate(-80, -400)">' +
+  boneMid +
+  "</g>" +
+  boneClose;
+
+var sprite1 = `
+            <svg id="sprite-1" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
+                height="59.968" viewBox="0 0 100.02518 59.967859" width="100.03" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
+                xmlns:dc="http://purl.org/dc/elements/1.1/">
+                <g stroke-linecap="round">
+                    <ellipse id="body" stroke-linejoin="round" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                        rx="27.792" transform="matrix(.97502 -.22210 .30061 .95375 0 0)" stroke="#333333" ry="14.864" cy="46.239"
+                        cx="16.016" stroke-width="4.0066" fill="#d38d5f" />
+                    <g id="head" transform="matrix(.5 0 0 .5 .011191 -.016144)">
+                        <path id="path6767-3" stroke-linejoin="round" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                            d="m196.03 86.922s-61.739-3.1063-75.355-6.8143c-14.08-3.835-25.527-11.615-25.527-25.941 0-13.335-15.956-50.135-15.956-50.135s30.525 17.767 41.481 24.195c11.784 6.9142 75.355 44.369 75.355 58.695z"
+                            stroke="#333333" stroke-width="8" fill="#d38d5f" />
+                        <ellipse id="eye" stroke-linejoin="round" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                            rx="5.8902" ry="5.9862" stroke="#ffffff" cy="45.876" cx="120.32" stroke-width="5" fill="#333333" />
+                        <path id="mouth" d="m194.28 84.826c-23.83-4.875-43.57-11.271-63.81-23.461" fill-rule="evenodd"
+                            stroke="#333333" stroke-width="5" fill="#d38d5f" />
+                    </g>
+                    <path id="wing-top" stroke-linejoin="round" d="m10.252 43.445c0.8135-13.421 3.458-26.194-5.2065-41.445 22.742 0 34.917 19.591 38.055 31.493l0.0005-0.001"
+                        fill-rule="evenodd" stroke="#333333" stroke-width="4" fill="#d38d5f">
+                    </path>
+                </g>
+            </svg>
+        `;
+
+var sprite2 = `
+            <svg id="sprite-2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
+                height="59.968" viewBox="0 0 100.02518 59.967859" width="100.03" version="1.1" xmlns:cc="http://creativecommons.org/ns#"
+                xmlns:dc="http://purl.org/dc/elements/1.1/">
+                <g stroke-linecap="round">
+                    <ellipse id="body" stroke-linejoin="round" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                        rx="27.792" ry="14.864" stroke="#333333" transform="matrix(.97502 -.22210 .30061 .95375 0 0)" cy="46.239"
+                        cx="16.016" stroke-width="4.0066" fill="#d38d5f" />
+                    <g id="head" transform="matrix(.5 0 0 .5 .011191 -.016144)">
+                        <path id="path6767-3" stroke-linejoin="round" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                            d="m196.03 86.922s-61.739-3.1063-75.355-6.8143c-14.08-3.835-25.527-11.615-25.527-25.941 0-13.335-15.956-50.135-15.956-50.135s30.525 17.767 41.481 24.195c11.784 6.9142 75.355 44.369 75.355 58.695z"
+                            stroke="#333333" stroke-width="8" fill="#d38d5f" />
+                        <ellipse id="eye" stroke-linejoin="round" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto"
+                            rx="5.8902" ry="5.9862" stroke="#ffffff" cy="45.876" cx="120.32" stroke-width="5" fill="#333333" />
+                        <path id="mouth" d="m194.28 84.826c-23.83-4.875-43.57-11.271-63.81-23.461" fill-rule="evenodd"
+                            stroke="#333333" stroke-width="5" fill="#d38d5f" />
+                    </g>
+                    <path id="wing-bot" stroke-linejoin="round" d="m10.252 43.445c8.7795 5.151 8.41 14.523 8.41 14.523 15.09 0 27.976-12.688 24.439-24.475l0.0005-0.0005"
+                        fill-rule="evenodd" stroke="#333333" stroke-width="4" fill="#d38d5f">
+                    </path>
+                </g>
+            </svg>
+        `;
+
+var bg = new Image();
+bg.src = "data:image/svg+xml," + encodeURIComponent(bgSVG);
+
+var fg = new Image();
+fg.src = "data:image/svg+xml," + encodeURIComponent(fgSVG);
+
+var dinoGlide = new Image();
+dinoGlide.src = "data:image/svg+xml," + encodeURIComponent(sprite1);
+
+var dinoFlap = new Image();
+dinoFlap.src = "data:image/svg+xml," + encodeURIComponent(sprite2);
+
+var topBone = new Image();
+topBone.src = "data:image/svg+xml," + encodeURIComponent(topBoneSVG);
+
+var botBone = new Image();
+botBone.src = "data:image/svg+xml," + encodeURIComponent(botBoneSVG);
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext("2d");
+
+var hitboxWidth = 60;
+var hitboxHeight = 15;
+
+var spriteOffset_X = -10;
+var spriteOffset_Y = -25;
+
+var fgPos_X = 0;
+
+var dinoPos_X = 100;
+var dinoPos_Y = 250;
+var dinoAngle = 0;
+var dinoState = dinoGlide;
+
+var minBoneHeight = -330;
+var maxBoneHeight = -160;
+
+var scrollSpeed = -3;
+var gravity = 0.3;
+var lift = -8;
+var velocity = 0;
+
+var start = false;
+var gameOver = false;
+var score = 0;
+
+var bonePtr = 0;
+var boneStart = 400;
+var flyGap = 180;
+var boneGap = 280;
+var bones = [
+  { x: boneStart, y: getRandomHeight(minBoneHeight, maxBoneHeight) },
+  { x: boneStart + boneGap, y: getRandomHeight(minBoneHeight, maxBoneHeight) },
+  {
+    x: boneStart + 2 * boneGap,
+    y: getRandomHeight(minBoneHeight, maxBoneHeight)
+  }
+];
+
+function getRandomHeight(min, max) {
+  return Math.floor(Math.random() * (max - min) + min);
+}
+
+function playerInput() {
+  if (!start) {
+    start = true;
+    velocity = lift;
+    dinoAngle = -20;
+    document.getElementById("ctrl-ctn").style.opacity = 0;
+  } else {
+    if (!gameOver) {
+      velocity = lift;
+      dinoAngle = -20;
+    }
+  }
+}
+
+function checkCollision() {
+  // set upper bound
+  if (dinoPos_Y <= -hitboxHeight) {
+    velocity = 0;
+  }
+
+  // dino hit the ground
+  if (dinoPos_Y + hitboxHeight >= canvas.height - fg.height) {
+    velocity = 0;
+    dinoPos_Y = canvas.height - fg.height - hitboxHeight;
+    setGameOver();
+  }
+
+  // dino hit bone
+  if (
+    dinoPos_X + hitboxWidth >= bones[bonePtr].x &&
+    dinoPos_X < bones[bonePtr].x + topBone.width &&
+    (dinoPos_Y <= bones[bonePtr].y + topBone.height ||
+      dinoPos_Y + hitboxHeight >= bones[bonePtr].y + topBone.height + flyGap)
+  ) {
+    setGameOver();
+  }
+}
+
+function replay() {
+  start = false;
+  gameOver = false;
+
+  score = 0;
+  velocity = 0;
+
+  dinoPos_X = 100;
+  dinoPos_Y = 250;
+  dinoAngle = 0;
+  dinoState = dinoGlide;
+
+  bonePtr = 0;
+  bones = [
+    { x: boneStart, y: getRandomHeight(minBoneHeight, maxBoneHeight) },
+    {
+      x: boneStart + boneGap,
+      y: getRandomHeight(minBoneHeight, maxBoneHeight)
+    },
+    {
+      x: boneStart + 2 * boneGap,
+      y: getRandomHeight(minBoneHeight, maxBoneHeight)
+    }
+  ];
+
+  document.getElementById("ctrl-ctn").style.opacity = 1;
+
+  document.getElementById("gameover-screen").style.visibility = "hidden";
+  document.getElementById("gameover-screen").style.opacity = 0;
+}
+
+function setGameOver() {
+  gameOver = true;
+  document.getElementById("gameover-screen").style.visibility = "visible";
+  document.getElementById("gameover-screen").style.opacity = 1;
+}
+
+function update() {
+  // foreground scroll
+  if (!gameOver) {
+    fgPos_X += scrollSpeed;
+
+    if (fgPos_X <= -canvas.width) {
+      fgPos_X = 0;
+    }
+  }
+
+  // game started
+  if (start) {
+    velocity += gravity;
+    dinoPos_Y += velocity;
+
+    // if velocity is negative show dino flap sprite else show dino falling
+    if (velocity < 0) {
+      dinoState = dinoFlap;
+    } else {
+      dinoState = dinoGlide;
+      dinoAngle = Math.min(dinoAngle + 2, 90);
+    }
+
+    checkCollision();
+
+    if (!gameOver) {
+      for (var i = 0; i < bones.length; i++) {
+        // scroll bones across screen
+        bones[i].x += scrollSpeed;
+
+        // reassign bone object XY after it leaves screen
+        if (bones[i].x <= -topBone.width) {
+          if (i == 0) {
+            bones[0].x = bones[bones.length - 1].x + boneGap;
+          } else {
+            bones[i].x = bones[i - 1].x + boneGap;
+          }
+
+          bones[i].y = getRandomHeight(minBoneHeight, maxBoneHeight);
+        }
+      }
+
+      // if dino passed through the bone increase score
+      if (dinoPos_X >= bones[bonePtr].x + topBone.width) {
+        score++;
+
+        if (bonePtr == 2) {
+          bonePtr = 0;
+        } else {
+          bonePtr++;
+        }
+      }
+    }
+  }
+  render();
+}
+
+function render() {
+  document.getElementById("scoreboard").innerHTML = score;
+
+  ctx.drawImage(bg, 0, 0);
+
+  for (var i = 0; i < bones.length; i++) {
+    ctx.drawImage(topBone, bones[i].x, bones[i].y);
+    ctx.drawImage(botBone, bones[i].x, bones[i].y + topBone.height + flyGap);
+  }
+
+  ctx.save();
+  ctx.translate(
+    dinoPos_X + hitboxWidth / 2 + spriteOffset_X,
+    dinoPos_Y + hitboxHeight / 2
+  );
+  ctx.rotate(dinoAngle * Math.PI / 180);
+  ctx.drawImage(
+    dinoState,
+    -hitboxWidth / 2,
+    -hitboxHeight / 2 + spriteOffset_Y
+  );
+  ctx.restore();
+
+  // Show hitbox
+  // ctx.fillStyle = "#ff00ff";
+  // ctx.fillRect(dinoPos_X, dinoPos_Y, hitboxWidth, hitboxHeight);
+
+  ctx.drawImage(fg, fgPos_X, canvas.height - fg.height);
+  ctx.drawImage(fg, fgPos_X + fg.width, canvas.height - fg.height);
+
+  window.requestAnimationFrame(update);
+}
+
+document.addEventListener("keydown", function(e) {
+  var char = e.which || e.keyCode;
+  if (char == 32 || char == 38) {
+    e.preventDefault();
+    playerInput();
+  }
+});
+
+document.addEventListener("touchstart", function() {
+  playerInput();
+});
+
+document.getElementById("replay").addEventListener("click", function() {
+  replay();
+});
+
+update();
+
+</script>
\ No newline at end of file