Урок 7, По-сложни условия

Миналия път бяхме направили условие което проверява дали е натисната мишката. Беше нещо от този род:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  if (mouseIsPressed) {
    rect(0, 0, 100, 100)
  }
}

Както може би си спомняте, този код показва един правоъгълник само докато задържаме мишката, тъй като mouseIsPressed е true/"истина" когато е задържан бутона на мишката и false/"неистина" когато не е.

Превеждайки го на български, с този код казваме: "Ако е натисната мишката, нарисувай правоъгълник."

Обръщане на условия с !

Това е страхотно, но как бихме могли да показваме правоъгълника само когато не е натисната мишката?

Един начин би бил да използваме else, без нищо в къдравите скоби на if. Нещо като това:

if (mouseIsPressed) {
} else {
  rect(0, 0, 100, 100)
}

С този код буквално казваме: "Ако е натисната мишката, не прави нищо, а иначе, нарисувай правоъгълник."

Това работи, но не е особено четливо. Този if (..) {} else { .. } лесно предизвиква объркване.

Вместо това може да използваме знака за отрицание (negation, също познат и като логическо "не"), !. Поставяйки този знак преди дадено условие, получаваме точно противоположното условие. Тоест, може да напишем горния код по-просто ето така:

if (!mouseIsPressed) {
  rect(0, 0, 100, 100)
}

Това бихме прочели като: "Ако не е натисната мишката, нарисувай правоъгълник." – точно това което искаме.

(Този знак бихме могли да използваме и в конзолата, където ще видим че !true (НЕ истина) произвежда false (неистина) а !false (НЕ неистина) е true (истина).)

Може би си спомняте същата тази удивителна от знака за неравенство, !=. И там, както и тук, удивителната означава "не".

Комбиниране на условия с && (и)

За друг пример, нека да си представим че имаме една анимация която движи правоъгълник през екрана. Нещо като това:

function setup() {
  createCanvas(400, 400);
}

let x = 0   // (бележка: във видеото тук бях писал `var x = ..`, но `var` и `let` са почти еднакви. Препоръчва се let.)

function draw() {
  background(220);
  
  rect(x, 0, 10, 10) // Рисува малък правоъгълник
  x = x + 1          // Премества правоъгълника надясно
  
  if (!mouseIsPressed) {
    rect(0, 0, 100, 100)  // Големият правоъгълник от преди малко
  }
}

Нека да си представим, че искам кода да показва големия правоъгълник само когато мишката е натисната и, едновременно с това, малкия правоъгълник е в дясната част от екрана. (Да речем, тъй като ако винаги показвам големия правоъгълник, то той би покрил малкия в лявата част от екрана)

Това можем да го направим използвайки два пъти if, например така:

if (mouseIsPressed) { // Мишката е натисната
  if (x > 200) {      // Малкият правоъгълник е в десния край на екрана
    rect(0, 0, 100, 100)
  }
}

Но, разбира се, има и по-лесен начин да опишем същото, а именно:

if (x > 200 && mouseIsPressed) { // Малкият правоъгълник е в десния край на екрана И мишката е натисната
  rect(0, 0, 100, 100)
}

В този случай, знакът && (двоен амперсанд, изписва се с Shift+7 на повечето клавиатури) означава "логическо И" и се използва за да опише условие, което е вярно, само когато и двете под-условия са верни.

Например, този знак може да използваме за да опишем неща като "ако паролите съвпадат И не съществува потребител с това име" или пък "ако играчът е жив и няма останали монети за събиране".

Също, ако искаме да кажем условие подобно на "ако променливата z е между 5 и 10", то това отново бихме направили използвайки &&, ето така: z > 5 && z < 10.

Комбиниране на условия с || (или)

И последно, друг начин да правим по-сложни условия е да използваме знака || (права черта, изписва се с Shift+\ на повечето клавиатури), значещ "логическо ИЛИ". Него използваме за да опишем условия, които са верни, когато поне едно под-условие е вярно.

Така например, ако напишем:

if (x > 200 || mouseIsPressed) { // Малкият правоъгълник е в десния край на екрана ИЛИ мишката е натисната
  rect(0, 0, 100, 100)
}

Тогава, големият правоъгълник от преди малко ще се показва винаги когато мишката е вдясно и, също така, и винаги когато малкия правоъгълник е вдясно.

Това може да е полезно за да опишем условия като, този знак може да използваме за да опишем неща като "ако потребителя е авторът на съобщението ИЛИ потребителя е администратор" или пък "ако играчът е извън екрана или играчът допира лава".

Таблица

Ето и отново списък от "логическите" оператори, които може да използваме за да правим по-сложни условия:

Примерна игра с кръгче, което се движи

Останалата част от урока (от 3:49 нататък), показва примерна игра, в която играча трябва да натисне с мишката когато един движещ се кръг е в средата на екрана, и ако успее печели, а иначе губи.

Кода от тази игра може да разгледате тук:

function setup() {
  createCanvas(400, 400);
}

let x = 0 // Променлива, в която записваме къде се намира кръгчето.

function draw() {              // Всеки кадър:
  background(220);
  
  circle(x, 200, 50)           // 1) Нарисувай кръгче
  x = x + 2                    // 2) Премести го надясно
  if (x > 400) {               // 3) Ако е след десния край,
    x = 0                      //  .. го върни в началото
  }
  if (mouseIsPressed) {        // 4) Когато се натисне мишката
    if (x > 150 && x < 250) {  //  .1) Ако кръгчето е в средата (победа),
      fill(0, 255, 0)          //    .. смени цвета на зелен
    } else {                   //  .2) а иначе (загуба)
      fill(255, 0, 0)          //    .. го смени на червен
    }
  }
}

Може да изпробвате крайния резултат тук: игра с кръгче.

Направете един правоъгълник да изчезва (или, по желание, да сменя цвета си) когато застанете върху него с мишката.

За целта, може да използвате променливите mouseX и mouseY, които ни дават съответно отстоянието от левия и горния край на самата мишка.

За начало, може да пробвате със следния правоъгълник, който заема цялата дясна половина на екрана:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  rect(200, 0, 200, 400) // <--
}

След това, пробвайте да допълните условието, така че следния правоъгълник (заемащ долната дясна четвъртина) да изчезва:

rect(200, 200, 200, 200)

След това, пробвайте да допълните условието с още една част, така че следния правоъгълник да изчезва:

rect(200, 200, 100, 200)

И последно, направете условието да работи за финалния правоъгълник:

rect(200, 200, 100, 100)

В някой от следващите уроци ще говорим малко повече за това как може да използвате подобни техники за да направите някакъв вид бутон, но за сега, това е хубаво упражнение. Ако някоя стъпка ви се вижда сложна, пробвайте да направите само първите две.