Как делать выбор с помощью if в вашей HTML5-игре

Энди Харрис

Иногда вам понадобится код игры HTML5, чтобы принимать решения или делать выбор. Например, если кто-то из известных людей набрал свое имя на вашем веб-сайте, вы можете создать для него собственное приветствие.

image0.jpg



15 мг аддералла xr

Как видите, программа просматривает ввод в текстовом поле и меняет поведение в зависимости от значения текстового поля.

image1.jpg

Код очень похож на код впривет пользовательстраница. Единственное отличие - это способ написания функции. ВотcheckName ()функция вызывается вifElse.html:

 function checkName() // from ifElse.html lblOutput = document.getElementById('lblOutput'); txtInput = document.getElementById('txtInput'); userName = txtInput.value; if (userName == 'Tim Berners-Lee'){ lblOutput.innerHTML = 'Thanks for inventing HTML!'; } else { lblOutput.innerHTML = 'Do I know you?'; } // end if } // end function

Измените приветствие в игре с помощью if

В этом коде используется важная идея, называемая условие внутри конструкции, называемойеслиутверждение. Вот что происходит:

  1. Настройте веб-страницу как обычно.

    В HTML-коде есть элементы, называемыеlblOutputа такжеtxtInput. Также есть кнопка, которая вызываетcheckName ()при нажатии.

  2. Создавайте переменные для важных элементов страницы.

    Вы получаете данные отtxtInputи изменив HTML-код вlblOutput, поэтому создайте переменные для этих двух элементов.

  3. Получатьимя пользователяизtxtInput.

    ИспользоватьtxtInput.valueтрюк, чтобы получить значение элемента ввода, называемогоtxtInputи поместите его в переменнуюимя пользователя.

  4. Установите условие.

    Ключом к этой программе является специальный элемент, называемый условие - выражение, которое можно оценить какправдаили желожный. Условия часто (как в этом случае) сравнения. Обратите внимание, что двойной знак равенства (==) используется для обозначения равенства. В этом примере спрашивается, есть лиимя пользователяпеременная равна значениюТим Бернерс-Ли.

  5. Поместите условие веслисостав.

    ВеслиОператор - одна из нескольких программных конструкций, использующих условия. Он содержит ключевое словоеслиза которым следует условие (в скобках). Если условиеправда, выполняется весь код в следующем наборе фигурных скобок.

    внешняя ротация плеча
  6. Напишите код для выполнения, если условиеправда.

    Создайте набор фигурных скобок после условия. Любой код внутри этих фигурных скобок выполняется, если выполняется условиеправда. Обязательно сделайте отступ в коде и используйте правильную фигурную скобку (}), чтобы завершить блок кода. В этом примере есть особое приветствие Тиму Бернерсу-Ли.

  7. Построитьещепункт.

    Вы можете построитьеслиоператор с одним блоком кода, но часто вы хотите, чтобы код выполнял что-то еще, если условиеложный. Использоватьещеконструкция, чтобы указать, что у вас будет второй блок кода, который будет выполняться, только если условиеложный.

  8. Напишите код, который произойдет, когда условиеложный.

    Блок кода, следующий заещеПредложение выполняется, только если условие ложно. В этом конкретном примере приветствие есть для всех, кроме Тима Бернерса-Ли.

Различные ароматы if в вашей игре

Утверждения if чрезвычайно сильны, и существует ряд вариаций. Фактически у вас может быть одна, две или любое количество веток. Вы можете написать такой код:

if (userName == 'Tim Berners-Lee'){ lblOutput.innerHTML = 'Thanks for inventing HTML' } // end if

При такой структуре приветствие происходит, еслиимя пользователяявляетсяТим Бернерс-Лии ничего не произойдет, еслиимя пользователячто-нибудь еще. Вы также можете использоватьесли ещеструктура (это форма, используемая в фактическом коде):

if (userName == 'Tim Berners-Lee'){ lblOutput.innerHTML = 'Thanks for inventing HTML!'; } else { lblOutput.innerHTML = 'Do I know you?'; } // end if

Еще одна альтернатива позволяет сравнивать сколько угодно результатов, добавляя новые условия:

if (userName == 'Tim Berners-Lee'){ lblOutput.innerHTML = 'Thanks for inventing HTML!'; } else if (userName == 'Al Gore') { lblOutput.innerHTML = 'Thanks for inventing the Internet'; } else if (userName == 'Hakon Wium Lie') { lblOutput.innerHTML = 'Thanks for inventing CSS'; } else { lblOutput.innerHTML = 'Do I know you?'; } // end if

Условные операторы

В==Оператор проверяет, идентичны ли два значения, но, как показано в таблице 3-1, JavaScript также поддерживает ряд других операторов.

Оператор Имея в виду
а == б a равно b.
к а меньше, чем b.
а> б а больше, чем b.
к<= b a меньше или равно b.
а> = б a больше или равно b.
а! = Ь a не равно b.

Если вы пришли из другого языка программирования, такого как Java, C ++ или PHP, вы можете задаться вопросом, как работают сравнения строк, потому что для них требуются разные операторы на этих языках. JavaScript использует одни и те же операторы сравнения для типов данных, поэтому нет необходимости изучать разные операторы.