2526-web/Kelompok_09_Space-odyssey
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert back changes

Browse Source
This commit is contained in:
Stanley 2025-12-08 20:02:13 +07:00
parent 94ebbd2d00
commit d3640e0a32
3 changed files with 717 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Main.html
View File

@ -7,18 +7,10 @@
<link rel="stylesheet" href="Style.css"> <link rel="stylesheet" href="Style.css">
</head> </head>
<body> <body>
<div id="startMenu">
<div class="title">SPACE GAME</div>
<button class="menuButton" id="startBtn">Start</button>
<button class="menuButton" id="costumeBtn">Costume</button>
<button class="menuButton" id="optionBtn">Options</button>
<button class="menuButton" id="exitBtn">Exit</button>
</div>
<div id="game"> <div id="game">
<canvas id="canvas" height="650" width="1280"></canvas> <canvas id="canvas"></canvas>
</div> </div>
<script src="Script.js"></script> <script src="Script.js"></script>
</body> </body>
</html> </html>

903
Script.js
View File

File diff suppressed because it is too large Load Diff

55
Style.css
View File

@ -1,48 +1,49 @@
body { body {
margin: 0px; margin: 0;
padding: 0px; padding: 0;
background: radial-gradient(circle at center, background: radial-gradient(circle at center,
rgb(255, 255, 255) 0%, rgb(255, 255, 255) 0%,
rgb(255, 150, 50) 20%, rgb(255, 150, 50) 20%,
rgb(255, 40, 0) 35%, rgb(255, 40, 0) 35%,
rgb(110, 0, 150) 55%, rgb(110, 0, 150) 55%,
rgb(5, 10, 35) 100% rgb(5, 10, 35) 100%
) );
}
html, body {
height: 100%;
overflow: hidden;
} }
#game { #game {
margin: 3px auto 0px auto; margin: 0;
padding: 0px; padding: 0;
width: 1280px; width: 100vw;
height: 650px; height: 100vh;
} }
#canvas { #canvas {
width: 1280px; width: 100%;
height: 650px; height: 100%;
margin: 0px; margin: 0;
background-color: rgb(0, 0, 0); background-color: black;
display: block;
} }
#startMenu { #startMenu {
position: absolute; position: absolute;
width: 1280px; width: 100vw;
height: 650px; height: 100vh;
top: 0; top: 0;
left: 0; left: 0;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10; z-index: 10;
font-family: 'Poppins', Arial, sans-serif; font-family: 'Poppins', Arial, sans-serif;
animation: fadeIn 1s ease-out; animation: fadeIn 1s ease-out;
} }
@ -53,11 +54,10 @@ body {
.title { .title {
font-size: 90px; font-size: 90px;
margin-bottom: 20px; margin-bottom: 40px;
color: #ffffff; color: #ffffff;
letter-spacing: 4px; letter-spacing: 4px;
font-weight: 900; font-weight: 900;
text-shadow: text-shadow:
2px 2px 0px #00bcd4, 2px 2px 0px #00bcd4,
4px 4px 0px #009bb0, 4px 4px 0px #009bb0,
@ -65,7 +65,6 @@ body {
8px 8px 0px #005a68, 8px 8px 0px #005a68,
10px 10px 12px rgba(0, 234, 255, 0.7), 10px 10px 12px rgba(0, 234, 255, 0.7),
0 0 25px #00eaff; 0 0 25px #00eaff;
animation: pixelGlow 2s infinite alternate ease-in-out; animation: pixelGlow 2s infinite alternate ease-in-out;
} }
@ -103,7 +102,7 @@ body {
0 4px 0 #00bcd4, 0 4px 0 #00bcd4,
0 0 12px rgba(0, 234, 255, 0.4), 0 0 12px rgba(0, 234, 255, 0.4),
inset 0 0 15px rgba(0, 234, 255, 0.2); inset 0 0 15px rgba(0, 234, 255, 0.2);
transition: 0.3ease-in-out; transition: 0.3s ease-in-out;
} }
.menuButton:hover { .menuButton:hover {
@ -113,4 +112,4 @@ body {
box-shadow: box-shadow:
0 10px 20px rgba(0, 234, 255, 0.6), 0 10px 20px rgba(0, 234, 255, 0.6),
0 0 30px #00eaff; 0 0 30px #00eaff;
} }