Modern Space Invaders by @Turri92 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<title>Definisce il titolo della pagina web.
downloadConsente di scaricare file al click di collegamento ipertestuale.
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
widthImposta la larghezza di un elemento HTML
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<map>Inserisce immagini mappa cliccabili in un documento

Users

Log in to search for users

Explore

Find inspiration

DEMO: For Loop 2

countdown passaporto 2

Le meraviglie d\\

Esercitazione 2

Prep. Esame pt.3

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Space Invaders</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="gameUI">
        <div id="lives">Lives: 4</div>
        <div id="powerup">Power-up: None</div>
        <div id="letters">Letters: </div>
        <div id="score">Score: 0</div>
    </div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>

body {
    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

canvas {
    display: block;
    background: #000;
    margin: 0 auto;
}

#gameUI {
    position: absolute;
    top: 10px;
    width: 100%;
    color: white;
    text-align: center;
}

#gameUI div {
    display: inline-block;
    margin: 0 20px;
}

window.onload = function() {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    let score = 0;
    let lives = 4;
    let powerup = 'None';
    let collectedLetters = '';
    let spaceship = { x: canvas.width / 2 - 25, y: canvas.height - 60, width: 50, height: 30, speed: 7, bullets: [], rapidFire: false };
    let enemies = [];
    let collectibles = [];
    let letters = ['S', 'K', 'I', 'N'];
    let lettersDropped = false;

    // Caricamento delle immagini
    const images = {
        spaceship: new Image(),
        spaceshipRapid: new Image(),
        enemy: new Image(),
        powerup: new Image(),
        letter: new Image()
    };

    images.spaceship.src = 'images/spaceship.png';
    images.spaceshipRapid.src = 'images/spaceship_rapid.png';
    images.enemy.src = 'images/enemy.png';
    images.powerup.src = 'images/powerup.png';
    images.letter.src = 'images/letter.png';

    images.spaceship.onload = images.spaceshipRapid.onload = images.enemy.onload = images.powerup.onload = images.letter.onload = function() {
        console.log('Images loaded');
        updateGame();
    }

    // Funzione per aggiornare l'interfaccia utente
    function updateUI() {
        document.getElementById('lives').innerText = `Lives: ${lives}`;
        document.getElementById('powerup').innerText = `Power-up: ${powerup}`;
        document.getElementById('letters').innerText = `Letters: ${collectedLetters}`;
        document.getElementById('score').innerText = `Score: ${score}`;
    }

    // Funzione per disegnare la navicella spaziale
    function drawSpaceship() {
        const spaceshipImage = spaceship.rapidFire ? images.spaceshipRapid : images.spaceship;
        ctx.drawImage(spaceshipImage, spaceship.x, spaceship.y, spaceship.width, spaceship.height);
    }

    // Funzione per muovere la navicella spaziale
    function moveSpaceship() {
        if (keys['ArrowLeft'] && spaceship.x > 0) {
            spaceship.x -= spaceship.speed;
        }
        if (keys['ArrowRight'] && spaceship.x < canvas.width - spaceship.width) {
            spaceship.x += spaceship.speed;
        }
    }

    // Gestione dei tasti premuti
    let keys = {};
    document.addEventListener('keydown', (e) => {
        keys[e.key] = true;
        if (e.key === ' ') {
            shootBullet();
        }
    });
    document.addEventListener('keyup', (e) => {
        keys[e.key] = false;
    });

    // Funzione per sparare proiettili
    function shootBullet() {
        spaceship.bullets.push({ x: spaceship.x + spaceship.width / 2 - 2.5, y: spaceship.y, width: 5, height: 10, speed: 7 });
    }

    // Funzione per disegnare proiettili
    function drawBullets() {
        ctx.fillStyle = 'red';
        spaceship.bullets.forEach((bullet, index) => {
            bullet.y -= bullet.speed;
            ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
            if (bullet.y < 0) {
                spaceship.bullets.splice(index, 1);
            }
        });
    }

    // Funzione per generare nemici
    function generateEnemies() {
        if (Math.random() < 0.05) {
            enemies.push({ x: Math.random() * canvas.width, y: 0, width: 40, height: 20, speed: 2 });
        }
    }

    // Funzione per disegnare nemici
    function drawEnemies() {
        enemies.forEach((enemy, index) => {
            enemy.y += enemy.speed;
            ctx.drawImage(images.enemy, enemy.x, enemy.y, enemy.width, enemy.height);
            if (enemy.y > canvas.height) {
                enemies.splice(index, 1);
            }
        });
    }

    // Funzione per generare collezionabili
    function generateCollectibles() {
        if (!lettersDropped && Math.random() < 0.01) {
            letters.forEach(letter => {
                collectibles.push({ x: Math.random() * canvas.width, y: 0, width: 20, height: 20, speed: 2, type: 'letter', value: letter });
            });
            lettersDropped = true;
        }
        if (Math.random() < 0.01) {
            collectibles.push({ x: Math.random() * canvas.width, y: 0, width: 20, height: 20, speed: 2, type: 'powerup', value: 'Speed' });
        }
    }

    // Funzione per disegnare collezionabili
    function drawCollectibles() {
        collectibles.forEach((item, index) => {
            const itemImage = item.type === 'letter' ? images.letter : images.powerup;
            ctx.drawImage(itemImage, item.x, item.y, item.width, item.height);
            item.y += item.speed;
            if (item.y > canvas.height) {
                collectibles.splice(index, 1);
            }
        });
    }

    // Funzione per controllare le collisioni
    function checkCollisions() {
        // Collisioni proiettili-nemici
        spaceship.bullets.forEach((bullet, bulletIndex) => {
            enemies.forEach((enemy, enemyIndex) => {
                if (bullet.x < enemy.x + enemy.width &&
                    bullet.x + bullet.width > enemy.x &&
                    bullet.y < enemy.y + enemy.height &&
                    bullet.y + bullet.height > enemy.y) {
                    enemies.splice(enemyIndex, 1);
                    spaceship.bullets.splice(bulletIndex, 1);
                    score += 10;
                    updateUI();
                }
            });
        });

        // Collisioni navicella-nemici
        enemies.forEach((enemy, enemyIndex) => {
            if (spaceship.x < enemy.x + enemy.width &&
                spaceship.x + spaceship.width > enemy.x &&
                spaceship.y < enemy.y + enemy.height &&
                spaceship.y + spaceship.height > enemy.y) {
                enemies.splice(enemyIndex, 1);
                lives -= 1;
                updateUI();
                if (lives === 0) {
                    alert("Game Over!");
                    document.location.reload();
                }
            }
        });

        // Collisioni navicella-collezionabili
        collectibles.forEach((item, itemIndex) => {
            if (spaceship.x < item.x + item.width &&
                spaceship.x + spaceship.width > item.x &&
                spaceship.y < item.y + item.height &&
                spaceship.y + spaceship.height > item.y) {
                if (item.type === 'powerup') {
                    powerup = item.value;
                } else if (item.type === 'letter') {
                    collectedLetters += item.value;
                    if (collectedLetters.length === letters.length) {
                        score += 1000;
                        enemies = [];
                        spaceship.rapidFire = true;
                        powerup = 'Rapid Fire';
                    }
                }
                collectibles.splice(itemIndex, 1);
                updateUI();
            }
        });
    }

    // Funzione per aggiornare e disegnare il gioco
    function updateGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawSpaceship();
        drawBullets();
        drawEnemies();
        drawCollectibles();
        moveSpaceship();
        generateEnemies();
        generateCollectibles();
        checkCollisions();
        requestAnimationFrame(updateGame);
    }

    // Inizializzazione del gioco
    updateUI();
}