댓글 검색 목록

[javascript] ct.js 문서 - JavaScript 소개, 파트 II : 조건 및 루프

페이지 정보

작성자 운영자 작성일 20-08-22 10:05 조회 487 댓글 0

변수는 물건을 저장하는 데는 좋지만 게임을 만들기에는 충분하지 않습니다. 여기서 우리는 조건문과 루프에 대해 이야기하고 게임 로직을 어떻게 정의 할 수 있는지

"if" statements

"if"구조부터 시작하겠습니다.

if (/* this statement is true*/) {
    /* do some stuff */
} else {
    /* do another stuff */
}

필요하지 않은 경우 "else"부분을 생략 할 수 있습니다.

if (/* this statement is true */) {
    /* do some stuff */
}

제대로 작동하려면 괄호 안에 부울 값을 전달하고 코드를 작성해야 합니다. 다음과 같은 간단한 문장으로 많은 일을 할 수 있습니다.

if (this.health <= 0) {
    this.kill = true;
}

var price = 500;
this.money = 1230;

if (this.money >= price) {
    this.money -= price;
    this.inventory.push(/* some item */);
}

this.onGround = true;
var keyUp = ct.keyboard.down['up'];
if (this.onGround && keyUp) {
    this.addSpeed(this, 10, 270);
}

if (this.x < 0) {
    this.x = 0;
}
if (this.x > ct.viewWidth) {
    this.x = ct.viewWidth;
}
if (this.y < 0) {
    this.y = 0;
}
if (this.y > ct.viewHeight) {
    this.y = ct.viewHeight;
}

후자를 약간 최적화 해 보겠습니다.

if (this.x < 0) {
    this.x = 0;
} else if (this.x > ct.viewWidth) {
    this.x = ct.viewWidth;
}
if (this.y < 0) {
    this.y = 0;
} else if (this.y > ct.viewHeight) {
    this.y = ct.viewHeight;
}

"While" loops

"While"루프는 일부 문이 거짓이 될 때까지 일부 코드를 여러 번 실행합니다.

while (/* this statement is true */) {
    /* do something  */
}

동일한 사본을 여러 개 만들어야 하며 이 숫자는 하드 코딩 할 수 없거나 손으로 쓰기에 비교적 크다고 상상해보십시오. 이 경우 "while"루프는 생성 프로세스를 자동화 할 수 있습니다.

var counter = 20; // We need to create 20 Copies

while (counter > 0) {
    ct.types.copy('Enemy', this.x, this.y);
    counter --;
}

"For" loops

일반 "for"루프는 "while"루프와 동일한 방식으로 작동합니다. 이전의 "while"예제를 "for"루프로 바꿔 보겠습니다.

for (var counter = 20; counter > 0; counter--) {
    ct.types.copy('Enemy', this.x, this.y);
}

루프와 관련된 모든 것을 한 줄로 으깬 것 같습니다! 그리고 "for"루프는 다음과 같이 정확히 생성됩니다.

for (/*define variables here*/; /*set a condition*/; /*change variables after each iteration*/) {
    /* loop body */
}

그러나 더 많은 "for"루프가 있습니다. 예를 들어, "for… of"및 "for… in"루프를 사용하여 배열과 객체를 조작 할 수 있습니다.

팁 : 아래의 "for"루프는 선택 사항이며 상당히 고급 기능이지만 복잡한 데이터를 조작하는 동안 강력한 도구이기도 합니다.

"for… of"루프를 살펴 보겠습니다. 그들은 본질적으로 정렬 된 목록 인 배열과 함께 작동합니다. 다음과 같이 배열을 정의 할 수 있습니다.

this.monstersPowers = [1, 2, 3, 5, 8];

console.log(this.monstersPowers[0]); // output the first element to the console

이 모든 값을 콘솔에 출력 해 보겠습니다. "while"문으로 이를 수행하는 방법은 다음과 같습니다.

var ind = 0;
while (ind < this.monsterPowers.length) {
    console.log(this.monsterPowers[ind]);
    ind ++;
}

팁 : 길이 속성은 모든 배열에 존재하며 내부 요소의 수를 정의합니다. 이 변수를 읽고 변경할 수 있습니다.

이것이 일반적인 "for"루프로 동일한 작업을 수행 할 수 있는 방법입니다.

for (var ind = 0; ind < this.monsterPowers.length; ind++) {
    console.log(this.monsterPowers[ind]);
}

이제 "for… of"루프를 보십시오.

for (var element of this.monsterPowers) {
    console.log(element);
}

이것은 자동으로 두 가지 작업을 수행합니다.

자체 내부 카운터 및 조건을 생성하지만 표시하지 않으므로 코드가 깨끗하게 유지됩니다.
각 요소를 요소 변수에 저장합니다 (각 반복마다 다른 값을 가짐).

"for… of"루프는 배열에서만 작동합니다. 그러나 Objects도 있습니다.

객체는 더 추상적 인 것입니다. 이름이 지정된 선반이 있는 캐비닛으로 해석 될 수 있으며 각 선반에는 하나의 항목이 포함됩니다. 그건 그렇고, 배열도 객체이지만 명명 된 선반 대신 숫자가 있는 선반을 포함합니다. 이러한 "선반"의 이름을 "키"라고 하며 키와 값의 쌍은 이전 자습서 부분의 속성입니다!

var magicWand = {
    name: 'The summoner of winter winds',
    forces: ['wind', 'ice'],
    level: 23,
    minLevel: 12
};

console.log(magicWand.name);
console.log(magicWand['forces']); // Another way to get values from Objects — Array-styled!

두 종류의 "for"루프를 사용하여 Array의 모든 요소를 살펴볼 수 있지만, Object의 모든 속성을 살펴 보려면 "for… in"루프가 필요합니다.

for (var key in magicWand) {
    console.log(key, magicWand[key]);
}

거기서 무슨 일이 일어나나요? 먼저 key 변수의 magicWand에서 키를 읽고 싶다고 말합니다. 이것은 "for… of"루프가 작동하는 방식과 거의 비슷합니다. 그런 다음 반복 할 때마다 한 번에 두 개의 값을 출력합니다. 키 ( "name", "forces"등)와 해당 값입니다. magicWand.key는 정적 키 속성을 찾을 것이기 때문에 여기서 magicWand.key를 작성할 수는 없지만 Array 스타일 표기법을 사용하여 이러한 속성을 동적으로 가져올 수 있습니다.

배열 스타일 표기법은 많은 용도로 사용되는 강력한 도구이지만 지금은 "for… in"루프를 사용하는 동안 someObject [key]를 사용해야 합니다.