Version 1

css/Space.css

@@ -0,0 +1,82 @@
+
+
+.game.playground{
+    width: 40%;
+    position: relative;
+    top: 0;
+    background: #00000000;
+    z-index: 99999;
+    height: 100vh;
+    margin: auto;
+}
+
+
+
+.playground{
+    position: relative;
+    overflow: hidden;
+}
+
+.game.right_side{
+    width: 30%;
+    top: 0;
+    position: fixed;
+    background: #8e8e8e;
+    z-index: 99999;
+    height: 100vh;
+    margin-left: 0;
+    left: 0;
+}
+
+.game.left_side{
+    width: 30%;
+    right: 0;
+    position: fixed;
+    background: #8e8e8e;
+    z-index: 99999;
+    height: 100vh;
+    margin-right: 0;
+}
+
+
+.galaxy {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 1px;
+    width: 1px;
+    background-color: #fff;
+    border-radius: 50%;
+    box-shadow: -42vw -4vh 0px 0px #, 25vw -41vh 0px 0px #fff, -20vw 49vh 0px 1px #fff, 5vw 40vh 1px 1px #fff, 29vw 19vh 1px 0px #fff, -44vw -13vh 0px 0px #fff, 46vw 41vh 0px 1px #fff, -3vw -45vh 0px 1px #fff, 47vw 35vh 1px 0px #fff, 12vw -8vh 1px 0px #fff, -34vw 48vh 1px 1px #fff, 32vw 26vh 1px 1px #fff, 32vw -41vh 1px 1px #fff, 0vw 37vh 1px 1px #fff, 34vw -26vh 1px 0px #fff, -14vw -49vh 1px 0px #fff, -12vw 45vh 0px 1px #fff, -44vw -33vh 0px 1px #fff, -13vw 41vh 0px 0px #fff, -36vw -11vh 0px 1px #fff, -23vw -24vh 1px 0px #fff, -38vw -27vh 0px 1px #fff, 16vw -19vh 0px 0px #fff, 28vw 33vh 1px 0px #fff, -49vw -4vh 0px 0px #fff, 16vw 32vh 0px 1px #fff, 36vw -18vh 1px 0px #fff, -25vw -30vh 1px 0px #fff, -23vw 24vh 0px 1px #fff, -2vw -35vh 1px 1px #fff, -25vw 9vh 0px 0px #fff, -15vw -34vh 0px 0px #fff, -8vw -19vh 1px 0px #fff, -20vw -20vh 1px 1px #fff, 42vw 50vh 0px 1px #fff, -32vw 10vh 1px 0px #fff, -23vw -17vh 0px 0px #fff, 44vw 15vh 1px 0px #fff, -40vw 33vh 1px 1px #fff, -43vw 8vh 0px 0px #fff, -48vw -15vh 1px 1px #fff, -24vw 17vh 0px 0px #fff, -31vw 50vh 1px 0px #fff, 36vw -38vh 0px 1px #fff, -7vw 48vh 0px 0px #fff, 15vw -32vh 0px 0px #fff, 29vw -41vh 0px 0px #fff, 2vw 37vh 1px 0px #fff, 7vw -40vh 1px 1px #fff, 15vw 18vh 0px 0px #fff, 25vw -13vh 1px 1px #fff, -46vw -12vh 1px 1px #fff, -18vw 22vh 0px 0px #fff, 23vw -9vh 1px 0px #fff, 50vw 12vh 0px 1px #fff, 45vw 2vh 0px 0px #fff, 14vw -48vh 1px 0px #fff, 23vw 43vh 0px 1px #fff, -40vw 16vh 1px 1px #fff, 20vw -31vh 0px 1px #fff, -17vw 44vh 1px 1px #fff, 18vw -45vh 0px 0px #fff, 33vw -6vh 0px 0px #fff, 0vw 7vh 0px 1px #fff, -10vw -18vh 0px 1px #fff, -19vw 5vh 1px 0px #fff, 1vw 42vh 0px 0px #fff, 22vw 48vh 0px 1px #fff, 39vw -8vh 1px 1px #fff, -6vw -42vh 1px 0px #fff, -47vw 34vh 0px 0px #fff, -46vw 19vh 0px 1px #fff, -12vw -32vh 0px 0px #fff, -45vw -38vh 0px 1px #fff, -28vw 18vh 1px 0px #fff, -38vw -46vh 1px 1px #fff, 49vw -6vh 1px 1px #fff, -28vw 18vh 1px 1px #fff, 10vw -24vh 0px 1px #fff, -5vw -11vh 1px 1px #fff, 33vw -8vh 1px 0px #fff, -16vw 17vh 0px 0px #fff, 18vw 27vh 0px 1px #fff, -8vw -10vh 1px 1px #fff;
+
+    /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */
+
+    box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff, -45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff, 29vw 19vh 0px 1px #fff, 4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff, -27vw 26vh 1px 1px #fff, -47vw -3vh 1px 1px #fff, -28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff, 4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff, -16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff, -34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff, 11vw -13vh 1px 1px #fff, 48vw -8vh 1px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff, 43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff, 39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff, -40vw 45vh 0px 1px #fff, 11vw -30vh 1px 0px #fff, 26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff, -2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff, -7vw -27vh 1px 1px #fff, 42vw 24vh 0px 0px #fff, 45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff, -44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff, 40vw 24vh 0px 0px #fff, 18vw 11vh 0px 0px #fff, -15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff, 27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff, -15vw -28vh 0px 0px #fff, -43vw 13vh 1px 0px #fff, 7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff, -45vw 15vh 1px 1px #fff, -5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff, -39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff, 48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff, 21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff, -6vw -42vh 1px 0px #fff, -15vw 48vh 1px 1px #fff, -23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff, -31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff, -43vw 28vh 0px 0px #fff, 3vw -25vh 0px 1px #fff, -39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff, 35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff, 3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff, -6vw 21vh 1px 0px #fff, 48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff, 29vw -12vh 1px 1px #fff, -48vw 13vh 1px 0px #fff, -42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff, 29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff;
+    animation: zoom 20s  infinite;
+}
+
+
+
+@keyframes zoom {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(1.5);
+    }
+}
+
+
+@media screen and (max-width: 768px) {
+    .game.playground{
+        width: 100%;
+    }
+
+
+    .game.right_side,
+    .game.left_side{
+        width: 0;
+        position: static;
+    }
+}

index.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alien Shooter - Save Earth</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Tiny5&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/Space.css">
+    <link rel="stylesheet" href="css/Game.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <div class="loading-overlay fixed inset-0 flex items-center justify-center bg-black z-[999999999999999] ">
+        <div class="text-center">
+            <div class="progress-bar bg-gray-700 rounded-full w-64 h-4 overflow-hidden mb-4">
+                <div class="progress-fill bg-blue-500 h-full transition-all duration-300"></div>
+            </div>
+            <p class="text-white text-lg" id="progress-text">Loading... 0%</p>
+        </div>
+    </div>
+    <main>        
+
+        <div id="popup" class="h-screen fixed z-[999999999999999] flex items-center justify-center controls w-full top-0 left-0 hidden">
+            <div class="w-[80%] h-[80%] bg-gray-800 rounded p-8 relative flex flex-col justify-between items-center text-white">
+                <!-- Close Button -->
+                <button id="close-btn" class="absolute top-4 right-4 text-gray-300 hover:text-gray-100 font-bold text-lg">✕</button>
+
+                <!-- Control title -->
+                <h2 class="text-2xl font-bold mb-4">Game Controls</h2>
+
+                <!-- WASD controls -->
+                <div class="flex flex-col items-center mb-4">
+                    <div class="mb-2">
+                        <span class="text-lg p-2 bg-gray-600 rounded">W</span>
+                    </div>
+                    <div class="flex space-x-4">
+                        <span class="text-lg p-2 bg-gray-600 rounded">A</span>
+                        <span class="text-lg p-2 bg-gray-600 rounded">S</span>
+                        <span class="text-lg p-2 bg-gray-600 rounded">D</span>
+                    </div>
+                    <p class="mt-2 text-sm">Use W, A, S, D to move</p>
+                </div>
+
+                <!-- Arrow keys controls -->
+                <div class="flex flex-col items-center mb-4">
+                    <div class="flex items-center space-x-4">
+                        <span class="text-lg p-2 bg-gray-600 rounded">←</span>
+                        <span class="text-lg p-2 bg-gray-600 rounded">↓</span>
+                        <span class="text-lg p-2 bg-gray-600 rounded">→</span>
+                    </div>
+                    <div class="mt-2">
+                        <span class="text-lg p-2 bg-gray-600 rounded">↑</span>
+                    </div>
+                    <p class="mt-2 text-sm">Use Arrow keys to navigate</p>
+                </div>
+
+                <!-- Space control -->
+                <div class="flex flex-col items-center">
+                    <span class="text-lg p-3 bg-gray-600 rounded">Space</span>
+                    <p class="mt-2 text-sm">Press Space to shoot</p>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="game right_side p-4">
+            <div class="bg-white rounded px-4 py-10">
+                <h4 class="text-xl" id="quote"></h4>
+            </div>             
+        </div>
+        <div class="game left_side p-4">
+            <div class="bg-white p-2 px-4 rounded">
+                <h2 class="text-xl">Level : <span class="level"></span></h2>
+                <h2 class="text-xl">Total Bullets Allocated : <span class="bullets_allocated"></span></h2>
+            </div>      
+            <div class="bg-white mt-3 p-2 px-4 rounded">
+                <p class="text-xl">You've to clear all the aliens within the allocated bullets</p>
+            </div>
+        </div>
+
+
+        <div class="game playground">
+            <div class="galaxy"></div>
+
+
+            <div id="space-ship"  class="space-ship">
+
+                <img src="assets/spaceship-1.png" class="craft" draggable="false"  alt="">
+
+
+
+                    <img src="assets/beam.png" class="beam" alt="">
+
+            </div>
+
+
+            <div class="menu">            
+                <button id="start">Start</button>
+                <button id="show-btn">Show Controls</button>
+                <button>Contribute to This Game</button>            
+            </div>
+
+
+            <p class="fadeInAnimAfterGameStart bulletsFired opacity-0">Numbers of Bullets Fired : <span class="numbers_of_bullets_s">0</span></p>
+            <p class="fadeInAnimAfterGameStart score opacity-0">Score : <span class="scoreNumber">0</span></p>
+            <div class="fadeInAnimAfterGameStart health opacity-0">
+                <div class="percentage lifePercentage" ></div>
+            </div>
+
+        </div>
+
+    </main>    
+
+
+    <script  src="js/Game.js"></script>
+</body>
+</html>