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

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

1 December 2024

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

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>

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

अनुशंसित

कॉल एक्शन बटन होवर प्रभाव

साइड मेनू कोड HTML

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

HTML

CSS

JS

अनुशंसित

कॉल एक्शन बटन होवर प्रभाव

साइड मेनू कोड HTML

अलेजांद्रोकुन्द्राह द्वारा लिखित एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS