Spaces:

Luis-Filipe
/

Invaders-2

Running

App Files Files Community

Luis-Filipe commited on Nov 4, 2025

Commit

b5a1fc7

verified ·

1 Parent(s): 6398ffa

Upload 5 files

Browse files

Files changed (5) hide show

README-TRANSPARENT.md +48 -0
assets/bullet-transparent.png +0 -0
assets/invader-transparent.png +0 -0
assets/ship-transparent.png +0 -0
space-invaders.html +499 -0

README-TRANSPARENT.md ADDED Viewed

	@@ -0,0 +1,48 @@

+# Space Invaders - Transparent Sprites Edition
+## 🎨 What's New: Transparent Backgrounds!
+Your sprites now have **transparent backgrounds** instead of white ones, making them look much more professional and natural in the game!
+## ✅ Background Removal Results:
+- **Ship**: Removed 866 white pixels → Transparent background
+- **Invader**: Removed 777 white pixels → Transparent background
+- **Bullet**: Removed 21 white pixels → Transparent background
+## 🚀 Quick Start
+1. Open `space-invaders.html` in your web browser
+2. Click "START GAME"
+3. Use **Arrow Keys** or **A/D** to move your ship
+4. Press **SPACEBAR** to shoot
+5. Enjoy the clean, professional look!
+## 🎮 What You'll See
+- **Your ship** with transparent background (no white box around it)
+- **Your invader** with clean edges and no white background
+- **Your bullet** seamlessly integrated into the game
+- **Professional appearance** - sprites blend naturally with the black space background
+## 📁 File Structure
+```
+your-game/
+├── space-invaders.html                # Main game file
+└── assets/
+    ├── ship-transparent.png           # Your ship (transparent background, 40×30px)
+    ├── invader-transparent.png        # Your invader (transparent background, 35×25px)
+    └── bullet-transparent.png         # Your bullet (transparent background, 4×10px)
+```
+## 🎯 Technical Improvements
+- **Alpha channel support** - Sprites use RGBA for transparency
+- **Clean edges** - No more white squares around your artwork
+- **Better blending** - Sprites integrate seamlessly with game background
+- **Professional quality** - Industry-standard sprite handling
+## 🎨 Visual Benefits
+- **No white boxes** around your sprites
+- **Clean, crisp edges**
+- **Natural look** on black space background
+- **Professional game appearance**
+- **Better visual impact**
+---
+**Created by MiniMax Agent** | *November 2025*

assets/bullet-transparent.png ADDED Viewed

assets/invader-transparent.png ADDED Viewed

assets/ship-transparent.png ADDED Viewed

space-invaders.html ADDED Viewed

	@@ -0,0 +1,499 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Space Invaders - Transparent Sprites</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            background: #000;
+            font-family: 'Courier New', monospace;
+            color: #00ff00;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            user-select: none;
+        }
+        .title {
+            margin-bottom: 20px;
+            text-shadow: 0 0 10px #00ff00;
+        }
+        #gameCanvas {
+            border: 3px solid #00ff00;
+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
+            background: #000;
+        }
+        .hud {
+            margin: 15px 0;
+            font-size: 20px;
+            font-weight: bold;
+            text-shadow: 0 0 5px #00ff00;
+        }
+        .controls {
+            margin: 10px 0;
+            color: #00cc00;
+            font-size: 14px;
+        }
+        .game-btn {
+            margin: 15px 0;
+            padding: 12px 24px;
+            background: transparent;
+            border: 2px solid #00ff00;
+            color: #00ff00;
+            font-family: 'Courier New', monospace;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s;
+        }
+        .game-btn:hover {
+            background: #00ff00;
+            color: #000;
+            box-shadow: 0 0 15px #00ff00;
+        }
+        .status {
+            margin: 10px 0;
+            font-size: 14px;
+            color: #008800;
+        }
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <h1 class="title">🚀 SPACE INVADERS - TRANSPARENT SPRITES 🚀</h1>
+    <div class="hud">
+        SCORE: <span id="score">000000</span> |
+        LIVES: <span id="lives">3</span> |
+        LEVEL: <span id="level">1</span>
+    </div>
+    <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <div class="controls">
+        🎮 MOVE: Arrow Keys or A/D | 🚀 SHOOT: SPACEBAR
+    </div>
+    <button class="game-btn" id="startBtn" onclick="startGame()">START GAME</button>
+    <button class="game-btn hidden" id="restartBtn" onclick="restartGame()">RESTART</button>
+    <div class="status" id="status">Loading transparent sprites...</div>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        let gameState = 'menu';
+        let score = 0;
+        let lives = 3;
+        let level = 1;
+        // Game objects
+        let player = {
+            x: 380,
+            y: 550,
+            width: 40,
+            height: 30,
+            speed: 6,
+            lastShot: 0,
+            shootDelay: 250
+        };
+        let invaders = [];
+        let bullets = [];
+        // Your transparent sprites
+        let sprites = {
+            loaded: false,
+            ship: null,
+            invader: null,
+            bullet: null
+        };
+        // Game settings
+        const INVADER_ROWS = 5;
+        const INVADER_COLS = 11;
+        const INVADER_WIDTH = 35;
+        const INVADER_HEIGHT = 25;
+        // Movement
+        let invaderDirection = 1;
+        let invaderSpeed = 1;
+        let invaderDropDistance = 20;
+        // Input
+        const keys = {};
+        // Setup
+        function init() {
+            updateStatus('Loading transparent sprites...');
+            loadTransparentSprites();
+            createInvaders();
+            drawInitialScreen();
+            // Keyboard events
+            document.addEventListener('keydown', (e) => {
+                keys[e.code] = true;
+                if (e.code === 'Space') {
+                    e.preventDefault();
+                    if (gameState === 'playing') {
+                        shoot();
+                    }
+                }
+            });
+            document.addEventListener('keyup', (e) => {
+                keys[e.code] = false;
+            });
+        }
+        function loadTransparentSprites() {
+            console.log('Loading your transparent sprites...');
+            // Use your transparent sprites
+            const spriteFiles = {
+                ship: 'assets/ship-transparent.png',
+                invader: 'assets/invader-transparent.png',
+                bullet: 'assets/bullet-transparent.png'
+            };
+            let loadedCount = 0;
+            const totalSprites = Object.keys(spriteFiles).length;
+            Object.keys(spriteFiles).forEach(key => {
+                const img = new Image();
+                img.onload = () => {
+                    console.log(`✓ Loaded transparent ${key} sprite: ${img.width}x${img.height}px`);
+                    sprites[key] = img;
+                    loadedCount++;
+                    if (loadedCount === totalSprites) {
+                        sprites.loaded = true;
+                        updateStatus('✓ All transparent sprites loaded! Game ready!');
+                        console.log('All transparent sprites loaded successfully!');
+                    }
+                };
+                img.onerror = () => {
+                    console.error(`✗ Failed to load transparent ${key} sprite`);
+                    updateStatus(`✗ Failed to load ${key} sprite - using fallback shapes`);
+                };
+                img.src = spriteFiles[key];
+            });
+        }
+        function drawInitialScreen() {
+            // Clear
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw stars
+            ctx.fillStyle = '#003300';
+            for (let i = 0; i < 50; i++) {
+                const x = (i * 137) % canvas.width;
+                const y = (i * 173) % canvas.height;
+                ctx.fillRect(x, y, 2, 2);
+            }
+            // Draw title text
+            ctx.fillStyle = '#00ff00';
+            ctx.font = '32px Courier New';
+            ctx.textAlign = 'center';
+            ctx.fillText('SPACE INVADERS - TRANSPARENT SPRITES', canvas.width/2, canvas.height/2 - 50);
+            ctx.font = '20px Courier New';
+            ctx.fillText('Click START GAME to begin!', canvas.width/2, canvas.height/2 + 20);
+            ctx.fillText('Use ARROW KEYS + SPACEBAR', canvas.width/2, canvas.height/2 + 50);
+            // Test sprite display
+            if (sprites.loaded) {
+                ctx.drawImage(sprites.ship, canvas.width/2 - 20, canvas.height/2 + 80, 40, 30);
+                ctx.drawImage(sprites.invader, canvas.width/2 - 17, canvas.height/2 + 120, 35, 25);
+            }
+        }
+        function createInvaders() {
+            invaders = [];
+            const startX = 50;
+            const startY = 80;
+            const spacingX = 60;
+            const spacingY = 40;
+            for (let row = 0; row < INVADER_ROWS; row++) {
+                for (let col = 0; col < INVADER_COLS; col++) {
+                    invaders.push({
+                        x: startX + col * spacingX,
+                        y: startY + row * spacingY,
+                        width: INVADER_WIDTH,
+                        height: INVADER_HEIGHT,
+                        alive: true,
+                        row: row,
+                        col: col
+                    });
+                }
+            }
+        }
+        function startGame() {
+            gameState = 'playing';
+            score = 0;
+            lives = 3;
+            level = 1;
+            player.x = 380;
+            createInvaders();
+            bullets = [];
+            invaderDirection = 1;
+            invaderSpeed = 1;
+            document.getElementById('startBtn').classList.add('hidden');
+            document.getElementById('restartBtn').classList.add('hidden');
+            updateStatus('Game started! Destroy all invaders!');
+            gameLoop();
+        }
+        function restartGame() {
+            gameState = 'menu';
+            document.getElementById('startBtn').classList.remove('hidden');
+            document.getElementById('restartBtn').classList.add('hidden');
+            drawInitialScreen();
+            updateStatus('Game ready! Click START GAME');
+        }
+        function shoot() {
+            const now = Date.now();
+            if (now - player.lastShot < player.shootDelay) return;
+            player.lastShot = now;
+            bullets.push({
+                x: player.x + player.width/2 - 2,
+                y: player.y,
+                width: 4,
+                height: 10
+            });
+        }
+        function update() {
+            if (gameState !== 'playing') return;
+            // Player movement
+            if (keys['ArrowLeft'] || keys['KeyA']) {
+                player.x = Math.max(0, player.x - player.speed);
+            }
+            if (keys['ArrowRight'] || keys['KeyD']) {
+                player.x = Math.min(canvas.width - player.width, player.x + player.speed);
+            }
+            // Update bullets
+            bullets = bullets.filter(bullet => {
+                bullet.y -= 8;
+                return bullet.y > -20;
+            });
+            // Update invaders
+            updateInvaders();
+            // Check collisions
+            checkCollisions();
+            // Check win/lose conditions
+            checkGameConditions();
+        }
+        function updateInvaders() {
+            const aliveInvaders = invaders.filter(inv => inv.alive);
+            if (aliveInvaders.length === 0) return;
+            const rightmost = Math.max(...aliveInvaders.map(inv => inv.x + inv.width));
+            const leftmost = Math.min(...aliveInvaders.map(inv => inv.x));
+            let shouldDrop = false;
+            if ((rightmost >= canvas.width - 50 && invaderDirection > 0) ||
+                (leftmost <= 50 && invaderDirection < 0)) {
+                shouldDrop = true;
+            }
+            if (shouldDrop) {
+                invaderDirection *= -1;
+                aliveInvaders.forEach(invader => {
+                    invader.y += invaderDropDistance;
+                });
+                invaderSpeed += 0.1;
+            } else {
+                aliveInvaders.forEach(invader => {
+                    invader.x += invaderSpeed * invaderDirection;
+                });
+            }
+        }
+        function checkCollisions() {
+            bullets.forEach((bullet, bulletIndex) => {
+                invaders.forEach(invader => {
+                    if (invader.alive &&
+                        bullet.x < invader.x + invader.width &&
+                        bullet.x + bullet.width > invader.x &&
+                        bullet.y < invader.y + invader.height &&
+                        bullet.y + bullet.height > invader.y) {
+                        invader.alive = false;
+                        bullets.splice(bulletIndex, 1);
+                        score += 10 * level;
+                        updateHUD();
+                        createExplosion(invader.x + invader.width/2, invader.y + invader.height/2);
+                    }
+                });
+            });
+        }
+        function createExplosion(x, y) {
+            ctx.save();
+            ctx.fillStyle = '#ff6600';
+            ctx.beginPath();
+            ctx.arc(x, y, 15, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = '#ffff00';
+            ctx.beginPath();
+            ctx.arc(x, y, 8, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+        }
+        function checkGameConditions() {
+            const aliveInvaders = invaders.filter(inv => inv.alive);
+            if (aliveInvaders.length === 0) {
+                levelComplete();
+                return;
+            }
+            const bottomInvader = Math.max(...aliveInvaders.map(inv => inv.y));
+            if (bottomInvader >= canvas.height - 100) {
+                gameOver();
+                return;
+            }
+        }
+        function levelComplete() {
+            updateStatus(`Level ${level} complete!`);
+            level++;
+            createInvaders();
+            updateHUD();
+        }
+        function gameOver() {
+            gameState = 'gameover';
+            updateStatus(`GAME OVER! Final Score: ${score}`);
+            document.getElementById('restartBtn').classList.remove('hidden');
+        }
+        function draw() {
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            drawStars();
+            if (gameState === 'playing') {
+                drawPlayer();
+                drawInvaders();
+                drawBullets();
+            }
+        }
+        function drawStars() {
+            ctx.fillStyle = '#003300';
+            for (let i = 0; i < 30; i++) {
+                const x = (i * 47) % canvas.width;
+                const y = (i * 83) % canvas.height;
+                ctx.fillRect(x, y, 1, 1);
+            }
+        }
+        function drawPlayer() {
+            if (sprites.loaded && sprites.ship) {
+                ctx.drawImage(sprites.ship, player.x, player.y, player.width, player.height);
+            } else {
+                // Fallback to red triangle
+                ctx.fillStyle = '#ff0000';
+                ctx.beginPath();
+                ctx.moveTo(player.x + player.width/2, player.y);
+                ctx.lineTo(player.x, player.y + player.height);
+                ctx.lineTo(player.x + player.width, player.y + player.height);
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+        function drawInvaders() {
+            invaders.forEach(invader => {
+                if (invader.alive) {
+                    if (sprites.loaded && sprites.invader) {
+                        ctx.drawImage(sprites.invader, invader.x, invader.y, invader.width, invader.height);
+                    } else {
+                        // Fallback to green rectangle
+                        ctx.fillStyle = '#00ff00';
+                        ctx.fillRect(invader.x, invader.y, invader.width, invader.height);
+                        ctx.fillStyle = '#008800';
+                        ctx.fillRect(invader.x + 5, invader.y + 5, invader.width - 10, invader.height - 10);
+                    }
+                }
+            });
+        }
+        function drawBullets() {
+            if (sprites.loaded && sprites.bullet) {
+                bullets.forEach(bullet => {
+                    ctx.drawImage(sprites.bullet, bullet.x, bullet.y, bullet.width, bullet.height);
+                });
+            } else {
+                // Fallback to yellow rectangles
+                ctx.fillStyle = '#ffff00';
+                bullets.forEach(bullet => {
+                    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
+                });
+            }
+        }
+        function updateHUD() {
+            document.getElementById('score').textContent = score.toString().padStart(6, '0');
+            document.getElementById('lives').textContent = lives;
+            document.getElementById('level').textContent = level;
+        }
+        function updateStatus(message) {
+            document.getElementById('status').textContent = message;
+            console.log(message);
+        }
+        function gameLoop() {
+            if (gameState !== 'playing') return;
+            update();
+            draw();
+            requestAnimationFrame(gameLoop);
+        }
+        // Initialize game
+        init();
+        updateHUD();
+    </script>
+</body>
+</html>