Un código de Maxi-Digital

477 Maxi-Digital

Abrir en el editor Publica tu código

Recomendado

6 February 2025

Barra de navegación responsiva premium de CodePen Home

12 January 2025

Un código de Mikeykun

25 July 2025

Plantilla de página de inicio de sesión HTML

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galactic Defender</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: #000;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

#gameContainer {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

#gameCanvas {
            background: radial-gradient(circle at center, #000 60%, #1a1a2e);
        }

#hud {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #fff;
            font-size: 1.5em;
            text-shadow: 0 0 10px #00f7ff;
            z-index: 2;
        }

#gameOver {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ff0000;
            font-size: 3em;
            text-align: center;
            text-shadow: 0 0 20px #ff0000;
            z-index: 3;
        }

#restartBtn {
            margin-top: 20px;
            padding: 15px 30px;
            font-size: 1.2em;
            background: rgba(0, 231, 255, 0.3);
            border: 2px solid #00e7ff;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
        }

#restartBtn:hover {
            background: rgba(0, 231, 255, 0.6);
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <canvas id="gameCanvas"></canvas>
        <div id="hud">Score: <span id="score">0</span></div>
        <div id="gameOver">
            Game Over!<br>
            <button id="restartBtn">Rejouer</button>
        </div>
    </div>

// Configuration
        let score = 0;
        let isGameOver = false;
        const player = {
            x: 400,
            y: 500,
            size: 30,
            speed: 8,
            color: '#00f7ff'
        };

let bullets = [];
        let enemies = [];
        let particles = [];
        let lastEnemySpawn = 0;
        let keys = {};

// Initialisation
        function init() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            window.addEventListener('keydown', e => keys[e.key] = true);
            window.addEventListener('keyup', e => keys[e.key] = false);
            restartBtn.addEventListener('click', restartGame);
            
            gameLoop();
        }

// Boucle principale
        function gameLoop() {
            if(isGameOver) return;

ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            handleInput();
            updatePlayer();
            updateBullets();
            updateEnemies();
            spawnEnemies();
            updateParticles();
            
            checkCollisions();
            requestAnimationFrame(gameLoop);
        }

function updateBullets() {
            bullets.forEach((bullet, index) => {
                bullet.y += bullet.speed;
                ctx.beginPath();
                ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
                ctx.fillStyle = bullet.color;
                ctx.fill();
                
                if(bullet.y < 0) bullets.splice(index, 1);
            });
        }

function spawnEnemies() {
            if(Date.now() - lastEnemySpawn > 2000) {
                enemies.push({
                    x: Math.random() * (canvas.width - 30),
                    y: -30,
                    size: 25,
                    speed: 2,
                    color: '#ff0000'
                });
                lastEnemySpawn = Date.now();
            }
        }

function updateEnemies() {
            enemies.forEach((enemy, index) => {
                enemy.y += enemy.speed;
                ctx.beginPath();
                ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2);
                ctx.fillStyle = enemy.color;
                ctx.fill();
                
                if(enemy.y > canvas.height + 30) enemies.splice(index, 1);
            });
        }

function updateParticles() {
            particles.forEach((p, index) => {
                p.x += p.velocity.x;
                p.y += p.velocity.y;
                p.alpha -= 0.02;

ctx.beginPath();
                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(0, 247, 255, ${p.alpha})`;
                ctx.fill();

if(p.alpha <= 0) particles.splice(index, 1);
            });
        }

function checkCollisions() {
            enemies.forEach((enemy, eIndex) => {
                bullets.forEach((bullet, bIndex) => {
                    const dx = enemy.x - bullet.x;
                    const dy = enemy.y - bullet.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

if(distance < enemy.size + bullet.size) {
                        createExplosion(enemy.x, enemy.y);
                        enemies.splice(eIndex, 1);
                        bullets.splice(bIndex, 1);
                        score += 100;
                        scoreElement.textContent = score;
                    }
                });

const dx = player.x - enemy.x;
                const dy = player.y - enemy.y;
                if(Math.sqrt(dx * dx + dy * dy) < player.size + enemy.size) {
                    gameOver();
                }
            });
        }

function gameOver() {
            isGameOver = true;
            gameOverScreen.style.display = 'block';
        }

function restartGame() {
            player.x = canvas.width / 2;
            enemies = [];
            bullets = [];
            particles = [];
            score = 0;
            scoreElement.textContent = score;
            isGameOver = false;
            gameOverScreen.style.display = 'none';
            gameLoop();
        }

window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

init();
    </script>
</body>
</html>

Un código de Maxi-Digital

Recomendado

Barra de navegación responsiva premium de CodePen Home

Un código de Mikeykun

Plantilla de página de inicio de sesión HTML

HTML

CSS

JS

Recomendado

Barra de navegación responsiva premium de CodePen Home

Un código de Mikeykun

Plantilla de página de inicio de sesión HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS