Tutoriel de jeu v4.0f

Ensuite, nous allons charger les sprites. Il nous en faut quatre : arrière-plan, joueur, goody et estampe gagnant.

Parce que nous traitons des images, nous avons besoin d’un système qui ne placera l’image qu’une fois chargée en mémoire. Nous avons donc besoin d’une variable pour chaque image qui n’est vraie que lorsque l’image est prête. Ce sont bgReady, winReady, etc. Cela garantit que nous ne dessinons pas une image cassée ou un demi-sprite.

//Charger les sprites
// Image d'arrière-plan
var bgReady = false;
var bgImage = new Image();
bgImage.src = "images/background.png";
bgImage.onload = function () {
    bgReady = true; 
};

// Estampe gagnant
var winReady = false;
var winImage = new Image(); 
winImage.src = "images/win.png"; 
winImage.onload = function () {
    winReady = true; 
};

// Image du joueur
var playerReady = false;
var playerImage = new Image(); 
playerImage.src = "images/player.png"; 
playerImage.onload = function () {
    playerReady = true; 
};

// Image des goodies
var goodyReady = false;
var goodyImage = new Image(); 
goodyImage.src = "images/goody.png"; 
goodyImage.onload = function () {
    goodyReady = true; 
};

Nous aurons maintenant besoin de quelques fonctions.

Tout d’abord, une fonction de boucle qui sera appelée en permanence pour maintenir le jeu en marche : nous l’appelons main(). Il s'agit d'une fonction importante que nous construirons progressivement tout au long du tutoriel. Elle contiendra tout ce qui doit se passer pendant que le jeu se joue. Mais à ce stade, tout ce qu'elle fera, c'est appeler la fonction render() pour dessiner les éléments. (Nous définissons cette fonction render() à l’étape suivante.)

Notez que la fonction appelle aussi la commande pour activer la boucle requestAnimationFrame();.

// La boucle de jeu principale 
var main = function () {
    render();
    window.requestAnimationFrame(main); 
};

Nous avons besoin de la fonction render() appelée par main(). Ceci est utilisé pour dessiner les éléments.

Pour l'instant, nous n'avons que le joueur et un goody, et nous les plaçons en position statique sur la toile. Nous voulons juste être sûrs que nos photos se chargent correctement. Cette fonction dessinera également une étiquette de texte que nous utiliserons pour tester et suivre nos éléments ultérieurement.

Notez que nous vérifions que les images sont chargées (en utilisant bgReady, playerReady, etc.) avant de les dessiner sur le canevas. Cela évite les erreurs et les problèmes.

// Dessinez le tout
var render = function () {
    if (bgReady) {
        ctx.fillStyle = ctx.createPattern(bgImage, 'repeat');
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
    if (playerReady) {
        ctx.drawImage(playerImage, 100, 100);
    }
    if (goodyReady) {
        ctx.drawImage(goodyImage, 200, 200);
    }

    //Label
    ctx.fillStyle = "rgb(250, 250, 250)";
    ctx.fillText("Game on!", 32, 32);
};

La dernière chose dont nous avons besoin avant de tester : activer la boucle. Cette commande doit être écrite à la fin du fichier. Elle est exécutée une fois que tout le reste est chargé en mémoire et elle démarre le jeu.

Vous remarquerez que c'est la même commande que celle que nous avons écrite dans main(). Mais c'est la première fois que nous l'appelons pour commencer le jeu. Ensuite, elle sera appelée environ 60 fois par seconde. Cela signifie que notre jeu roule idéalement à 60 images par seconde (FPS).

//Démarrer le jeu
window.requestAnimationFrame(main);

Il est maintenant temps de tester l’état A !

Ouvrez le fichier index.html dans un navigateur pour voir si cela fonctionne. Vous devriez voir le joueur vert et un goody rouge.

Au lieu de commencer le jeu avec la boucle principale tout de suite, nous ajouterons une fonction init() qui préparera l’espace de jeu avant le début pour placer les objets au bon endroit. Nous plaçons tout d’abord le joueur au milieu et les goodies au hasard dans le canvas.

Notez les références à x et y. Ce sont les coordonnées d’objets sur un plan cartésien. Le x est horizontal, et le y est vertical. Vous devriez déjà être au courant de cela — Maths du secondaire.

Localisation du code : Vous pouvez écrire cette fonction à la suite des objets de l'étape précédente, avant la fonction main().

//Définir l'état initial
var init = function () {
    //Mettre le joueur au centre
    player.x = (canvas.width - player.width) / 2; 
    player.y = (canvas.height - player.height) / 2;

    //Placez des goodies à des endroits aléatoires 
    for (var i in goodies) {
        goodies[i].x = (Math.random() * (canvas.width - goodies[i].width));
        goodies[i].y = (Math.random() * (canvas.height - goodies[i].height));
    }
};

Maintenant que nous avons déterminé l'état initial de notre espace de jeu, nous devons mettre à jour la fonction render() pour peindre les images de sprites aux bons endroits. Cela permettra également de produire l’illusion du mouvement, plus tard puisque render() est appelé à chaque boucle.

Localisation du code : Remplacer les blocs playerReady et goodyReady dans votre fonction render() :

if (playerReady) {
    ctx.drawImage(playerImage, player.x, player.y);
}
if (goodyReady) {
    for (var i in goodies) {
        ctx.drawImage(goodyImage, goodies[i].x, goodies[i].y);
    }
}

Une dernière chose : nous devons appeler le init() juste avant de démarrer la boucle. Comme ça le statut inital de l’espace de jeu est an place avant de démarrer le jeu.

Localisation du code : En bas du fichier, juste au-dessus de la dernière ligne, ajoutez :

init();

Test de l’état B !

Vous devriez voir le joueur au centre et trois goodies distribués aléatoirement sur le canvas. Si vous actualisez, les goodies apparaîtront à différents endroits.

Notez que ce code est simple et peut être un peu bogué. Il est possible que vous ne voyiez qu'un ou deux goodies de temps en temps. Cela se produit lorsqu'un goody est placé au hasard par init() en collision avec le joueur déclenchant immédiatement son retrait. Ne t'inquiète pas pour ça.

Maintenant, nous pouvons écrire le code qui gère le clavier.

Nous créons un auditeur d'événement (event listener) qui se déclenchera lorsqu’une touche du clavier est enfoncée. Les chiffres keyCode font référence à chaque touche : 38 est la flèche vers le haut, 40 est la flèche vers le bas, etc.

Lorsque l'utilisateur appuie sur une touche fléchée, le joueur commence à se déplacer dans cette direction à la vitesse définie dans l'objet player (5 pixels).

Notez que, dans ce tutoriel, le joueur commence à bouger dès que vous appuyez sur la touche, et il continue de bouger tout seul dans cette direction jusqu’à ce qu’il frappe le bord du canvas. (Nous verrons ça plus tard.) Le movement ne s'arrête pas lorsque vous relâchez la touche. Il s’agit de rendre l’interface mobile plus facile à gérer. Par contre, il est possible d’arrêter le joueur avec la barre d'espace (keyCode 32).

Localisation du code : Mettre ce bloc de code à la suite du précedent.

// Gérer les commandes du clavier
addEventListener(« keydown », fonction (e) {
    //Touches
    if (e.keyCode == 38) { // HAUT
        vX = 0;
        vY = -player.speed;
    }
    if (e.keyCode == 40) { // BAS
        vX = 0;
        vY = player.speed;
    }
    if (e.keyCode == 37) { // GAUCHE
        vX = -player.speed;
        vY = 0;
    }
    if (e.keyCode == 39) { // DROITE
        vX = player.speed;
        vY = 0;
    }
    if (e.keyCode == 32) { // ARRÊT barre d’espace
        vX = 0;
        vY = 0;
    }
}, false);

Ensuite, nous devons ajouter les commandes pour les événements tactiles pour permettre de jouer sur mobile. Dans ce cas, nous nous référerons à l'attribut ID des boutons dans le code HTML pour trouver la cible tactile. (Voir index.html pour référence.)

Le target fait référence à l'élément qui a été touché par l'utilisateur pour déclencher l’événement touchstart.

Localisation du code : Encore mettre ce bloc à la suite du précedent.

// Gérer les commandes tactiles
addEventListener("touchstart", function (e) {
    if (e.target.id == "uArrow") { // HAUT
        vX = 0;
        vY = -player.speed;
    }
    else if (e.target.id == "dArrow") { // BAS
        vX = 0;
        vY = player.speed;
    }
    else if (e.target.id == "lArrow") { // GAUCHE
        vX = -player.speed;
        vY = 0;
    }
    else if (e.target.id == "rArrow") { //DROIT
        vX = player.speed;
        vY = 0;
    }
    else { // ARRÊT S’arrête si vous touchez ailleurs
        vX = 0;
        vY = 0;
    }
});

Nous allons maintenant mettre à jour la fonction de boucle principale afin qu'elle gère le mouvement de l'objet player. Nous devons changer la direction du mouvement du joueur en fonction de la touche ou du bouton enfoncé.

Vous remarquerez que nous veillons également à ce que le joueur ne sorte pas du canvas en le faisant rebondir dans la direction opposée lorsqu'il atteint un bord.

Localisation du code : Ajoutez ce code avant la commande render(); à l'intérieur de votre fonction main().

//déplacer le joueur
if (player.x > 0 && player.x < canvas.width - player.width) {
    player.x += vX;
}
else {
    player.x -= vX;
    vX = -vX; //rebond horizontal
}

if (player.y > 0 && player.y < canvas.height - player.height) {
    player.y += vY
}
else {
    player.y -= vY;
    vY = -vY; //rebond vertical
}

Pour nous assurer que tout va bien, nous imprimerons les coordonnées du joueur dans l'étiquette de texte que nous avons créée au début. Cette approche nous permet de valider les valeurs et de confirmer que tout est en ordre.

Localisation du code : Remplacer la ligne qui contient fillText à l'intérieur de la fonction render() par ceci :

ctx.fillText(player.x+" "+player.y, 32, 32);

Test de l’état C!

Vous devriez pouvoir déplacer le joueur à l'aide des touches fléchées du clavier ou en touchant les boutons situés sur les bords de l'écran sur un mobile ou dans l'outil de développement de votre navigateur.

Les coordonnées de l'objet joueur devraient apparaître dans l'étiquette en haut à gauche du canvas.

Supprimons donc chaque goody lorsque le joueur l'a touché. Dans la fonction main(), nous allons ajouter une nouvelle boucle for qui vérifie les collisions entre le joueur player et chacun des 3 goodies.

Lorsqu'une collision s'avère vraie, nous supprimons ce goody du tableau (array). (La commande splice supprime un élément de la liste.)

Localisation du code : Cela doit être à l'intérieur de la fonction main(), devant l’appel de render();.

for (var i in goodies) {
    if (checkCollision(player,goodies[i])) {
        goodies.splice(i,1);
    }
}

Encore une fois, à des fins de test, nous ajouterons un compteur à l'étiquette de texte en haut du canvas. Alors, mettez à jour à nouveau la ligne fillText avec ceci :

ctx.fillText(player.x+" "+player.y+ " "+goodies.length, 32, 32);

Test de l’état D!

Les goodies rouges devraient disparaître lorsque vous les touchez avec le joueur. Vérifiez également le compteur dans l’étiquette de texte.

Nous devons maintenant ajouter un appel à cette fonction dans notre boucle principale main(). Au final, la boucle principale comporte deux parties :

1. que faire lorsque vous gagnez : afficher le cadre gagnant
2. que faire tant qu’on n’a pas gagné : jouer au jeu

Jusqu'à présent, la fonction main() ne s'est comportée que comme si nous n'avions pas encore gagné, donc tout le code qui est là à ce stade sera dans la deuxième partie. La première partie est le nouveau code qui s'exécute lorsque nous gagnons. Pour vous simplifier la tâche, j'ai réécrit toute la fonction ci-dessous.

Localisation du code : Remplacez complètement l'ensemble de votre fonction main() par ceci :

// La boucle de jeu principale
var main = function () {
    if (checkWin()) {
        //GAGNANT Afficher le cadre
        if (winReady) {
            ctx.drawImage(winImage, (canvas.width - winImage.width)/2, 
                (canvas.height - winImage.height)/2);
        }
    }
    else {
        //Pas encore gagné, jouer le jeu
        //déplacer le joueur
        if (player.x > 0 && player.x < canvas.width - player.width) {
            player.x += vX;
        }
        else {
            player.x -= vX;
            vX = -vX; //bounce
        }
        if (player.y > 0 && player.y < canvas.height - player.height) {
            player.y += vY
        }
        else {
            player.y -= vY;
            vY = -vY; //bounce
        }
        //vérifier les collisions
        for (var i in goodies) {
            if (checkCollision(player,goodies[i])) {
                goodies.splice(i,1);
            }
        }

        render();
        window.requestAnimationFrame(main);
    }
};

Enfin, nous rendrons l’étiquette de texte plus utile à l’utilisateur plutôt qu’au programmeur.

Changer la ligne fillText avec :

ctx.fillText("Goodies restants : "+goodies.length, 32, 32);

Test de l’état E!

Le jeu est terminé, vous devriez voir le cadre de victoire lorsque vous attrapez tous les goodies. Encore une fois, c'est un peu buggé, le cadre de victoire ne couvre pas complètement la toile, donc parfois vous voyez le joueur, parfois non lorsque vous gagnez. Ne vous inquiétez pas, vous corrigerez ces petits détails au fur et à mesure que vous terminerez votre jeu.