Création d'un jeu d'aiguilleur du ciel

Présentation du projet

1. Description du projet

L’objet de ce projet est de concevoir et de réaliser, de façon simple et assez sommaire, un jeu d’aiguilleur du ciel. Dans un jeu de ce genre, une aire de jeu représente un aéroport international et son environnement, et le but du jeu est de simuler les vols traversant l’espace aérien, dont la tour de contrôle de l’aéroport a la responsabilité. Cela inclut les vols au départ et à l’arrivée de l’aéroport, mais aussi les vols qui transitent et ne font que traverser l’espace aérien.

Le joueur visualise les avions en vol et en attente de décollage et donne des ordres de route aux pilotes. Ces ordres influent sur l’altitude, la vitesse et le cap des avions, mais aussi sur les autorisations de décollage ou d’atterrissage. Le danger est, bien sûr, permanent et il faut constamment minimiser les risques afin d’éviter les collisions. Au fur et à mesure que le niveau du joueur augmente, le nombre d’avions qu’il doit gérer se fait plus grand, si bien qu’au bout d’un certain temps, éviter les erreurs devient difficile et demande une grande concentration et un bon sens de l’organisation.

Le joueur marque des points pour chaque atterrissage réussi ainsi que pour chaque sortie d’un avion de l’espace aérien.

2. Les compétences acquises au cours du projet

La réalisation de ce projet permettra au lecteur d’acquérir plusieurs compétences importantes en JavaScript :

manipuler des objets et des tableaux
choisir et utiliser des sélecteurs jQuery et CSS
injecter et supprimer des objets HTML dans le DOM
animer des objets du DOM
effectuer certains calculs d’une relative complexité
déclencher des évènements personnalisés
détecter et prendre en compte la réponse à des évènements utilisateurs ou personnalisés

3. La structure du projet

Ce projet se compose d’une page HTML, d’une feuille de style CSS, d’un fichier de données et de plusieurs fichiers de script JavaScript/jQuery.

La structure de fichiers de ce projet se présente comme suit, en début de projet :

scripts

jquery-min.js
main.js

images

A320.png
B747.png...

Présenter le jeu à l’utilisateur

1. Présenter un écran d’accueil

Pour commencer, on présente un écran d’accueil au joueur, lui permettant de comprendre ce qu’il doit faire et lui offrant la possibilité de débuter une partie. Il s’agit d’une boîte de dialogue avec un petit logo, un texte descriptif et un bouton permettant de commencer à jouer.

On crée donc un objet personnalisé JavaScript, dans un fichier externe appelé boiteAccueil.js, que nous implémentons dans le code principal pour afficher la boîte de dialogue. Le fichier est stocké dans le répertoire scripts. La fonction qui fait office de constructeur de cet objet a pour tâche d’insérer dans le DOM sa représentation visuelle.

function BoiteAccueil(titre, image, texte, instructions, fonction) 
{ 
   $('.voile, .boiteAccueil').remove(); 
   $('body').append('<div class="voile"></div><div 
class="boiteAccueil"><img class="BALogo" src="' + image + '"><label 
class="BATitre">' + titre + '</label><p class="BATexte">' + texte + 
'<p class="BAInstructions">' + instructions + '</p><button>Démarrer 
une partie</button></div>'); 
    $('.boiteAccueil') 
        .animate ({top: '330px'},500) 
        .on ('click',    'button', 
                function () 
                { 
                    $('.boiteAccueil') 
                        .animate ({top: '-500px'},     
                                500, 
                                function () 
                         ...

Préparer et afficher les composants du jeu

1. Initialiser une partie

Pour pouvoir lancer une partie, on commence par écrire, dans le fichier de script principal scripts/main.js, une fonction qui initialise les principaux paramètres du jeu. Ces paramètres sont le niveau du joueur ainsi que son score courant et les vols en cours dans l’espace aérien. Cette fonction a aussi la charge de la préparation et de l’affichage des composants qui servent à adresser au joueur diverses informations. Ces composants sont :

Une zone de conversation, affichée en bas de l’écran, qui sert de support à l’affichage de petits messages courts, messages qui simulent les conversations radio entre les pilotes naviguant dans l’espace aérien et la tour de contrôle (le joueur).
Une autre zone qui affiche, elle, des statistiques diverses comme le nombre d’appareils en gestion dans l’espace aérien, le nombre de vols déjà traités, le niveau et le score courant du joueur, etc.

Nous nommons cette fonction initialiserPartie() et nous la passons en paramètre à la boîte d’accueil de manière à ce qu’elle soit exécutée quand le joueur souhaite lancer une partie.

Son code est le suivant :

function initialiserPartie() 
{ 
    joueur = {niveau: 1, score: 0, avions: 0}; 
    avions = []; 
    $('body').append('<div class="messageRadios"></div><div 
class="statistiques"><label class="statTitle">Statistiques</label>
<fieldset class="statLine"><label...

Organiser les éléments techniques du jeu

1. Définir les propriétés d’un objet personnalisé représentant un vol

Nous devons maintenant définir ce qu’est précisément un vol dans le projet.

On décide de recourir à un objet personnalisé contenant, en propriétés, toutes les informations nécessaires pour décrire les caractéristiques d’un vol.

Voici la liste de ces propriétés :

Propriété	Description	Valeurs possibles
avion	Type d’avion	A320 ou B747, etc
type	Type de vol	Atterrissage, décollage ou transit
code	Numéro de vol	2 lettres, 1 tiret et 4 chiffres
de	Aéroport de provenance de l’appareil	Chaîne de caractères
vers	Aéroport de destination de l’appareil	Chaîne de caractères
trajets	Tableau contenant les changements éventuels de trajectoire	Tableau d’objets
pays	Nationalité de la compagnie propriétaire de l’appareil	Chaîne de caractères
origine	Bord d’arrivée de l’appareil	Nord, Sud, Est ou Ouest
cible	Bord de sortie de l’appareil	Nord, Sud, Est ou Ouest
compagnie	Compagnie propriétaire de l’appareil	Chaîne de caractères
positionActuelle	Objet conservant la position actuelle de l’appareil	Objet possédant les propriétés left, top, orientation, altitude, vitesse
vitesse	Vitesse de l’avion, en km/h	Valeur numérique
orientation	Orientation de l’appareil en mode informatique (0° = est, 90° = sud, etc.)	Valeur numérique entre 0 et 359
cap	Cap de l’appareil, orientation en mode navigation (0° = nord, 90° = est, etc.)	Valeur numérique entre 0 et 359
altitude	Altitude de l’appareil, en pieds (feet en anglais, ou ft)	Valeur numérique
statut	Variable technique indiquant le statut de l’appareil	en vol, en attente, décollage, atterrissage, transit
positionOrigine	Objet conservant la position de départ de l’appareil	Objet possédant les propriétés left, top, orientation, altitude, vitesse
positionCible	Objet conservant la position de sortie prévue pour l’appareil	Objet possédant les propriétés left, top, orientation, altitude, vitesse

Pour chaque vol créé...

Générer du contenu

Il s’agit à présent d’implémenter les fonctions qui simulent le trafic aérien.

On recense trois cas de figure lorsqu’un avion investit l’espace aérien :

Soit il demande une autorisation de décollage depuis la piste de l’aéroport.
Soit il pénètre l’espace aérien de jeu depuis l’un des bords de la carte et demande à le traverser pour rejoindre un autre espace aérien, par un autre bord.
Soit il pénètre l’espace aérien de jeu depuis l’un des bords de la carte et fait une demande d’atterrissage sur la piste de l’aéroport.

Pour faciliter la gestion des vols, l’idéal serait de manipuler un objet qui dispose d’un ensemble de méthodes dédiées à ce travail, à cette gestion. Dans le jargon des développeurs, ce genre d’objet se nomme un manager. Nous devons donc créer un manager de trafic aérien. Pour ce faire, on crée un fichier nommé traficManager.js que nous stockons dans le répertoire scripts de la structure.

Dans un premier temps, son code est très simple. Il s’agit d’une fonction faisant office de constructeur et se contentant d’initialiser les variables nécessaires pour afficher les statistiques du jeu, par exemple. Au fur et à mesure du développement, le code du manager se trouvera enrichi de nouvelles fonctionnalités, toutes en rapport avec la gestion des vols.

function TraficManager() 
{ 
    this.avionsEnJeu = []; 
    this.avionsTraites = {atterrissages: 0, decollages: 0, transits: 0}; 
}

La variable avions, créée au début de ce projet afin de comptabiliser les avions en jeu dans les statistiques, n’a plus lieu d’être, maintenant que l’on dispose de la variable avionsEnJeu du manager. Il faut donc la supprimer au début du fichier script/main.js et la remplacer dans la fonction afficheStatistiques().

function afficherStatistiques() 
{ 
   $('.statValue:first').text(niveauEnCours); 
   $('.statValue:eq(1)').text(manager.avionsEnJeu.length); 
   $('.statValue:eq(2)').text(joueur.score); ...

Animer le jeu

1. Orienter l’appareil selon son cap et animer son déplacement

L’étape suivante consiste à paramétrer correctement l’orientation de l’appareil une fois ce dernier inséré dans le DOM. Pour cela, le code suivant effectue la rotation nécessaire sur l’élément img correspondant à un vol donné :

    $('.avion[data-numero-vol="' + vol.code + '"] img') 
       .css     ( 
                   { 
                       transform: 'rotate(' + 
vol.positionOrigine.orientation + 'deg)', 
                   } 
               );

Nous plaçons ce code à la fin de la fonction placerAppareil() du fichier scripts/main.js.

Une fois l’avion placé et correctement orienté, il faut lancer l’animation qui emmène l’appareil jusqu’à sa destination, à la vitesse spécifiée par les caractéristiques du vol.

Cette vitesse est exprimée en km/h et cette unité n’est pas adaptée à une représentation à l’écran. Dans ce cas, il faut calculer une durée de traversée d’un point à un autre de manière à simuler la vitesse de l’appareil par rapport aux autres appareils....

Programmer des interactions utilisateurs

1. Interagir avec les avions et leur donner des directives de vol

Lorsque plusieurs avions sont en jeu, il est possible que certains d’entre eux se trouvent, à un moment donné de leur trajectoire, dans un espace trop rapproché. La sécurité de ces vols devient problématique : le risque d’une collision est trop important.

Il est alors de la responsabilité de la tour de contrôle, et donc du joueur, d’intervenir en donnant l’ordre à l’un des deux (ou même aux deux) appareils de changer de vitesse, d’altitude ou bien de direction (de cap) de manière à empêcher cette collision.

Pour ce faire, lorsque le joueur clique avec sa souris sur un avion, il faut afficher l’appareil d’une manière significative pour indiquer qu’il est sélectionné, et afficher également un panneau de commandes à son côté permettant au joueur de lui transmettre ses ordres.

On modifie le fichier principal main.html, de manière à ce qu’il intègre ce panneau de contrôle :

<!DOCTYPE html> 
<html lang="fr-FR"> 
   <head> 
       <meta charset="utf-8"> 
       <title>Page WEB support</title> 
       <link rel="stylesheet" type="text/css" href="styles/reset.css"> 
       <link rel="stylesheet" type="text/css" href="styles/boiteAccueil.css"> 
       <link rel="stylesheet" type="text/css" href="styles/main.css"> 
       <script src="data/data.js"></script> 
       <script type="text/javascript" src="scripts/traficManager.js">
</script> 
       <script type="text/javascript" src="scripts/boiteAccueil.js">
</script> 
       <script type="text/javascript" src="scripts/jQuery-331.min.js">
</script> 
       <script type="text/javascript" src="scripts/main.js"></script> ...