sans-titre

Pasted Sep 22, 2026, 7:24 PM1 file122 lines

Scan to open on your phone

Point a camera at the QR code - it opens this exact paste, no app needed.

https://codepastes.com/zzgtcwh49ypx8kd3
sans-titre
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Premier Jeu Vidéo</title>
    <style>
        body {
            margin: 0;
            background: #222;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            font-family: sans-serif;
        }
        canvas {
            border: 4px solid #fff;
            background: #000;
        }
    </style>
</head>
<body>

    <canvas id="jeuCanvas" width="400" height="500"></canvas>

<script>
    const canvas = document.getElementById("jeuCanvas");
    const ctx = canvas.getContext("2d");

    // Propriétés du joueur (Carré bleu)
    const joueur = {
        x: 180,
        y: 440,
        taille: 40,
        vitesse: 7,
        couleur: "#00BCFF"
    };

    // Propriétés de l'ennemi (Bloc rouge)
    const ennemi = {
        x: Math.random() * (canvas.width - 40),
        y: 0,
        taille: 40,
        vitesse: 4,
        couleur: "#FF4136"
    };

    let score = 0;
    let touches = {};

    // Détection des touches du clavier
    window.addEventListener("keydown", (e) => touches[e.code] = true);
    window.addEventListener("keyup", (e) => touches[e.code] = false);

    // Boucle principale du jeu
    function mettreAJour() {
        // Déplacement du joueur
        if (touches["ArrowLeft"] && joueur.x > 0) {
            joueur.x -= joueur.vitesse;
        }
        if (touches["ArrowRight"] && joueur.x < canvas.width - joueur.taille) {
            joueur.x += joueur.vitesse;
        }

        // Déplacement de l'ennemi
        ennemi.y += ennemi.vitesse;

        // Si l'ennemi sort de l'écran, on réinitialise sa position et on augmente le score
        if (ennemi.y > canvas.height) {
            ennemi.y = 0;
            ennemi.x = Math.random() * (canvas.width - ennemi.taille);
            score++;
            ennemi.vitesse += 0.3; // Le jeu accélère progressivement !
        }

        // Détection des collisions (Hitbox)
        if (
            joueur.x < ennemi.x + ennemi.taille &&
            joueur.x + joueur.taille > ennemi.x &&
            joueur.y < ennemi.y + ennemi.taille &&
            joueur.y + joueur.taille > ennemi.y
        ) {
            // Game Over : Réinitialisation
            alert("Game Over ! Votre score : " + score);
            score = 0;
            ennemi.vitesse = 4;
            ennemi.y = 0;
            ennemi.x = Math.random() * (canvas.width - ennemi.taille);
            joueur.x = 180;
        }

        dessiner();
        requestAnimationFrame(mettreAJour);
    }

    // Affichage graphique
    function dessiner() {
        // Effacer l'écran précédent
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Dessiner le joueur
        ctx.fillStyle = joueur.couleur;
        ctx.fillRect(joueur.x, joueur.y, joueur.taille, joueur.taille);

        // Dessiner l'ennemi
        ctx.fillStyle = ennemi.couleur;
        ctx.fillRect(ennemi.x, ennemi.y, ennemi.taille, ennemi.taille);

        // Dessiner le score
        ctx.fillStyle = "#FFF";
        ctx.font = "20px sans-serif";
        ctx.fillText("Score : " + score, 15, 30);
    }

    // Lancer le jeu
    mettreAJour();
</script>

</body>
</html>

3,295 chars · codepastes.com