[MUSIQUE JEU] 

INTERLOCUTEUR 1: Eh bien, nous sommes ici, le dernier jeu de P dans CS50. Vous féliciter d'avoir venir jusqu'ici depuis votre premier bonjour mondes et imprimer pyramides pour Mario. Vous avez fait un site Web la semaine dernière. Et nous allons faire un autre cette semaine, celui qui vous permet de faire le tour du campus de Harvard, la cueillette jusqu'à membres du personnel CS50, et les ramener à leur maisons d'habitation. 

Maintenant la semaine dernière, nous avons travaillé en PHP, un langage côté serveur. Pour cette série P, nous allons nous introduit à JavaScript qui est un client langue de côté. Donc, nous allons jeter un oeil à quelques-uns des Code de distribution qui est fourni à vous pour ce P ensemble. 

Dans le dossier JavaScript, il y aura un tas de fichiers JavaScript. Il ya buildings.js, qui contient un ensemble de bâtiments autour de Harvard campus, avec leurs informations et la position. Houses.js est un tableau de Harvard maisons d'habitation, avec leur latitudes et longitudes. Passengers.js contient un tableau de passagers - les membres du personnel CS50 - que vous serez amener à dos leurs maisons d'habitation. 

Math3D.js, qui contient beaucoup d' fonctions à faire avec le mouvement. Si vous êtes mathématiquement esprit, alors je me réjouis de vous jetez un oeil. Mais vous n'avez pas besoin de comprendre tout là-dedans. Shuttle.js, qui traite de le mouvement de la navette. Et index.html est la page d'accueil où tout se passe, vraiment, où la l'utilisateur est en interaction avec le site. 

Service.css est la feuille de style CSS, qui, en plus de l'Twitter Bibliothèque Bootstrap, les contrôles à quoi ressemble index.html. Et puis nous avons aussi service.js, qui contient des fonctions de service pour la navette. Et c'est là que vous allez être remplir une partie de l'au dos. 

Maintenant, nous allons jeter un oeil à des objets et tableaux associatifs en JavaScript, qui, pour toutes fins sont interchangeables. Si je voulais faire un objet d'une variable appelé une baguette, je déclarer. Et à l'intérieur de ces accolades Je voudrais préciser le noyau est licorne. Le bois est la cerise. Et la longueur est de 13. 

Maintenant, je peux également accéder aux valeurs des objets à l'aide notation de tableau associatif. Base de l'indice Donc baguette, je peux mettre que l'égalité de licorne, ou vérifier que, si j'ai besoin. Ou je peux utiliser l'opérateur point. Bois baguette de points est égal à la cerise, et ainsi de suite, et ainsi de suite. Donc, vous voyez que les tableaux associatifs et objets en JavaScript vont être interchangeable, et la volonté devenir assez pratique. 

Ensuite, nous voyons un ensemble de bâtiments dans buildings.js. Encore une fois, un tableau d'objets. Si je voulais faire un tableau de la meilleure bâtiments sur le campus de Harvard, puis Je voudrais faire comme suit. En utilisant cette notation d'objet, où Je stocke la racine, nom, adresse, latitude, longitude et pour chaque objet de construction unique. 

Parlons rapidement sur les variables en JavaScript. Comme PHP, les variables JavaScript sont faiblement ou faiblement typé. Pour créer une variable locale, vous préfixez le nom de variable avec le V-A-R, var. 

Maintenant en JavaScript, les fonctions seront limiter la portée des variables. Donc si vous avez une variable locale dans une fonction, puis d'autres fonctions ne peuvent pas y accéder. Mais contrairement au C, des boucles et des conditions ne limiter la portée d'une variable. 

Donc, même si vous déclarez à l'intérieur d'un état, l'ensemble de la fonction sera y avoir accès. Maintenant sans var, la variable seront mondiale. Donc, si vous venez de déclarer le nom et l' attribuer une valeur, alors cette variable sera une variable globale en JavaScript. 

Maintenant dans les maisons, nous avons une associatif tableau d'objets de type maison, où chaque maison est juste une latitude et une longitude. Ensuite, nous avons les passagers matrice, qui est un tableau de type d'objet passager. Ainsi, chaque passager dispose d'un nom d'utilisateur, un nom, et une maison. Remarquez que je vois de genre passager, qui a vraiment signifie simplement que chaque objet a la même paire de valeur de la clé. Ainsi, chaque objet de type passager a un nom d'utilisateur, un nom, et une maison. 

