नियॉन स्ट्राइक: HTML5 शूटिंग गेम का स्रोत कोड

29 codex

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

नियॉन स्ट्राइक: HTML5 शूटिंग गेम का स्रोत कोड

अनुशंसित

22 July 2025

कार्ड 3D

5 June 2025

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

16 April 2025

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Strike - Shooting Game</title>
    <style>
        body {
            margin: 0;
            background: #050505;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            background: #000;
            display: block;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            pointer-events: none;
            user-select: none;
        }
        #score {
            font-size: 24px;
            color: #0ff;
            text-shadow: 0 0 10px #0ff;
        }
        #msg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border: 2px solid #0ff;
            display: block;
        }
        button {
            background: #0ff;
            border: none;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 10px;
            font-weight: bold;
        }
        button:hover {
            background: #fff;
        }
    </style>
</head>
<body>

<div id="ui">
        <div id="score">Score: 0</div>
    </div>

<div id="msg">
        <h1 id="title">NEON STRIKE</h1>
        <p>Click to shoot. Don't let them reach the bottom!</p>
        <button onclick="startGame()">START GAME</button>
    </div>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let score = 0;
        let gameActive = false;
        let enemies = [];
        let particles = [];
        let projectiles = [];
        let animationId;

class Player {
            constructor() {
                this.x = canvas.width / 2;
                this.y = canvas.height - 50;
                this.radius = 15;
                this.color = '#0ff';
            }
            draw() {
                ctx.beginPath();
                ctx.moveTo(this.x, this.y - 15);
                ctx.lineTo(this.x - 15, this.y + 15);
                ctx.lineTo(this.x + 15, this.y + 15);
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.shadowBlur = 15;
                ctx.shadowColor = this.color;
                ctx.fill();
            }
        }

class Projectile {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.radius = 4;
                this.color = '#fff';
                this.velocity = 8;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
            update() {
                this.y -= this.velocity;
            }
        }

class Enemy {
            constructor() {
                this.radius = Math.random() * (30 - 10) + 10;
                this.x = Math.random() * (canvas.width - this.radius * 2) + this.radius;
                this.y = -this.radius;
                this.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
                this.velocity = Math.random() * 2 + 1;
            }
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.shadowBlur = 10;
                ctx.shadowColor = this.color;
                ctx.fill();
            }
            update() {
                this.y += this.velocity;
            }
        }

class Particle {
            constructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.radius = Math.random() * 3;
                this.velocity = {
                    x: (Math.random() - 0.5) * 5,
                    y: (Math.random() - 0.5) * 5
                };
                this.alpha = 1;
            }
            draw() {
                ctx.save();
                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }
            update() {
                this.x += this.velocity.x;
                this.y += this.velocity.y;
                this.alpha -= 0.02;
            }
        }

const player = new Player();

function spawnEnemy() {
            if (!gameActive) return;
            enemies.push(new Enemy());
            setTimeout(spawnEnemy, 1000 - (score * 2 > 700 ? 700 : score * 2));
        }

function startGame() {
            score = 0;
            enemies = [];
            projectiles = [];
            particles = [];
            gameActive = true;
            scoreEl.innerHTML = `Score: ${score}`;
            msgBox.style.display = 'none';
            spawnEnemy();
            animate();
        }

function gameOver() {
            gameActive = false;
            cancelAnimationFrame(animationId);
            titleEl.innerText = "GAME OVER";
            msgBox.style.display = 'block';
        }

window.addEventListener('click', (e) => {
            if (gameActive) {
                projectiles.push(new Projectile(player.x, player.y));
            }
        });

window.addEventListener('mousemove', (e) => {
            player.x = e.clientX;
        });

function animate() {
            animationId = requestAnimationFrame(animate);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            player.draw();

particles.forEach((particle, index) => {
                if (particle.alpha <= 0) {
                    particles.splice(index, 1);
                } else {
                    particle.update();
                    particle.draw();
                }
            });

projectiles.forEach((p, index) => {
                p.update();
                p.draw();
                if (p.y < 0) projectiles.splice(index, 1);
            });

enemies.forEach((enemy, index) => {
                enemy.update();
                enemy.draw();

// Lose condition
                if (enemy.y - enemy.radius > canvas.height) {
                    gameOver();
                }

// Collision Detection
                projectiles.forEach((p, pIndex) => {
                    const dist = Math.hypot(p.x - enemy.x, p.y - enemy.y);
                    if (dist - enemy.radius - p.radius < 1) {
                        // Explosion
                        for (let i = 0; i < 15; i++) {
                            particles.push(new Particle(enemy.x, enemy.y, enemy.color));
                        }
                        
                        score += 10;
                        scoreEl.innerHTML = `Score: ${score}`;
                        
                        setTimeout(() => {
                            enemies.splice(index, 1);
                            projectiles.splice(pIndex, 1);
                        }, 0);
                    }
                });
            });
        }

window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            player.y = canvas.height - 50;
        });
    </script>
</body>
</html>

नियॉन स्ट्राइक: HTML5 शूटिंग गेम का स्रोत कोड

अनुशंसित

कार्ड 3D

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

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

HTML

CSS

JS

अनुशंसित

कार्ड 3D

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

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS