Neon Strike : Code source du jeu de tir HTML5

674 codex

Ouvrir dans l'éditeur Publiez votre code

Neon Strike : Code source du jeu de tir HTML5

Recommandé

11 January 2024

Écran de chargement avec points

28 February 2023

Animation de texte avec glitches

22 October 2025

Modèle HTML de cartes de liens pour les réseaux sociaux

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>

CSS