Alors, que devons-nous faire pour l'ensemble de P? Eh bien, nous devons permettre aux utilisateurs de choisir jusqu'à membres du personnel, pour afficher tous les membres du personnel qui sont actuellement en notre navette, et à les déposer. Et puis nous parlerons également supplémentaire caractéristiques qui peuvent être mises en œuvre pour la navette P ensemble. 

Mais parlons d'abord de ramassage. Les visages du personnel CS50 ont été planté partout sur le campus, où chaque visage est mis en œuvre comme un lieu marque 3D sur la terre, et en tant que marqueur sur la carte 2D. Ainsi, lorsque l'utilisateur clique sur le pick-up bouton, nous voulons ajouter proximité passagers à la navette. Et nous voulons aussi supprimer leur place marquer du monde, et retirer leur marqueur de la carte, ce qui indique que ils sont dans notre navette maintenant. 

Alors, comment pouvons-nous détecter si les passagers sont à la portée de notre navette? Eh bien, la distance de fonction - si la distance de point de navette, en passant la latitude et la longitude, la volonté calculer la distance à partir du courant position de la navette à l' point que vous spécifiez avec qui donné la latitude et la longitude. Ainsi, vous pouvez l'utiliser pour calculer la la distance de la navette à l' passagers. 

Mais comment savez-vous où les passagers sont? Eh bien, c'est là que nous devrons modifier la fonction de peupler. Remplissez les lieux tous les membres du personnel et les passagers dans le monde, et dans la carte, mais ne fonctionne pas stocker leur emplacement. Alors peut-être que vous pouvez stocker leur placer des repères et marqueurs dans certains réseau mondial. 

Maintenant, il ya déjà un réseau mondial mémoriser des informations de passagers. Les magasins passagers de tableau chaque le nom du passager et leur maison. Alors peut-être que vous pouvez ajouter quelques paramètres là pour les objets à passagers. 

Pour nous aider à détecter tous les passagers à portée de notre navette, nous allons boucle par tous les passagers dans le tableau de passagers. Une boucle dans JavaScript pourrait ressembler quelque chose comme ça, très semblable à ceux de la boucle en C. Ou nous pouvons utiliser un alternative à la structure de boucle. 

Pour var i dans le tableau, où je sera toujours l'indice. Mais vous n'avez pas besoin de spécifier le tableau de longueur de point état, et je plus plus. L'emplacement de chaque passager est donné par leur place marque. 

Mais la marque de place n'est pas la latitude et la longitude. Nous avons pour accéder à ces paramètres par obtenir la géométrie, utilisant get la géométrie sur la marque de lieu. Et puis une fois que nous avons la géométrie, obtenir soit la latitude ou l' longitude, l'utilisation de ces fonctions. 

Alors maintenant, nous savons comment détecter si les passagers sont à l'intérieur gamme de notre navette. Une fois que nous avons ces passagers, nous allons vouloir ajouter tous les passagers qui sont dans cette plage. Nous voulons leur permettre de sauter sur et prendre place sur la navette, mais seulement si nous avons assez de place pour eux. 

Le tableau sièges navette de points sera indiquent si les sièges sont vides, ou qui est dans ce siège. Donc, si un siège est vide, ce siège sera nulle. Donc parcourir le tableau sièges, vérification de sièges vides, le stockage passagers dans les sièges jusqu'à ce que vous n'ont pas de sièges plus vides. Et malheureusement, les autres passagers devront attendre pour la la prochaine fois que la navette vient autour. 

Une fois qu'ils obtiennent sur la navette, nous voulons pour enlever leur place marque, qui est leur photo dans le monde 3D. Si je voulais enlever un endroit marque p, alors je voudrais obtenir toutes les caractéristiques de ma terre, de Google Earth, puis retirez cet endroit spécifique marquer en utilisant la fonction removeChild. Puis enfin, nous allons supprimer le marqueur, l'icône sur la carte 2D pour tout passagers que nous embarquions. Pour supprimer un marqueur, m, alors je vais juste exécuter m point setMap nulle. Faites cela pour tous les passagers se trouvant à portée, et vous avez terminé le ramassage.