forked from sent/waves
539 lines
26 KiB
HTML
539 lines
26 KiB
HTML
|
|
|
|
<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> |