Maintenant que nous avons compris les concepts fondamentaux des opérations avec les vecteurs, nous allons mettre en pratique ces connaissances pour développer un programme de mini-jeu vidéo où un avion se déplace en réponse aux touches fléchées du clavier. Pour cela, nous devrons localiser l'avion sur la fenêtre d'écran en utilisant ses coordonnées cartésiennes. Il est possible d'utiliser des variables x et y pour repérer l'avion dans un repère cartésien, mais dans ce cas précis, nous allons utiliser une fonction PVector de la bibliothèque mathématique de p5.js pour faciliter le mouvement de l'avion.
Il est important de noter que pour notre mini-jeu vidéo, nous n'avons besoin que de deux types d'opérations sur les vecteurs : l'addition et la soustraction. Ces opérations nous permettent de déplacer l'avion vers la droite, vers le bas, vers la gauche et vers le haut de l'écran. Ces mouvements sont suffisants pour créer un déplacement réaliste de l'avion dans notre jeu.
Nous allons utiliser l'éditeur de code p5.js pour programmer nos algorithmes. Vous pouvez télécharger l'éditeur
ci-dessous et consulter les captures d'écran pour avoir une idée de son apparence. Si vous n'avez jamais programmé auparavant, vous pouvez cliquer sur le badge ci-dessous
pour accéder aux références de p5.js ou suivre ce lien : Introduction_p5js pour une introduction à la programmation avec
p5.js. Cela devrait vous permettre de comprendre les commandes de base de p5.js.
Si vous êtes déjà familiarisé avec un autre langage de programmation, vous devriez être en mesure de comprendre les algorithmes que je vais vous
présenter pour ce jeu vidéo.
p5.js
Les captures d'écran ci-dessus vous montrent la structure de votre projet, avec le fichier index.html qui contient les liens vers les différentes librairies de p5.js, ainsi que le fichier sketch.js qui est celui où vous écrirez le programme principal.
Je vous montrerai comment ajouter un script avec l'extension .js dans l'éditeur de code p5.js lorsque nous programmerons notre jeu vidéo final de type shoot 'em up à défilement vertical, sous la rubrique « Programmation » située dans la barre de menus. Pour l'instant, cela n'est pas nécessaire, car notre programme est court et tient sur un seul script nommé sketch.js. Vous pouvez sauvegarder votre projet sous un autre nom lorsque vous fermez l'éditeur de code p5.js.
Voici les algorithmes de base pour programmer notre mini-jeu vidéo. Les commentaires du programme expliquent les principales commandes exécutées par p5.js.
/**************************************************************
Autheur de ce programme : unité1994
Date le 07/11/2017 - PVector avion
Programmation JavaScript avec P5.js
****************************************************************/
// On définit toutes nos variables globales avant la fonction setup()
// Vitesse de l'avion
var speed_Aircraft;
// 4 booleans à (true) ou (false) vrai où faut
// pour les touches du clavier appuyée ou relâchée
var ri, le, up, dw;
// Fonction setup() appelée une seule fois au lancement du programme
function setup() {
// Taille de la fenêtre d'écran 600 par 800 pixels
createCanvas(600, 800);
// PVector v1 pour coordonnées cartésiennes v1.x et v1.y de l'avion (vecteur 2d)
v1 = createVector(width/2, height/2 + 300);
// On charge nos images
img_avion = loadImage("assets/avion_mere.png");
img_mer = loadImage("assets/fonds_mer.jpg");
speed_Aircraft = 3; // Vitesse avion mère
}
// Fonction draw() appelée sans arrêt jusqu'à la fin du programme
function draw() {
// Affichage écran fonds mer
image(img_mer, 0, 0);
// Appel de fonction action_Aircraft()
action_Aircraft();
// Centre le repère d'ancrage sur l'image
imageMode(CENTER);
// Affiche l'image de l'avion aux coordonnées v1.x, v1.y
image(img_avion, v1.x, v1.y);
// Remets le mode imagetMode par défaut
// le repère d'ancrage sur l'image est en haut à gauche
imageMode(CORNER);
// Affichage sur la fenêtre d'écran du vecteur v1
// avec ses coordonnées catésiennes v1.x et v1.y en temps réel
fill(255); // couleur blanc
textSize(18);
text("PVector (avion mère) : " + "v1.x = " + v1.x + " v1.y = " + v1.y, 10, 25);
}
// Fonction keyPressed()
// Évènemment si on presse sur une touche sur le clavier
function keyPressed() {
// On teste la touche flèche droite si elle est appuyée
if (keyCode == RIGHT_ARROW) {
ri = true;
} else
// On teste la touche flèche gauche si elle est appuyée
if (keyCode == LEFT_ARROW) {
le = true;
} else
// On teste la touche flèche basse si elle est appuyée
if (keyCode == DOWN_ARROW) {
dw = true;
}
// On teste la touche flèche haute si elle est appuyée
if (keyCode == UP_ARROW) {
up = true;
}
}
// Fonction keyReleased()
// Évènemment si on relâche une touche du clavier
function keyReleased() {
// On teste la touche flèche droite si elle est relâchée
if (keyCode == RIGHT_ARROW) {
ri = false;
}
// On teste la touche flèche gauche si elle est relâchée
else if (keyCode == LEFT_ARROW) {
le = false;
}
// On teste la touche flèche basse si elle est relâchée
else if (keyCode == DOWN_ARROW) {
dw = false;
}
// On teste la touche flèche haute si elle est relâchée
if (keyCode == UP_ARROW) {
up = false;
}
}
// Fonction Action_Aircraft()
function action_Aircraft() {
// On teste si le boolean ri égale à true
if (ri === true) {
// L'avion se déplace à droite de l'écran
v1.x = v1.x + speed_Aircraft;
// On teste la sortie de l'avion à droite de l'écran
if (v1.x > width - 30) v1.x = width - 30;
}
// On teste si le boolean le égale à true
if (le === true) {
// L'avion se déplace à gauche de l'écran
v1.x = v1.x - speed_Aircraft;
// On teste la sortie d'écran de l'avion à gauche
if (v1.x < 30) v1.x = 30;
}
// On teste si le boolean dw égale à true
if (dw === true) {
// L'avion se déplace en bas de l'écran
v1.y = v1.y + speed_Aircraft;
// On teste la sortie de l'avion en bas de l'écran
if (v1.y > height - 22) v1.y = height - 22;
}
// On teste si le boolean up égale à true
if (up === true) {
// L'avion se déplace en haut de l'écran
v1.y = v1.y - speed_Aircraft;
// On teste la sortie de l'avion en haut de l'écran
if (v1.y < 22) v1.y = 22;
}
}
Ce code ci-dessus est un programme en utilisant la bibliothèque p5.js avec le langage JavaScript pour créer une animation d'un avion
déplaçant sur l'écran. Il utilise plusieurs fonctions pour créer cette animation, notamment les fonctions setup(), draw(),
keyPressed()
et keyReleased() et action_Aircraft().
La fonction setup() est appelée une seule fois au lancement du programme. elle utilise la fonction createCanvas() pour créer une fenêtre de jeu de
600x800 pixels, définit les coordonnées
de départ de l'avion, charge les images de l'avion et de l'océan, et définit la vitesse de l'avion.
La fonction draw() est appelée en boucle jusqu'à la fin du programme. Elle affiche l'image de l'océan, appelle la fonction action_Aircraft() pour mettre
à jour la position de l'avion, affiche l'image de l'avion à ses nouvelles coordonnées, et affiche les coordonnées de l'avion en temps réel.
La fonction PVector sert à créer un vecteur 2D appelé v1 avec des coordonnées cartésiennes (v1.x et v1.y).
Le vecteur est initialisé avec des coordonnées (width/2, height/2 + 300),
ce qui signifie que le vecteur sera situé au milieu de la largeur de la fenêtre et 300 pixels en-dessous du milieu de la hauteur de la fenêtre. Il est utilisé pour définir
les coordonnées de l'avion dans le programme.
Les fonctions keyPressed() et keyReleased() gèrent les événements liés aux touches du clavier. Lorsqu'une touche est pressée, la fonction keyPressed()
définit les variables liées à cette touche (ri, le, up, dw) à true, et lorsqu'une touche est relâchée, la fonction
keyReleased() définit les variables liées à cette touche à false.
La fonction action_Aircraft() est appelée par la fonction draw() pour mettre à jour la position de l'avion en fonction des variables liées aux touches
du clavier (ri, le, up, dw). Si la variable ri est true, l'avion se déplace vers la droite de l'écran.
Si la variable le est true, l'avion se déplace vers la gauche de l'écran. Si la variable up est true, l'avion se déplace vers
le haut de l'écran. Si la variable dw est true, l'avion se déplace vers le bas de l'écran.
Avant de lancer notre mini-jeu vidéo ci-dessous, je vous donne les ressources graphiques dans un dossier assets à télécharger ci-dessous. Il faut prendre le dossier assets contenant les images et le placer dans le dossier de votre projet p5.js, sous la racine du dossier compressé. Vous pouvez voir les exemples de capture d'écran ci-dessous. Le dossier se nomme sketch et le dossier assets doit être placé à l'intérieur de ce dossier. Je vous rappelle que lorsque vous lancez p5.js, le nom du projet par défaut est sketch, mais vous pouvez lui donner un autre nom lors de la sauvegarde de votre projet.
assets
Quand vous ouvrirez le dossier sketch, vous devrez avoir comme dans la capture d'écran ci-dessous.
Maintenant, que vous avez le code source ci-dessus et votre dossier assets à l'intérieur du projet, copiez-le et collez-le dans l'éditeur de code de p5.js, puis lancez le programme en appuyant sur le bouton « flèche » en haut à gauche de votre éditeur de code. Vous pouvez tester et télécharger votre premier mini-jeu vidéo ci-dessous.
Avion PVector
Voilà, nous avons terminé les algorithmes de ce premier mini-jeu vidéo avec nos calculs sur les vecteurs. Vous pouvez maintenant passer à la suite pour notre deuxième mini-jeu vidéo dans la rubrique « Algorithme » située dans la barre de menus. Le programme de ce deuxième mini-jeu vidéo, qui utilise la trigonométrie, sera un peu plus long que celui-ci avec notre vecteur.
