Modern Space Invaders by @Turri92 - Codewith.it

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

Referenze

<h6>Titolo di intestazione di sesto livello
<td>Definisce una cella di una tabella HTML.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
animationDefinisce i parametri dell'animazione di un elemento o selettore

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Pagina di esempio

esercitazione 7

Federica Bachini Lab

esercitazione 6

Titolo della pagina

educazione civica info

DEMO: For Loop 2

disney plus project

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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();
}