Comment faire des choix avec si dans votre jeu de html5

Parfois, vous aurez besoin de votre code de jeu HTML5 pour prendre des décisions ou de choix. Par exemple, si quelqu'un de célèbre tapé leur nom dans votre site, vous voudrez peut-être créer un message d'accueil personnalisé pour eux.

Comme vous pouvez le voir, le programme cherche à l'entrée dans le comportement de la boîte de texte et des modifications sur la base de la valeur du champ de texte.

Le code est assez similaire au code dans le Hiuser page. La seule différence est la façon dont la fonction est écrite. Voici la CheckName () fonction appelée dans ifElse.html:

 CheckName fonction () // partir ifElse.htmllblOutput = document.getElementById ("lblOutput") - txtInput = document.getElementById ("txtInput") - username = txtInput.value-si (username == "Tim Berners-Lee") { lblOutput.innerHTML = "Merci pour inventer HTML!" -} else {lblOutput.innerHTML = "Je vous connais?" -} // fin si} // fonction de fin

Changer la salutation du jeu avec si

Ce code utilise une idée importante appelé état à l'intérieur d'une construction appelée si déclaration. Voici ce qui se passe:

1. Mettre en place la page web comme d'habitude.

   Le code HTML est appelé éléments lblOutput et txtInput. Il dispose également d'un bouton qui appelle CheckName () quand il est cliqué.

2. Créez des variables pour les éléments importants de la page.

   Vous obtenez les données de txtInput et la modification du code HTML dans lblOutput, afin de créer des variables pour ces deux éléments.

3. 
   
   
   
   

   Obtenir userName de txtInput.

   Utilisez le txtInput.value tromper pour obtenir la valeur de l'élément d'entrée appelé txtInput et le placer dans la variable userName.

4. Mettre en place une condition.

   La clé de ce programme est un élément spécial appelé état - une expression qui peut être évaluée en tant que vrai ou faux. Les conditions sont souvent (comme dans ce cas) des comparaisons. Notez que les doubles signe égal (==) Est utilisé pour représenter l'égalité. Dans cet exemple, il demande si la userName variable est égale à la valeur "Tim Berners-Lee".

5. Placez la condition dans un si structure.

   La si déclaration est l'un d'un certain nombre de constructions de programmation qui utilisent conditions. Il contient le mot-clé si suivi d'un état (entre parenthèses). Si la condition est vrai, tout le code dans l'ensemble des accolades suivant est exécuté.

6. Ecrire du code à exécuter si la condition est vrai.

   Créer un ensemble d'accolades ondulées après la condition. Tout code à l'intérieur de ces accolades exécute si la condition est vrai. Assurez-vous de retrait de votre code et utiliser l'accolade gribouillis droite (}) À la fin du bloc de code. Dans cet exemple, il ya une salutation spéciale à Tim Berners-Lee.

7. Construire un autre clause.

   Vous pouvez construire une si déclaration avec un seul bloc de code, mais souvent vous voulez que le code pour faire autre chose si la condition est faux. Utilisez le autre construire pour indiquer que vous aurez un deuxième bloc de code qui sera exécuté que si la condition est faux.

8. Ecrire du code pour se produire lorsque la condition est faux.

   Le bloc de code suivant la autre clause exécute uniquement si la condition est fausse. Dans cet exemple particulier, il est un salut pour tous, sauf Tim Berners-Lee.

Les différentes saveurs de si dans votre jeu

Si les états sont extrêmement puissants, et il ya un certain nombre de variations. Vous pouvez en fait avoir un, deux, ou un certain nombre de branches. Vous pouvez écrire du code comme ceci:

si (username == "Tim Berners-Lee") {lblOutput.innerHTML = "Merci pour inventer HTML"} // fin si

Avec cette structure, le message d'accueil se produit si userName est "Tim Berners-Lee" et rien ne se passe si le userName est quelque chose d'autre. Vous pouvez également utiliser la sinon la structure (ce qui est la forme utilisée dans le code réel):

si (username == "Tim Berners-Lee") {lblOutput.innerHTML = "Merci pour inventer HTML!" -} else {lblOutput.innerHTML = "Je vous connais?" -} // fin si

Une alternative plus vous permet de comparer autant de résultats que vous souhaitez en ajoutant de nouvelles conditions:

si (username == "Tim Berners-Lee") {lblOutput.innerHTML = "Merci pour inventer HTML!" -} else if (userName == "Al Gore") {lblOutput.innerHTML = "Merci pour inventer l'Internet» - } else if (username == "Hakon Wium Lie") {lblOutput.innerHTML = "Merci pour inventer CSS" -} else {lblOutput.innerHTML = "Je vous connais?" -} // fin si

Les opérateurs conditionnels

La == opérateur vérifie pour voir si deux valeurs sont identiques, mais que le tableau 3-1 montre, javascript prend en charge un certain nombre d'autres opérateurs ainsi.

Si vous venez d'un autre langage de programmation comme Java, C ++ ou PHP, vous pourriez vous demander comment les comparaisons de chaînes travaillent parce qu'ils ont besoin de différents opérateurs dans ces langues. javascript utilise exactement les mêmes opérateurs de comparaison pour les types de données, il n'y a donc pas besoin d'apprendre les différents opérateurs.