교육 자료 : 자바스크립트 : 말판 이동하기

햄스터 로봇이 길을 떠나 동굴 속을 탐험하려고 합니다. 동굴 속에는 햄스터가 좋아하는 해바라기 씨가 가득한 보물 상자가 있습니다. 아래 그림에서 햄스터 로봇이 보물 상자 앞까지 이동하려면 어떻게 움직여야 할지 생각해 봅시다. 도착 지점으로 이동한 후에는 보물 상자를 열 수 있도록 햄스터 로봇이 보물 상자 방향을 바라보아야 합니다.

다음 메소드들을 사용하면 말판 위에서 이동하거나 회전할 수 있습니다.

• boardForward(): 검은색 격자로 구성된 말판 위에서 한 칸 앞으로 이동합니다.
• boardLeft(): 검은색 격자로 구성된 말판 위에서 왼쪽 방향으로 제자리에서 90도 회전합니다.
• boardRight(): 검은색 격자로 구성된 말판 위에서 오른쪽 방향으로 제자리에서 90도 회전합니다.

햄스터 로봇을 말판의 출발 위치에 방향을 맞추어 올려놓고 보물 상자 앞까지 이동시켜 봅시다. boardForward, boardLeft, boardRight 함수에 콜백 함수를 아규먼트로 넣어서 호출하면 한 칸 앞으로 이동하거나 한 번 회전한 후에 콜백 함수를 호출해 줍니다.

var hamster = Hamster.create();

hamster.boardForward(function() {
    hamster.boardRight(function() {
        hamster.boardForward(function() {
            hamster.boardForward(); // 이동 완료
        });
    });
});

앞서 작성한 코드처럼 콜백 함수를 계층적으로 사용하는 경우 수행해야 하는 명령이 많아지면 코드가 복잡해집니다. 반복문을 사용해야 하는 경우에는 코드가 더욱 복잡해집니다. 배열에 함수를 순서대로 대입한 후 배열 순서대로 호출하는 방법을 사용해 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(hamster.boardForward);
commands.push(hamster.boardRight);
commands.push(hamster.boardForward);
commands.push(hamster.boardForward);

move(0);

두 번째 동굴도 탐험해 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(hamster.boardForward);
commands.push(hamster.boardForward);
commands.push(hamster.boardRight);
commands.push(hamster.boardForward);
commands.push(hamster.boardForward);
commands.push(hamster.boardRight);
commands.push(hamster.boardForward);
commands.push(hamster.boardForward);

move(0);

세 번째 동굴도 탐험해 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(hamster.boardForward);
commands.push(hamster.boardRight);
commands.push(hamster.boardForward);
commands.push(hamster.boardLeft);
commands.push(hamster.boardForward);
commands.push(hamster.boardRight);
commands.push(hamster.boardForward);
commands.push(hamster.boardLeft);

move(0);

햄스터 로봇이 목이 마릅니다. 숲 속 우물을 향해 달려가야 합니다. 아래 그림에서 햄스터 로봇이 우물 앞까지 이동하려면 어떻게 움직여야 할지 생각해 봅시다. 도착 지점으로 이동한 후에는 햄스터 로봇이 물을 마실 수 있도록 우물 방향을 바라보아야 합니다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(hamster.boardLeft);
for(var i = 0; i < 3; ++i) {
    commands.push(hamster.boardForward);
}
commands.push(hamster.boardRight);

move(0);

두 번째 우물도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(hamster.boardForward);
commands.push(hamster.boardRight);
for(var i = 0; i < 3; ++i) {
    commands.push(hamster.boardForward);
}

move(0);

세 번째 우물도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

for(var i = 0; i < 2; ++i) {
    commands.push(hamster.boardForward);
    commands.push(hamster.boardRight);
    commands.push(hamster.boardForward);
}
commands.push(hamster.boardForward);

move(0);

네 번째 우물도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(hamster.boardRight);
for(var i = 0; i < 2; ++i) {
    commands.push(hamster.boardForward);
    commands.push(hamster.boardRight);
    commands.push(hamster.boardForward);
    commands.push(hamster.boardLeft);
}

move(0);

다섯 번째 우물도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

for(var i = 0; i < 3; ++i) {
    commands.push(hamster.boardForward);
}
commands.push(hamster.boardRight);
for(var i = 0; i < 3; ++i) {
    commands.push(hamster.boardForward);
}
commands.push(hamster.boardLeft);

move(0);

여섯 번째 우물도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

for(var i = 0; i < 2; ++i) {
    commands.push(hamster.boardForward);
    commands.push(hamster.boardRight);
    commands.push(hamster.boardForward);
}
for(var i = 0; i < 2; ++i) {
    commands.push(hamster.boardForward);
    commands.push(hamster.boardLeft);
    commands.push(hamster.boardForward);
}

move(0);

일곱 번째 우물도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

for(var i = 0; i < 3; ++i) {
    for(var j = 0; j < 3; ++j) {
        commands.push(hamster.boardForward);
    }
    commands.push(hamster.boardRight);
}

move(0);

여덟 번째 우물도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

for(var i = 0; i < 2; ++i) {
    for(var j = 0; j < 2; ++j) {
        commands.push(hamster.boardForward);
        commands.push(hamster.boardRight);
        commands.push(hamster.boardForward);
    }
    commands.push(hamster.boardLeft);
}
commands.push(hamster.boardForward);
commands.push(hamster.boardRight);

move(0);

햄스터 로봇이 펭귄 친구를 만나러 얼음 나라에 갔습니다. 얼음 나라는 길이 얼음으로 되어 있어서 너무 미끄럽습니다. 길 위에서는 방향을 바꿀 수 없어요. 벽이 나타날 때까지 계속 앞으로 미끄러져 이동하다가 벽을 잡고 방향을 바꾸어야 합니다. 아래 그림에서 햄스터 로봇이 펭귄 앞까지 이동하려면 어떻게 움직여야 할지 생각해 봅시다. 도착 지점으로 이동한 후에는 펭귄 친구와 얘기할 수 있도록 햄스터 로봇이 펭귄 방향을 바라보아야 합니다.

햄스터 로봇이 아직 너무 어려서 그림으로 그려진 벽은 알 수가 없으니 말판 위에 벽을 세워 놓아야 합니다. 그림의 손과 방향을 맞추어 손을 올려놓도록 합시다.

var hamster = Hamster.create();
var commands = [];

function canMoveForward() {
    return hamster.leftProximity() < 40 && hamster.rightProximity() < 40;
}

function checkAndMoveForward(callback) {
    if(canMoveForward()) {
        hamster.boardForward(function() {
            checkAndMoveForward(callback);
        });
    } else {
        callback();
    }
}

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(checkAndMoveForward);
commands.push(hamster.boardLeft);

move(0);

두 번째 펭귄 친구도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function canMoveForward() {
    return hamster.leftProximity() < 40 && hamster.rightProximity() < 40;
}

function checkAndMoveForward(callback) {
    if(canMoveForward()) {
        hamster.boardForward(function() {
            checkAndMoveForward(callback);
        });
    } else {
        callback();
    }
}

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

for(var i = 0; i < 2; ++i) {
    commands.push(checkAndMoveForward);
    commands.push(hamster.boardLeft);
}

move(0);

세 번째 펭귄 친구도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function canMoveForward() {
    return hamster.leftProximity() < 40 && hamster.rightProximity() < 40;
}

function checkAndMoveForward(callback) {
    if(canMoveForward()) {
        hamster.boardForward(function() {
            checkAndMoveForward(callback);
        });
    } else {
        callback();
    }
}

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

for(var i = 0; i < 4; ++i) {
    commands.push(checkAndMoveForward);
    commands.push(hamster.boardRight);
}

move(0);

네 번째 펭귄 친구도 찾아 봅시다.

var hamster = Hamster.create();
var commands = [];

function canMoveForward() {
    return hamster.leftProximity() < 40 && hamster.rightProximity() < 40;
}

function checkAndMoveForward(callback) {
    if(canMoveForward()) {
        hamster.boardForward(function() {
            checkAndMoveForward(callback);
        });
    } else {
        callback();
    }
}

function move(index) {
    if(index < commands.length - 1) {
        commands[index](function() {
            move(index + 1);
        });
    } else {
        commands[index]();
    }
}

commands.push(checkAndMoveForward);
commands.push(hamster.boardRight);
commands.push(hamster.boardRight);
for(var i = 0; i < 2; ++i) {
    commands.push(checkAndMoveForward);
    commands.push(hamster.boardRight);
}

move(0);

• 원본 그림     2017.01.23 버전 (33.0 MB)

하드웨어 살펴보기	햄스터 · 햄스터S · USB 동글	PDF · PPT
소프트웨어 설치		PDF · PPT
로봇과 컴퓨터 연결		PDF · PPT
소프트웨어 실행		PDF · PPT

1. 코드의 기본 형태 만들기
2. 이동하고 회전하기
3. LED 켜고 소리 내기
4. 순서대로, 반복하여 명령하기
5. 키보드 이벤트
6. 근접 센서 사용하기
7. 바닥 센서 사용하기
8. 밝기 센서와 가속도 센서 사용하기
9. 브레이튼버그의 로봇

1. 말판 이동하기
2. 보드 게임 만들기
3. 그래픽 인터페이스
4. 센서 한 개를 사용한 라인 트레이서
5. 센서 두 개를 사용한 라인 트레이서
6. 햄스터 친구 따라가기 (2인 1조)
7. 벽 따라가기
8. 로봇 청소기 흉내 내기
9. 라인 트레이서 교차로 주행하기
10. 미로 탈출

1. 조립하기
2. 핀/소켓 배치 살펴보기
3. 디지털 입력 - 버튼을 누르면 삐 소리가 나요
4. 디지털 출력 - 어두우면 LED 불이 켜져요
5. 디지털 출력 - 반짝반짝 LED를 깜박여요
6. 디지털 출력 - 기울이는 방향으로 LED가 켜져요
7. 아날로그 입력 - 포텐셔미터를 돌리면 음 높이가 달라져요
8. 아날로그 입력 - 뜨겁지 않게 해주세요
9. 아날로그 입력 - 빛을 따라 움직여요
10. PWM 출력 - LED 불이 부드럽게 밝아졌다 어두워져요
11. PWM 출력 - LED 촛불이 바람에 흔들려요
12. 아날로그 서보 출력 - 햄스터 로봇에게 꼬리가 생겼어요

1. 행위 기반의 로봇 제어
2. 경로 탐색
3. 자리 바꾸기