Перейти к основному содержанию

Введение в JavaScript, часть I: Переменные, свойства, операции


Введение в JavaScript, часть I: Переменные, свойства, операции

JavaScript - это великолепный язык программирования, на котором работают веб-сайты, игры, приложения, такие как ct.js, и даже роботы! Он прост в изучении, хотя и бесконечно глубок, и похож на другие языки программирования, такие как C#, C++ или Java.

Игры Ct.js написаны на JavaScript. Вы определяете логику для своих игр и пишете новые расширения с ее помощью. Здесь мы изучим основные понятия этого языка.

Переменные

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

Переменные могут содержать и более сложные данные, например, список предметов инвентаря или колоду карт.

Чтобы объявить переменную, у неё обязательно должно быть ключевое слово (например var) и название переменной, после нужно присвоить значение переменной с помощью знака равенства:

var maxHealth;
maxHealth = 100;
var health;
health = maxHealth; // Вы можете скопировать значение из одной переменной (maxHealth) в другую (health)

var mana, maxMana; // Вы можете объявить сразу несколько переменных в одной строке через запятую
maxMana = mana = 100; // Вы можете присваивать значение сразу нескольким переменным в одной строке через знак равенства

var name;
name = 'ct.js'; // Текстовые значения или строки, заключаются в кавычки

var title = 'The Almighty Cat'; // Вы можете сразу объявить и записать значение в переменную

var invincible = true, // Буллевые значения
    stunned = false,
    bleed = false; // Вы можете не писать постоянно ключевое слово var, а использовать запятую

Когда мы объявляем переменную с помощью ключевого слова var, ct.js сообщает, что мы хотим создать новую переменную. Без него ct.js выдаст ошибку, потому что мы не можем хранить информацию в несуществующем месте.

При объявлении переменной его значение являеться undefined.
Переменная будет хранить полезную информацию только после записи значения в неё.

Свойства

Переменные отлично подходят для временных значений, но они исчезают после завершения события ct.js (например, после 'Destruction', 'Frame start'). Это делает переменные полезными для быстрых операций, но непригодными для длительной работы. Мы должны использовать свойства для хранения информации, чтобы мы могли использовать ее позже.

Вы можете использовать свойства так же, как и переменные, но они могут существовать только внутри Объектов. Объекты - это очень абстрактные вещи, и они включают в себя все Копии и Комнаты. Вскоре вы создадите и свои собственные Объекты.
Но пока давайте рассмотрим, как создавать и использовать свойства:

this.maxHealth = 100;
this.health = this.maxHealth;

this.maxMana = this.mana = 100;

this.name = 'ct.js';
this.title = 'The Almighty Cat';

this.invincible = true;
this.stunned = false;
this.bleed = false;

Как видите, самое существенное отличие заключается в том, что нам не нужно объявлять свойства. Мы можем начать записывать в них значения напрямую.

Также появилось новое ключевое слово: this. this означает текущий объект, который вызывает код. Если вы пишете код для события 'Frame start' для копии, то this будет указывать именно на эту копию. Запись this.health = 100; означает, что мы храним свойство health внутри текущей копии, со значением 100.

Мы можем использовать ключевое слово this внутри кода комнаты. В этом случае значения будут храниться в комнате.

Операции со значениями, свойствами и переменными

Переменные и свойства довольно бесполезны "как таковые", но с условными операторами, циклами и операциями они становятся мощным механизмом, определяющим логику вашей игры.
О циклах и условных операторах мы поговорим позже. А пока давайте рассмотрим операции с ними.

Операции с числами знакомы каждому. Они похожи на арифметические уравнения:

this.level = 10;
this.health = this.level * 4; // 40
this.health = this.health - 5; // 35
this.inventoryCapacity = (5 + 10) * 8; // 120
this.magicPower = 5 + 10 * 8; // 85
this.magicDamage = this.magicPower + this.level * 5; // 135
this.magicResistance = this.magicPower / 10; // 8.5
/* А что делать если нужно получить остаток от деления? */
this.remainder = 11 % 4; // 3, потому-что 11 / 4 = 2 и 3 в качестве остатка;

Когда нам нужно изменить переменную или свойство, мы можем объединить присваивание и необходимую операцию:

this.health = 10;
this.health += 5; // health теперь 15
this.health /= 5; // 3
this.health *= 10; // 30
this.health -= 20; // 10

Есть также два оператора, которые изменяют значение переменной на 1:

this.counter = 10;
this.counter++; // this.counter теперь 11
this.counter++; // 12
this.counter--; // 11 снова

У строк тоже есть свои операторы. Мы будем использовать знак плюс для объединения строк:

this.name = 'ct.js';
this.title = 'Almighty Cat';
this.title = 'The ' + this.title; // 'The Almighty Cat'
this.name += ', '; // 'ct.js, '
this.name += this.title; // 'ct.js, The Almighty Cat'

Мы можем даже добавлять числа к строкам:

var score = 1000,
    drawText = 'Рейтинг: ' + score; // 'Рейтинг: 1000'

var power = 42,
    powerInfo = power + '% мощности'; // '42% мощности'

Предупреждение! Не используйте математические операторы на строках! Вы можете получить из-за этого непредсказуемый результат.

var money = 100,
    price = '5';
var case1 = money - price, // 95
    case2 = money + price; // 1005 (НЕПРЕДСКАЗУЕМЫЙ РЕЗУЛЬТАТ)

Поэтому обязательным правилом является хранение числовых значений в виде чисел, а не строк.
Если вам по какой-то причине нужно преобразовать строку в число, используйте parseFloat(название_переменной_со_строкой).

Булевые значения и их сравнение

Boolean - это такие переменные и свойства, значения которых либо true, либо false.
Обратите внимание, что мы не используем здесь кавычки.

Булевы значения могут быть получены с помощью сравнения, и они также имеют свои собственные операторы.
Числа имеют сравнения, подобные тем, что мы можем найти в математике, в то время как строки либо равны, либо нет:

var health = 63,
    maxHealth = 100,
    mana = 100,
    maxMana = 100;

health < maxHealth; // true
mana > maxMana; // false
mana >= maxMana; // true
health <= maxHealth; // true
health === maxHealth; // are they equal? false
health !== maxHealth; // they aren't equal, right? true

var cat = 'Albert',
    dog = 'Snowball';
cat === dog; // false
cat !== dog; // true

/* Существуют также нестрогие сравнения, которые сравнивают значения, но преобразуют шаблоны переменных */

5 === '5'; // false, потому что '5' это строка, а не число
5 == '5'; // true
5 === parseFloat('5') // true, потому что parseFloat возвращает число, и так же 5

У булевых значений тоже есть свои операторы. Самый простой из них - !, он оборачивает значение.

!true; // false
!false; // true

var health = 50,
    alive = !(health <= 0); // true
var dead = !alive; // false

Существуют также && и ||. Первый обозначается как "И", а второй - "ИЛИ". Они используются для объединения различных значений.

this.onGround = true;
var keyUp = ct.keyboard.down['up'], // будет "true", если удерживать нажатой верхнюю клавишу со стрелкой
    canJump = this.onGround && keyUp;

this.powerFromLeft = false;
this.powerFromRight = true;
this.poweredOn = this.powerFromLeft || this.powerFromRight; // true

В следующей части мы поговорим об условных операторах и циклах. А пока я рекомендую вам прочитать о стандартных Свойствах из копий и Комнаты.