मैक्सी-डिजिटल द्वारा एक कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

29 May 2025

डार्क मोड वेबसाइट फ़ुटर HTML CSS कोड

4 June 2025

<!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>

मैक्सी-डिजिटल द्वारा एक कोड

अनुशंसित

मेटे का एक कोड

डार्क मोड वेबसाइट फ़ुटर HTML CSS कोड

Lanayassine8 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

मेटे का एक कोड

डार्क मोड वेबसाइट फ़ुटर HTML CSS कोड

Lanayassine8 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS