Modern Space Invaders by @Turri92 - Codewith.it

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

References

novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
<h4>Titolo di intestazione di quarto livello
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<map>Inserisce immagini mappa cliccabili in un documento
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Users

Log in to search for users

Explore

Find inspiration

ARKO - Artificial Intelligence Kno

Pagina Test-A D&D story

pagina America(2)

HTML Schwabisch

Media ponderata

Navbar Example 3

Pascal Landriscina

venezia esercizio pretest

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