Modern Space Invaders by @Turri92 - Codewith.it

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

Referenze

<canvas>Tag per disegnare grafica dinamica su pagine web.
<h1>Titolo di intestazione di primo livello
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<title>Definisce il titolo della pagina web.
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Test dell identikit

Esercitazione 3 MORRA

Sito Progetto Italiano

Esercizio 1 - 27/11

FORM PROF DA PROVARE

Il mondo della tecnologia

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