FADE IN:(Edited 2 minutes later.)
part 2
<!DOCTYPE html>
<html>
<head>
<title>TrekGPT the Video Game made by chatGPT a Virtual Fan</title>
<style>
#space {
position: abolute;
height: 400;
width: 400;
background-color: black;
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.lights {
animation: blink 2s linear infinite;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const svg = document.getElementById('enterprise');
const svgContainer = document.querySelector('svg');
const svgWidth = parseInt(svgContainer.getAttribute('width'));
const svgHeight = parseInt(svgContainer.getAttribute('height'));
let rotation = 0;
let xVelocity = 0;
let yVelocity = 0;
let xPos = 350;
let yPos = 200;
function moveStarsGroup(starGroupId, speedFactor) {
const stars = document.getElementById(starGroupId);
const starXPos = parseFloat(stars.getAttribute('x') || 0);
const starYPos = parseFloat(stars.getAttribute('y') || 0);
const newXPos = starXPos - xVelocity * speedFactor;
const newYPos = starYPos - yVelocity * speedFactor;
stars.setAttribute('x', newXPos);
stars.setAttribute('y', newYPos);
if (newXPos < -svgWidth * 0.5) {
stars.setAttribute('x', newXPos + svgWidth * 0.5);
} else if (newXPos > svgHeight * 0.5) {
stars.setAttribute('x', newXPos - svgWidth);
}
if (newYPos < -svgHeight * 0.5) {
stars.setAttribute('y', newYPos + svgHeight * 0.5);
} else if (newYPos > svgHeight * 0.5) {
stars.setAttribute('y', newYPos - svgHeight);
}
}
function move() {
xPos += xVelocity;
yPos += yVelocity;
if (xPos < 0) xPos += svgWidth;
if (xPos > svgWidth) xPos -= svgWidth;
if (yPos < 0) yPos += svgHeight;
if (yPos > svgHeight) yPos -= svgHeight;
svg.setAttribute('transform', `translate(${xPos} ${yPos}) rotate(${rotation} ${0} ${0})`);
moveStarsGroup('stars-far', 0.2);
moveStarsGroup('stars-middle', 0.4);
moveStarsGroup('stars-close', 0.7);
}
function gameLoop() {
move();
requestAnimationFrame(gameLoop);
}
gameLoop();
document.addEventListener('keydown', function(event) {
const key = event.key;
if (key === 'ArrowUp') {
const angleInRadians = (rotation - 90) * (Math.PI / 180);
xVelocity += Math.cos(angleInRadians) * 0.5;
yVelocity += Math.sin(angleInRadians) * 0.5;
} else if (key === 'ArrowLeft') {
rotation -= 5;
} else if (key === 'ArrowRight') {
rotation += 5;
}
});
});
</script>
</head>
<body>
<div id="space">
<svg width="1400" height="400" xmlns="http://www.w3.org/2000/svg">
<svg id="stars-far" width="1400" height="800" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" />
<!-- Farthest stars elements go here -->
<circle cx="20" cy="30" r="1" fill="white" />
<circle cx="50" cy="60" r="1" fill="white" />
<circle cx="142" cy="342" r="1" fill="white" />
<circle cx="385" cy="100" r="3" fill="white" />
<circle cx="550" cy="450" r="1" fill="white" />
<circle cx="670" cy="670" r="1" fill="white" />
<circle cx="720" cy="125" r="2" fill="white" />
<circle cx="1023" cy="210" r="1" fill="white" />
<circle cx="1100" cy="380" r="1" fill="white" />
<circle cx="300" cy="700" r="1" fill="white" />
<circle cx="850" cy="600" r="1" fill="white" />
<circle cx="1000" cy="750" r="1" fill="white" />
<circle cx="1200" cy="90" r="2" fill="white" />
<circle cx="1300" cy="400" r="1" fill="white" />
<circle cx="1350" cy="700" r="1" fill="white" />
<circle cx="50" cy="200" r="2" fill="white" />
<circle cx="250" cy="300" r="1" fill="white" />
<circle cx="400" cy="400" r="1" fill="white" />
<circle cx="550" cy="100" r="1" fill="white" />
<circle cx="700" cy="200" r="2" fill="white" />
<circle cx="850" cy="300" r="1" fill="white" />
<circle cx="1000" cy="400" r="1" fill="white" />
<circle cx="1150" cy="100" r="1" fill="white" />
<circle cx="1300" cy="200" r="1" fill="white" />
<circle cx="50" cy="500" r="1" fill="white" />
<circle cx="250" cy="600" r="1" fill="white" />
<circle cx="400" cy="700" r="3" fill="white" />
</svg>
<svg id="stars-middle" width="1400" height="800" xmlns="http://www.w3.org/2000/svg">
<!-- Middle stars elements go here -->
<circle cx="550" cy="300" r="1" fill="white" />
<circle cx="700" cy="400" r="1" fill="white" />
<circle cx="850" cy="500" r="1" fill="white" />
<circle cx="1000" cy="600" r="1" fill="white" />
<circle cx="1150" cy="300" r="1" fill="white" />
<circle cx="1300" cy="400" r="1" fill="white" />
<circle cx="50" cy="750" r="1" fill="white" />
<circle cx="250" cy="50" r="2" fill="white" />
<circle cx="400" cy="150" r="1" fill="white" />
<circle cx="550" cy="250" r="1" fill="white" />
<circle cx="700" cy="350" r="1" fill="white" />
<circle cx="850" cy="450" r="1" fill="white" />
<circle cx="1000" cy="550" r="2" fill="white" />
<circle cx="1150" cy="650" r="1" fill="white" />
<circle cx="1300" cy="750" r="1" fill="white" />
<circle cx="550" cy="600" r="1" fill="white" />
<circle cx="700" cy="700" r="2" fill="white" />
<circle cx="850" cy="100" r="1" fill="white" />
<circle cx="1000" cy="200" r="1" fill="white" />
<circle cx="1150" cy="300" r="1" fill="white" />
<circle cx="1300" cy="600" r="1" fill="white" />
<circle cx="750" cy="750" r="2" fill="white" />
</svg>
<svg id="stars-close" width="1400" height="800" xmlns="http://www.w3.org/2000/svg">
<!-- Closest stars elements go here -->
<circle cx="900" cy="100" r="1" fill="white" />
<circle cx="1050" cy="200" r="1" fill="white" />
<circle cx="1200" cy="300" r="1" fill="white" />
<circle cx="1350" cy="600" r="1" fill="white" />
<circle cx="500" cy="700" r="2" fill="white" />
<circle cx="650" cy="100" r="1" fill="white" />
<circle cx="800" cy="200" r="1" fill="white" />
<circle cx="950" cy="300" r="1" fill="white" />
<circle cx="1100" cy="600" r="2" fill="white" />
<circle cx="1250" cy="700" r="1" fill="white" />
</svg>
<g id="enterprise">
<polygon points="-40,50 0,-10 40,50" fill="#808080" stroke="black" />
<circle cx="0" cy="-15" r="50" fill="#808080" stroke="black" />
<rect x="-10" y="-65" width="20" height="80" fill="#a9a9a9" stroke="black" />
<rect x="-45" y="40" width="15" height="90" fill="#a9a9a9" stroke="black" />
<rect x="30" y="40" width="15" height="90" fill="#a9a9a9" stroke="black" />
<circle cx="0" cy="0" r="3" fill="red" class="lights" />
</g>
</svg>
</div>
</body>
</html>:D(Edited 2 minutes later.)
(Edited 21 minutes later.)