<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body,
html {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #000;
}
game-window {
position: absolute;
width: 100vw;
height: 100vh;
margin: 0;
left: 0px;
top: 0px;
}
.game-container {
position: absolute;
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.lights {
animation: blink 2s linear infinite;
}
svg {
position: absolute;
z-index: 2;
}
canvas {
position: absolute;
border: 4vh inset #a9a9a9;
border-radius: 25vh;
height: 90vh;
width: 60vw;
top: 1vh;
left: 1vw;
bottom: 0vh;
z-index: 3;
margin: 0 auto;
}
.HUD {
position: absolute;
padding: 0;
margin: 0 auto;
top: 1vh;
right: 1vw;
z-index: 3;
border: 4vh ridge #a9a9a9;
border-radius: 30vh;
background: #000000;
width: 26vw;
height: 44vh;
overflow: hidden;
}
.radar {
position: absolute;
margin: 0 auto;
height: 44vh;
width: 26vw;
background-image: conic-gradient(#000000, #39ff14);
animation: radar linear infinite 10s;
}
@keyframes radar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.RocketFlame {
animation: RocketFlame 1ms linear 0s infinite normal none;
}
@keyframes RocketFlame {
0%,
100% {
transform: rotate(0deg);
transform-origin: 50% 0;
}
10% {
transform: rotate(2deg);
}
20%,
40%,
60% {
transform: rotate(-4deg);
}
30%,
50%,
70% {
transform: rotate(4deg);
}
80% {
transform: rotate(-2deg);
}
90% {
transform: rotate(2deg);
}
}
.Rocketboost {
animation: Rocketboost 1ms linear 0s infinite normal none;
}
@keyframes Rocketboost {
0% {
animation-timing-function: 3s ease-in;
opacity: 1;
transform: translateY(-45px);
}
24% {
opacity: 1;
}
40% {
animation-timing-function: ease-in;
transform: translateY(-24px);
}
65% {
animation-timing-function: ease-in;
transform: translateY(-12px);
}
82% {
animation-timing-function: ease-in;
transform: translateY(-6px);
}
93% {
animation-timing-function: ease-in;
transform: translateY(-4px);
}
25%,
55%,
75%,
87% {
animation-timing-function: ease-out;
transform: translateY(0px);
}
100% {
animation-timing-function: ease-out;
opacity: 1;
transform: translateY(0px);
}
}
.eye {
animation: eye 3s linear 6s infinite alternate-reverse forwards;}
@keyframes eye {
0% {
transform: rotate(0);
}
100% {
transform: rotate(5deg);
}
}
.Dashboard {
position: absolute;
margin: 0vh;
bottom: 1vh;
right: 1vw;
z-index: 3;
border: 2vh inset #a9a9a9;
border-radius: 10vh;
width: 28vw;
height: 40vh;
padding-left: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/SAT.min.js"></script>
</head>
<body>
<game-window>
<canvas></canvas>
<div class="HUD">
<div class="radar">
<svg width="28vw" height="44vh" xmlns="http://www.w3.org/2000/svg">
<circle cx="13vw" cy="22vh" r="13.375vw" stroke="#49fb35" stroke-width="1vh" fill-opacity="0.33 " />
</svg>
</div>
<svg width="28vw" height="44vh" xmlns="http://www.w3.org/2000/svg">
<circle cx="13vw" cy="22vh" r="10.4vw" stroke="#49fb35" stroke-width="0.0625vh" fill-opacity="0.33 " />
<circle cx="13vw" cy="22vh" r="7.8vw" stroke="#49fb35" stroke-width="0.125vh" fill-opacity="0.33 " />
<circle cx="13vw" cy="22vh" r="5.2vw" stroke="#49fb35" stroke-width="0.0625vh" fill-opacity="0.33 " />
<circle cx="13vw" cy="22vh" r="2.6vw" stroke="#49fb35" stroke-width="0.125vh" fill-opacity="0.33 " />
<line x1="13vw" y1="0vh" x2="13vw" y2="44vh" stroke="#49fb35" stroke-width="0.25vh" />
<line x1="0vw" y1="22vh" x2="28vw" y2="22vh" stroke="#49fb35" stroke-width="0.25vh" />
</svg>
</div>
<div class="Dashboard" style="background-color:#494949">
<svg width="120" height="372" viewBox="0 0 62 372" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(16 32)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>RADAR</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#4a4a"></rect><circle cx="6" cy="6" r="6" transform="translate(11 6)" fill="#33ff00";"></circle></g></g></g><g transform="translate(16 76)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>iDENT</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(11 6)" fill="GREEN"></circle></g></g></g><g transform="translate(16 120)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>GYRO</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#4a4a"></rect><circle cx="6" cy="6" r="6" transform="translate(11 6)" fill="#33ff00"></circle></g></g></g><g transform="translate(16 164)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>VOR</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 208)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>NBD</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#4A4A"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="#33FF00"></circle></g></g></g><g transform="translate(16 252)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>ADi</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 296)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>ASYNC R/T</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 296)">
</svg>
<svg width="400" height="372" viewBox="0 0 62 372" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(16 32)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>AUTO</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 76)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>U.BUS</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#4a4a"></rect><circle cx="6" cy="6" r="6" transform="translate(11 6)" fill="#33ff00"></circle></g></g></g><g transform="translate(16 120)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>AUX.BUS</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 164)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>P.E.S.A</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 208)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>(½₀)⊗(₀½)</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#4A4"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="#33FF00"></circle></g></g></g><g transform="translate(16 252)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(55 27)" font-size="24" font-family="Roboto-REGULAR,Roboto" ><tspan x="0" y="0"></tspan>ħ</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 296)">
<rect width="30" height="44" stroke="none" fill="#494949" opacity="1"></rect><text transform="translate(32 27)" font-size="14" font-family="Roboto-Regular,Roboto" ><tspan x="0" y="0"></tspan>ORTHOG</text><g transform="translate(0 10)"><rect width="24" height="24" opacity="0"></rect><g transform="translate(0 0)"><rect width="24" height="14" rx="7" transform="translate(0 5)" fill="#000"></rect><circle cx="6" cy="6" r="6" transform="translate(1 6)" fill="green"></circle></g></g></g><g transform="translate(16 296)">
</svg>
</div>
</game-window>
<div class="game-container">
<svg class="asteroid" polygon id="aster21" width="135" height="127" xmlns="http://www.w3.org/2000/svg">
<polygon points="19,116 3,47 60,3 129,38 110,121" fill="#636" stroke="#929" stroke-width="6.00" stroke-opacity="1.00"/>
</svg>
<svg class="asteroid" polygon id="aster20" width="85" height="65" xmlns="http://www.w3.org/2000/svg">
<polygon points="1,47 60,1 80,45 40,60" fill="#646" stroke="#929" stroke-width="2.00" stroke-opacity="1.00"/>
</svg>
<svg class="asteroid" polygon id="aster19" width="133" height="124" xmlns="http://www.w3.org/2000/svg">
<polygon points="19,116 60,4 125,38 110,119" fill="#737" stroke="#929" stroke-width="6.00" stroke-opacity="1.00"/>
</svg>
<svg class="asteroid" polygon id="aster18" width="95" height="80" xmlns="http://www.w3.org/2000/svg">
<polygon points="19,76 5,4 90,60" fill="#838" stroke="#929" stroke-width="3.00" stroke-opacity="1.00"/>
</svg>
<svg class="asteroid" polygon id="aster17" width="113" height="103" xmlns="http://www.w3.org/2000/svg">
<polygon points="19,96 4,37 50,4 106,38" fill="#535" stroke="#929" stroke-width="5.00" stroke-opacity="1.00"/>
</svg>
<svg class="asteroid" polygon id="aster16" width="65" height="70" xmlns="http://www.w3.org/2000/svg">
<polygon points="19,64 5,27 30,4 59,28 50,61" fill="#404" stroke="#929" stroke-width="7.00" stroke-opacity="1.00"/>
</svg>
<svg class="asteroid" polygon id="aster1" width="175" height="190" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,30 90,10 150,30 165,70 170,137 120,177 30,160 10,90" fill="#333" stroke="#333"
stroke-width="5" />
<polygon points="40,40 90,15 135,69 135,90 45,137 120,160 50,160 20,90" fill="#333" stroke="#444"
stroke-width="15" />
<polygon points="90,50 90,45 128,45 130,90 145,90 60,110 50,40 90,140" fill="#444" stroke="#444"
stroke-width="40" />
</svg>
<svg class="asteroid" polygon id="aster2" width="500" height="200" xmlns="http://www.w3.org/2000/svg"
visibility="visible">
<polygon points="30,20 150,10 300,60 410,30 460,45 480,110 445,150 375,180 155,190 25,175 10,80"
fill="#222" stroke="#222" stroke-width="6" />
<polygon points="90,30 150,50 310,80 410,65 440,90 405,150 155,165 45,155 30,80 " fill="#333" stroke="#333"
stroke-width="25" />
<polygon points="50,50 100,50 110,110 210,95 405,140 355,175 35,175 20,80 " fill="#222" stroke="#222"
stroke-width="5" />
</svg>
<svg class="asteroid" polygon id="aster3" width="175" height="190" xmlns="http://www.w3.org/2000/svg"
visibility="visible">
<polygon points="20,30 90,10 150,30 165,70 170,137 120,177 30,160 10,90" fill="#222" stroke="#323"
stroke-width="5" />
<polygon points="40,40 90,15 135,69 135,90 45,137 120,160 50,160 20,90" fill="#323" stroke="#5235"
stroke-width="4" />
<polygon points="90,50 90,45 128,45 130,90 145,90 60,110 50,40 90,140" fill="#323" stroke="#5235"
stroke-width="40" />
</svg>
<svg class="asteroid" width="75" height="99" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,50 25,0 75,25 50,50 25,99" fill="#555" />
</svg>
<svg class="asteroid" width="105" height="130" xmlns="http://www.w3.org/2000/svg">
<polygon points="5,5 75,0 105,60 80,130 0,110" fill="#444" />
</svg>
<svg class="asteroid" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,25 50,0 100,50 75,100 25,75" fill="#666" />
</svg>
<svg id="lander" z-index="3" xmlns="http://www.w3.org/2000/svg" width="70" height="80" viewbox="-15 -5 100 100" overflow="visible" >
<!-- Flames -->
<polygon class="Rocketboost" id="leftFlame" points=" 25,60 35,190 45,60 24,90 22,80 21,68 49,68 48,80 46,90" fill="#dce2222c" stroke="#dce222" stroke-width=".1"
visibility="hidden" />
<polygon class="Rocketboost" id="rightFlame" points="35,130 30,90 22,68 35,80 48,68 40,90" fill="#dce2223a" stroke="#dce222bf" stroke-width="0.2"
visibility="hidden" />
<polygon class="RocketFlame" id="rightFlame" points="35,90 22,60 22,108 35,60 48,108 48,50" fill="#dce222" stroke="#dce222" stroke-width="2"
visibility="hidden" />
<!-- engine -->
<polygon points="22.5,60 21.5,62 20,67 20,70 50,70 50,67 48.5,62 47.5,60 35,36" fill="#404040" />
<!-- head and anteanna -->
<line x1="35" y1="23" x2="35" y2="4" stroke="#a9a9a9" stroke-width="1" />
<circle class="lights" cx="35" cy="3" r="3.5" fill="#e258223c" stroke="#e258223c" stroke-width="3" />
<circle class="lights" cx="35" cy="3" r="1.5" fill="#e258229d" stroke="#e258225c" stroke-width="0.5" />
<rect x="15" y="23" width="40" height="20" fill="#494949" stroke="#a9a9a9" stroke-width="0.5" />
<!-- legs -->
<line x1="15" y1="53" x2="0" y2="73" stroke="#a9a9a9" stroke-width="1.5" />
<line x1="55" y1="53" x2="70" y2="73" stroke="#a9a9a9" stroke-width="1.5" />
<line x1="35" y1="53" x2="35" y2="78" stroke="#a9a9a9" stroke-width="1.5" />
<!-- maneuvering RCS -->
<polygon id="roll-L" points="2,20 15,23.5 2,27" fill="#ffffff2d" visibility="hidden" />
<circle id="roll-L" cx="11" cy="23.5" r="3" fill="#ffffff2a" visibility="hidden" />
<polygon id="roll-BR" points="60,57.5 73,54 73,61" fill="#ffffff2d" visibility="hidden" />
<circle id="roll-L" cx="64" cy="57.5" r="3" fill="#ffffff2a" visibility="hidden" />
<polygon id="roll-BL" points="-3,54 10,57.5 -3,61" fill="#ffffff2d" visibility="hidden" />
<circle id="roll-R" cx="6" cy="57.5" r="3" fill="#ffffff2a" visibility="hidden" />
<polygon id="roll-TR" points="55,23.5 68,20 68,27" fill="#ffffff2d" visibility="hidden" />
<circle id="roll-R" cx="59" cy="23.5" r="3" fill="#ffffff2a" visibility="hidden"/>
<!-- body -->
<rect x="10" y="38" width="50" height="20" fill="#393939" stroke="#a9a9a9" stroke-width="0.5" />
<rect x="5" y="40" width="10" height="15" fill="#2626" stroke="#a9a9a9" stroke-width="0.5" />
<rect x="20" y="40" width="10" height="15" fill="#2626" stroke="#a9a9a9" stroke-width="0.5" />
<rect x="40" y="40" width="10" height="15" fill="#2626" stroke="#a9a9a9" stroke-width="0.5" />
<rect x="55" y="40" width="10" height="15" fill="#2626" stroke="#a9a9a9" stroke-width="0.5" />
<!-- eye window -->
<circle class="eye" cx="34" cy="30.5" r="5.5" fill="black" />
<circle cx="35" cy="30.5" r="7" fill="#49ff397a" />
<circle class="eye" cx="35.5" cy="30.5" r="3" fill="#0000003c" />
<circle cx="37" cy="28.5" r="1.7" fill="#ffffff4a" />
<!-- maneuvering jets -->
<circle cx="25" cy="23" r="1.5" fill="#606060" />
<circle cx="24.4" cy="23" r="1" fill="#0000004d" />
<circle cx="15" cy="23.5" r="1.5" fill="#606060" />
<ellipse cx="14.2" cy="23.5" rx="0.6" ry="1" fill="#0000004d" />
<circle cx="45" cy="23" r="1.5" fill="#606060" />
<circle cx="45.6" cy="23" r="1" fill="#0000004d" />
<circle cx="55" cy="23.5" r="1.5" fill="#606060" />
<ellipse cx="55.8" cy="23.5" rx="0.6" ry="1" fill="#0000004d" />
<circle cx="20" cy="58" r="1.5" fill="#606060" />
<circle cx="19.4" cy="58" r="1" fill="#0000004d" />
<circle cx="10" cy="57.5" r="1.5" fill="#606060" />
<ellipse cx="9.2" cy="57.5" rx="0.6" ry="1" fill="#0000004d" />
<circle cx="50" cy="58" r="1.5" fill="#606060" />
<circle cx="50.6" cy="58" r="1" fill="#0000004d" />
<circle cx="60" cy="57.5" r="1.5" fill="#606060" />
<ellipse cx="60.8" cy="57.5" rx="0.6" ry="1" fill="#0000004d" />
</svg> </div>
</div>