Neon Strike : Code source du jeu de tir HTML5

31 codex

Ouvrir dans l'éditeur Video Publiez votre code

Neon Strike : Code source du jeu de tir HTML5

Recommandé

6 January 2026

Tremblement de terre III

9 September 2024

Générateur de code QR en JavaScript

3 February 2026

Exemple de formulaire de connexion HTML

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>

Neon Strike : Code source du jeu de tir HTML5

Recommandé

Tremblement de terre III

Générateur de code QR en JavaScript

Exemple de formulaire de connexion HTML

HTML

CSS

JS

Recommandé

Tremblement de terre III

Générateur de code QR en JavaScript

Exemple de formulaire de connexion HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS