Create script.js

script.js

@@ -0,0 +1,114 @@
+const gameArea = document.getElementById('game-area');
+const player = document.getElementById('player');
+let playerX = window.innerWidth / 2;
+let bullets = [];
+let invaders = [];
+let invaderDirection = 1;
+let invaderSpeed = 1;
+
+// Create player
+player.style.left = `${playerX}px`;
+
+// Create invaders
+function createInvaders() {
+    for (let row = 0; row < 3; row++) {
+        for (let col = 0; col < 8; col++) {
+            const invader = document.createElement('div');
+            invader.classList.add('invader');
+            invader.style.left = `${col * 60 + 50}px`;
+            invader.style.top = `${row * 60 + 50}px`;
+            gameArea.appendChild(invader);
+            invaders.push(invader);
+        }
+    }
+}
+
+// Move player
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowLeft' && playerX > 0) {
+        playerX -= 10;
+    } else if (e.key === 'ArrowRight' && playerX < window.innerWidth - 50) {
+        playerX += 10;
+    } else if (e.key === ' ') {
+        shoot();
+    }
+    player.style.left = `${playerX}px`;
+});
+
+// Shoot bullet
+function shoot() {
+    const bullet = document.createElement('div');
+    bullet.classList.add('bullet');
+    bullet.style.left = `${playerX + 22.5}px`;
+    bullet.style.bottom = '50px';
+    gameArea.appendChild(bullet);
+    bullets.push(bullet);
+}
+
+// Move bullets
+function moveBullets() {
+    bullets.forEach((bullet, index) => {
+        const bottom = parseInt(bullet.style.bottom, 10);
+        if (bottom > window.innerHeight) {
+            bullet.remove();
+            bullets.splice(index, 1);
+        } else {
+            bullet.style.bottom = `${bottom + 10}px`;
+        }
+    });
+}
+
+// Move invaders
+function moveInvaders() {
+    let edgeReached = false;
+    invaders.forEach(invader => {
+        const left = parseInt(invader.style.left, 10);
+        if (left + invaderDirection * invaderSpeed < 0 || left + invaderDirection * invaderSpeed > window.innerWidth - 40) {
+            edgeReached = true;
+        }
+    });
+
+    if (edgeReached) {
+        invaderDirection *= -1;
+        invaders.forEach(invader => {
+            const top = parseInt(invader.style.top, 10);
+            invader.style.top = `${top + 20}px`;
+        });
+    } else {
+        invaders.forEach(invader => {
+            const left = parseInt(invader.style.left, 10);
+            invader.style.left = `${left + invaderDirection * invaderSpeed}px`;
+        });
+    }
+}
+
+// Check for collisions
+function checkCollisions() {
+    bullets.forEach((bullet, bulletIndex) => {
+        const bulletRect = bullet.getBoundingClientRect();
+        invaders.forEach((invader, invaderIndex) => {
+            const invaderRect = invader.getBoundingClientRect();
+            if (bulletRect.bottom > invaderRect.top &&
+                bulletRect.top < invaderRect.bottom &&
+                bulletRect.right > invaderRect.left &&
+                bulletRect.left < invaderRect.right) {
+                bullet.remove();
+                invader.remove();
+                bullets.splice(bulletIndex, 1);
+                invaders.splice(invaderIndex, 1);
+            }
+        });
+    });
+}
+
+// Game loop
+function gameLoop() {
+    moveBullets();
+    moveInvaders();
+    checkCollisions();
+    requestAnimationFrame(gameLoop);
+}
+
+// Initialize game
+createInvaders();
+gameLoop();