Un code de Maxi-Digital

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 March 2024

Tableau de bord d'administration d'AdminHub

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 code de Maxi-Digital

Recommandé

Code HTML du chronomètre

Un code par anhtuanle2004yst

Tableau de bord d'administration d'AdminHub

HTML

CSS

JS

Recommandé

Code HTML du chronomètre

Un code par anhtuanle2004yst

Tableau de bord d'administration d'AdminHub

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS