A Flappy bird game with Mario's game

Click here for free DL of the app version that can save data.

No:8871

616

←

Prev Next

→

A Flappy bird game with Mario
Developer User4255｜Date and time 23/7/19 3:40:21
Build time 30.514 sec｜Game capacity 3.687KB｜

Script

Dans cet exemple, j'ai créé un jeu Flappy Bird avec Mario en utilisant un seul fichier HTML. Le jeu utilise des pictogrammes pour représenter les éléments du jeu, tels que Mario, les tuyaux et le fond. Le joueur contrôle Mario en appuyant sur n'importe quelle touche pour le faire sauter et éviter les tuyaux. Le score est affiché en haut de l'écran et le jeu se termine si Mario entre en collision avec un tuyau ou touche le bas de l'écran. Après une perte, un message est affiché indiquant le score final et le jeu redémarre. Pour exécuter ce jeu, vous devrez remplacer les lignes de code qui chargent les images (emozi_chicken.png, mario.png, pipe_top.png, pipe_bottom.png) par les liens réels vers ces images. Vous pouvez également personnaliser le jeu en modifiant les variables définies au début, telles que la gravité, la taille des tuyaux, etc.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird avec Mario</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Initialisation du canvas
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Chargement des images
        var background = new Image();
        background.src = "background.png";

var mario = new Image();
        mario.src = "mario.png";

var pipeTop = new Image();
        pipeTop.src = "pipe_top.png";

var pipeBottom = new Image();
        pipeBottom.src = "pipe_bottom.png";

// Variables du jeu
        var gravity = 1.2;
        var marioX = 10;
        var marioY = 150;
        var score = 0;

var gap = 100;
        var pipeWidth = 52;
        var pipeHeight = 400;
        var pipeMargin = 100;
        var pipeX = canvas.width;

// Gestion des touches
        document.addEventListener("keydown", jump);

function jump() {
            marioY -= 30;
        }

// Fonction de dessin
        function draw() {
            // Dessin du background
            context.drawImage(background, 0, 0);

// Dessin des tuyaux
            context.drawImage(pipeTop, pipeX, 0);
            context.drawImage(pipeBottom, pipeX, pipeHeight + gap);

// Dessin du personnage
            context.drawImage(mario, marioX, marioY);

// Mise à jour de la position des tuyaux
            pipeX -= 2;

// Vérification des collisions
            if (
                (marioX + mario.width >= pipeX && marioX <= pipeX + pipeWidth && (marioY <= pipeHeight || marioY + mario.height >= pipeHeight + gap)) ||
                marioY + mario.height >= canvas.height
            ) {
                // Le joueur a perdu, afficher le score final et redémarrer le jeu
                alert("Game Over! Votre score final est : " + score);
                score = 0;
                resetGame();
            }

// Vérification du passage d'un tuyau
            if (pipeX + pipeWidth < marioX) {
                score++;
            }

// Affichage du score
            context.fillStyle = "#000";
            context.font = "20px Verdana";
            context.fillText("Score: " + score, 10, 30);

// Appel récursif pour animer le jeu
            requestAnimationFrame(draw);
        }

// Fonction pour réinitialiser le jeu
        function resetGame() {
            marioY = 150;
            pipeX = canvas.width;
        }

// Lancement du jeu
        draw();
    </script>
</body>
</html>

Pour exécuter ce jeu, vous devrez remplacer les lignes de code qui chargent les images (background.png, mario.png, pipe_top.png, pipe_bottom.png) par les liens réels vers ces images. Vous pouvez également personnaliser le jeu en modifiant les variables définies au début, telles que la gravité, la taille des tuyaux, etc.