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

अनुशंसित

6 January 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>

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

अनुशंसित

एक आधुनिक होम पेज

मूविंग कार्ड सीएसएस कोड

CSS आई लोडर एनीमेशन HTML कोड

HTML

CSS

JS

अनुशंसित

एक आधुनिक होम पेज

मूविंग कार्ड सीएसएस कोड

CSS आई लोडर एनीमेशन HTML कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS