다운로드 교육자료 문제해결 레퍼런스 구입방법

교육 자료 : 자바스크립트 : 보드 게임 만들기

단순한 보드 게임
보드 게임을 만들어 봅시다. 아래 그림의 말판에서 각 칸에 도착하면 점수를 더하거나 뺍니다. 출발 위치의 칸에 도착했을 때는 점수가 없습니다. 이동하는 칸 수는 키보드의 엔터 키를 누르면 결정됩니다.

보드 게임판 내려 받기 PDF PPT

우선 키보드의 엔터 키를 누르면 숫자 하나를 선택하도록 해봅시다. 빠르게 변하는 숫자를 눈으로 보고 선택할 수 있도록 숫자 1은 빨간색 LED, 2는 초록색 LED, 3은 파란색 LED로 표시합시다.

var hamster = Hamster.create();
var selecting = true;
var number = 0; // 후보 숫자 1 ~ 3

// 키보드 키를 누르면 호출된다. 마지막 세미콜론(;)을 빠트리지 않도록 주의
window.onkeydown = function(event) {
    var key = event.which || event.keyCode;
    if(key == 13) { // 엔터 키를 누르면
        selecting = false;
    }
};

function select() {
    selecting = true;
    var timer = setInterval(function() {
        if(selecting) {
            number = number % 3 + 1; // 1 ~ 3까지 계속 바뀐다.
            if(number == 1) {
                hamster.leds(Hamster.LED_RED);
            } else if(number == 2) {
                hamster.leds(Hamster.LED_GREEN);
            } else {
                hamster.leds(Hamster.LED_BLUE);
            }
        } else {
            clearInterval(timer);
            console.log('selected: ' + number); // 선택된 숫자 표시

            select();
        }
    }, 200); // 0.2초마다 값을 바꾼다.
}

select();

아래 그림과 같이 각 칸을 0부터 9까지의 번호로 표시하였을 때 현재 위치에서 선택된 칸 수만큼 이동해 봅시다.

var hamster = Hamster.create();
var selecting = true;
var number = 0; // 후보 숫자 1 ~ 3
var position = 0; // 현재 위치

// 키보드 키를 누르면 호출된다. 마지막 세미콜론(;)을 빠트리지 않도록 주의
window.onkeydown = function(event) {
    var key = event.which || event.keyCode;
    if(key == 13) { // 엔터 키를 누르면
        selecting = false;
    }
};

// 한 칸씩 이동한다.
function move(count) {
    hamster.boardForward(function() {
        ++ position;
        if(position > 9) {
            position = 0;
        }
        console.log('position: ' + position); // 현재 위치 표시

        if(count > 1) {
            move(count - 1);
        } else { // 이동 완료
            select(); // 이동을 완료했으니 다시 숫자를 선택한다.
        }
    });
}

function select() {
    selecting = true;
    var timer = setInterval(function() {
        if(selecting) {
            number = number % 3 + 1; // 1 ~ 3까지 계속 바뀐다.
            if(number == 1) {
                hamster.leds(Hamster.LED_RED);
            } else if(number == 2) {
                hamster.leds(Hamster.LED_GREEN);
            } else {
                hamster.leds(Hamster.LED_BLUE);
            }
        } else {
            clearInterval(timer);
            console.log('selected: ' + number); // 선택된 숫자 표시

            // 선택된 숫자만큼 이동한다.
            move(number);
        }
    }, 200); // 0.2초마다 값을 바꾼다.
}

select();

이제 점수를 계산하여 코드를 완성하도록 합시다.

var hamster = Hamster.create();
var selecting = true;
var number = 0; // 후보 숫자 1 ~ 3
var position = 0; // 현재 위치
var score = 0; // 현재 점수
var points = [ 0, 1, -1, 2, -2, 3, -3, 2, -2, 1 ]; // 위치에 따른 점수

// 키보드 키를 누르면 호출된다. 마지막 세미콜론(;)을 빠트리지 않도록 주의
window.onkeydown = function(event) {
    var key = event.which || event.keyCode;
    if(key == 13) { // 엔터 키를 누르면
        selecting = false;
    }
};

// 한 칸씩 이동한다.
function move(count) {
    hamster.boardForward(function() {
        ++ position;
        if(position > 9) {
            position = 0;
        }
        console.log('position: ' + position); // 현재 위치 표시

        if(count > 1) {
            move(count - 1);
        } else { // 이동 완료
            // 점수를 계산한다.
            score += points[position]; // 이동한 위치의 점수를 더한다.
            console.log('score: ' + score + '<br/>'); // 현재 점수 표시

            select(); // 이동을 완료했으니 다시 숫자를 선택한다.
        }
    });
}

function select() {
    selecting = true;
    var timer = setInterval(function() {
        if(selecting) {
            number = number % 3 + 1; // 1 ~ 3까지 계속 바뀐다.
            if(number == 1) {
                hamster.leds(Hamster.LED_RED);
            } else if(number == 2) {
                hamster.leds(Hamster.LED_GREEN);
            } else {
                hamster.leds(Hamster.LED_BLUE);
            }
        } else {
            clearInterval(timer);
            console.log('selected: ' + number); // 선택된 숫자 표시

            // 선택된 숫자만큼 이동한다.
            move(number);
        }
    }, 200); // 0.2초마다 값을 바꾼다.
}

select();
모퉁이가 있는 보드 게임
이번에는 아래 그림과 같이 모퉁이에도 칸이 있습니다. 모퉁이는 회전해서 이동해야 합니다. 출발 위치의 칸에 도착했을 때는 1부터 3까지의 무작위 점수가 더해지도록 합시다.

보드 게임판 내려 받기 PDF PPT

우선 아래 그림과 같이 각 칸을 0부터 13까지의 번호로 표시하고 현재 위치에서 선택된 칸 수만큼 이동하도록 해봅시다. move() 함수를 수정하여 모퉁이에서는 회전하도록 해야 합니다.

var hamster = Hamster.create();
var selecting = true;
var number = 0; // 후보 숫자 1 ~ 3
var position = 0; // 현재 위치
var started = false; // 출발한 이후인가?

// 키보드 키를 누르면 호출된다. 마지막 세미콜론(;)을 빠트리지 않도록 주의
window.onkeydown = function(event) {
    var key = event.which || event.keyCode;
    if(key == 13) { // 엔터 키를 누르면
        selecting = false;
    }
};

function forward(count) {
    hamster.boardForward(function() {
        ++ position;
        if(position > 13) {
            position = 0;
        }
        console.log('position: ' + position); // 현재 위치 표시

        if(count > 1) {
            move(count - 1);
        } else { // 이동 완료
            select(); // 이동을 완료했으니 다시 숫자를 선택한다.
        }
    });
}

function turn(count) {
    hamster.boardLeft(function() {
        forward(count);
    });
}

// 한 칸씩 이동한다.
// 위치가 모퉁이인 경우 왼쪽으로 회전한 후 앞으로 한 칸 이동
// 아니면 그냥 앞으로 한 칸 이동
function move(count) {
    if(started) { // 처음 출발할 때는 왼쪽으로 회전하지 않게 한다.
        switch(position) {
            case 0:
            case 4:
            case 7:
            case 11:
                turn(count);
                break;
            default:
                forward(count);
                break;
        }
    } else {
        started = true; // 출발하였다.
        forward(count);
    }
}

function select() {
    selecting = true;
    var timer = setInterval(function() {
        if(selecting) {
            number = number % 3 + 1; // 1 ~ 3까지 계속 바뀐다.
            if(number == 1) {
                hamster.leds(Hamster.LED_RED);
            } else if(number == 2) {
                hamster.leds(Hamster.LED_GREEN);
            } else {
                hamster.leds(Hamster.LED_BLUE);
            }
        } else {
            clearInterval(timer);
            console.log('selected: ' + number); // 선택된 숫자 표시

            // 선택된 숫자만큼 이동한다.
            move(number);
        }
    }, 200); // 0.2초마다 값을 바꾼다.
}

select();

이제 점수를 계산하여 코드를 완성하도록 합시다. 출발 위치의 칸에 도착했을 때는 무작위의 점수가 더해져야 합니다.

var hamster = Hamster.create();
var selecting = true;
var number = 0; // 후보 숫자 1 ~ 3
var position = 0; // 현재 위치
var started = false; // 출발한 이후인가?
var score = 0; // 현재 점수
var points = [ 0, 1, -1, 2, -2, 3, -3, 2, -2, 1, -1, 2, -2, 3 ]; // 위치에 따른 점수

// 키보드 키를 누르면 호출된다. 마지막 세미콜론(;)을 빠트리지 않도록 주의
window.onkeydown = function(event) {
    var key = event.which || event.keyCode;
    if(key == 13) { // 엔터 키를 누르면
        selecting = false;
    }
};

function forward(count) {
    hamster.boardForward(function() {
        ++ position;
        if(position > 13) {
            position = 0;
        }
        console.log('position: ' + position); // 현재 위치 표시

        if(count > 1) {
            move(count - 1);
        } else { // 이동 완료
            // 점수를 계산한다.
            if(position == 0) { // 출발 위치에 있으면
                score += Math.floor(Math.random() * 3) + 1; // 1 ~ 3까지의 무작위 점수를 더한다.
            } else {
                score += points[position]; // 이동한 위치의 점수를 더한다.
            }
            console.log('score: ' + score + '<br/>'); // 현재 점수 표시

            select(); // 이동을 완료했으니 다시 숫자를 선택한다.
        }
    });
}

function turn(count) {
    hamster.boardLeft(function() {
        forward(count);
    });
}

// 한 칸씩 이동한다.
// 위치가 모퉁이인 경우 왼쪽으로 회전한 후 앞으로 한 칸 이동
// 아니면 그냥 앞으로 한 칸 이동
function move(count) {
    if(started) { // 처음 출발할 때는 왼쪽으로 회전하지 않게 한다.
        switch(position) {
            case 0:
            case 4:
            case 7:
            case 11:
                turn(count);
                break;
            default:
                forward(count);
                break;
        }
    } else {
        started = true; // 출발하였다.
        forward(count);
    }
}

function select() {
    selecting = true;
    var timer = setInterval(function() {
        if(selecting) {
            number = number % 3 + 1; // 1 ~ 3까지 계속 바뀐다.
            if(number == 1) {
                hamster.leds(Hamster.LED_RED);
            } else if(number == 2) {
                hamster.leds(Hamster.LED_GREEN);
            } else {
                hamster.leds(Hamster.LED_BLUE);
            }
        } else {
            clearInterval(timer);
            console.log('selected: ' + number); // 선택된 숫자 표시

            // 선택된 숫자만큼 이동한다.
            move(number);
        }
    }, 200); // 0.2초마다 값을 바꾼다.
}

select();
2인용 대전 게임
두 사람이 키보드의 엔터 키를 번갈아 눌러서 누가 많은 점수를 얻는지 대전 게임을 만들어 봅시다. 점수를 따로 계산하면 됩니다.

var hamster = Hamster.create();
var selecting = true;
var number = 0; // 후보 숫자 1 ~ 3
var position = 0; // 현재 위치
var started = false; // 출발한 이후인가?
var user = 0; // 현재 누구의 차례인가? 0 또는 1
var scores = [ 0, 0 ]; // 두 사람의 현재 점수
var points = [ 0, 1, -1, 2, -2, 3, -3, 2, -2, 1, -1, 2, -2, 3 ]; // 위치에 따른 점수

// 키보드 키를 누르면 호출된다. 마지막 세미콜론(;)을 빠트리지 않도록 주의
window.onkeydown = function(event) {
    var key = event.which || event.keyCode;
    if(key == 13) { // 엔터 키를 누르면
        selecting = false;
    }
};

function forward(count) {
    hamster.boardForward(function() {
        ++ position;
        if(position > 13) {
            position = 0;
        }
        console.log('position: ' + position); // 현재 위치 표시

        if(count > 1) {
            move(count - 1);
        } else { // 이동 완료
            // 점수를 계산한다.
            if(position == 0) { // 출발 위치에 있으면
                scores[user] += Math.floor(Math.random() * 3) + 1; // 1 ~ 3까지의 무작위 점수를 더한다.
            } else {
                scores[user] += points[position]; // 이동한 위치의 점수를 더한다.
            }
            user = 1 - user; // 사람을 바꾼다. 0을 1로, 1을 0으로.
            console.log('score 1: ' + scores[0]); // 첫 번째 사람의 현재 점수 표시
            console.log('score 2: ' + scores[1] + '<br/>'); // 두 번째 사람의 현재 점수 표시

            select(); // 이동을 완료했으니 다시 숫자를 선택한다.
        }
    });
}

function turn(count) {
    hamster.boardLeft(function() {
        forward(count);
    });
}

// 한 칸씩 이동한다.
// 위치가 모퉁이인 경우 왼쪽으로 회전한 후 앞으로 한 칸 이동
// 아니면 그냥 앞으로 한 칸 이동
function move(count) {
    if(started) { // 처음 출발할 때는 왼쪽으로 회전하지 않게 한다.
        switch(position) {
            case 0:
            case 4:
            case 7:
            case 11:
                turn(count);
                break;
            default:
                forward(count);
                break;
        }
    } else {
        started = true; // 출발하였다.
        forward(count);
    }
}

function select() {
    console.log('=== user ' + (user + 1) + ' ==='); // 누구 차례인지 표시

    selecting = true;
    var timer = setInterval(function() {
        if(selecting) {
            number = number % 3 + 1; // 1 ~ 3까지 계속 바뀐다.
            if(number == 1) {
                hamster.leds(Hamster.LED_RED);
            } else if(number == 2) {
                hamster.leds(Hamster.LED_GREEN);
            } else {
                hamster.leds(Hamster.LED_BLUE);
            }
        } else {
            clearInterval(timer);
            console.log('selected: ' + number); // 선택된 숫자 표시

            // 선택된 숫자만큼 이동한다.
            move(number);
        }
    }, 200); // 0.2초마다 값을 바꾼다.
}

select();
갈림길 보드 게임
아래 그림과 같이 갈림길에 도착하면 다른 길로 이동할 수 있도록 해봅시다. 키보드의 키를 눌러 선택하게 할 수도 있지만 여기서는 무작위 수에 따라 선택되도록 합시다.

보드 게임판 내려 받기 PDF PPT

갈림길로 이동하는 것을 구분하기 위한 변수를 추가해도 되지만, 갈림길이 많아지면 경우의 수가 많아져서 복잡해집니다. 아래 그림과 같이 갈림길에 대한 번호를 추가하여 현재 위치 값으로 판단하는 것이 더 간단합니다.

var hamster = Hamster.create();
var selecting = true;
var number = 0; // 후보 숫자 1 ~ 3
var position = 0; // 현재 위치
var started = false; // 출발한 이후인가?
var user = 0; // 현재 누구의 차례인가? 0 또는 1
var scores = [ 0, 0 ]; // 두 사람의 현재 점수
var points = [ 0, 1, -1, 2, -2, 3, -3, 2, -2, 1, -1, 2, -2, 3, 0, -1, 2, -2, 1, 1, -2, 2, -1 ]; // 위치에 따른 점수

// 키보드 키를 누르면 호출된다. 마지막 세미콜론(;)을 빠트리지 않도록 주의
window.onkeydown = function(event) {
    var key = event.which || event.keyCode;
    if(key == 13) { // 엔터 키를 누르면
        selecting = false;
    }
};

function forward(count) {
    hamster.boardForward(function() {
        ++ position;
        // 위치가 14일 때만 0으로 바꾼다.
        if(position == 14) {
            position = 0;
        }
        console.log('position: ' + position); // 현재 위치 표시

        if(count > 1) {
            move(count - 1);
        } else { // 이동 완료
            // 2이나 9에 도착했으면 무작위 수에 따라 갈림길로 바꾼다.
            if(position == 2 || position == 9) {
                if(Math.random() < 0.5) {
                    if(position == 2) {
                        position = 15;
                    } else {
                        position = 19;
                    }
                }
            }

            // 점수를 계산한다.
            if(position == 0) { // 출발 위치에 있으면
                scores[user] += Math.floor(Math.random() * 3) + 1; // 1 ~ 3까지의 무작위 점수를 더한다.
            } else {
                scores[user] += points[position]; // 이동한 위치의 점수를 더한다.
            }
            user = 1 - user; // 사람을 바꾼다. 0을 1로, 1을 0으로.
            console.log('score 1: ' + scores[0]); // 첫 번째 사람의 현재 점수 표시
            console.log('score 2: ' + scores[1] + '<br/>'); // 두 번째 사람의 현재 점수 표시

            select(); // 이동을 완료했으니 다시 숫자를 선택한다.
        }
    });
}

function turn(count) {
    hamster.boardLeft(function() {
        forward(count);
    });
}

// 한 칸씩 이동한다.
// 위치가 모퉁이인 경우 왼쪽으로 회전한 후 앞으로 한 칸 이동
// 아니면 그냥 앞으로 한 칸 이동
function move(count) {
    if(started) { // 처음 출발할 때는 왼쪽으로 회전하지 않게 한다.
        switch(position) {
            case 0:
            case 4:
            case 7:
            case 11:
            case 15: // 15와 19는 갈림길로 진입하는 경우이므로 왼쪽으로 회전
            case 19:
                turn(count);
                break;
            case 18: // 18은 다시 원래 길로 가야하므로 왼쪽으로 회전하고 위치를 9로 바꾼다.
                position = 9;
                turn(count);
                break;
            case 22: // 22는 다시 원래 길로 가야하므로 왼쪽으로 회전하고 위치를 2로 바꾼다.
                position = 2;
                turn(count);
                break;
            default:
                forward(count);
                break;
        }
    } else {
        started = true; // 출발하였다.
        forward(count);
    }
}

function select() {
    console.log('=== user ' + (user + 1) + ' ==='); // 누구 차례인지 표시

    selecting = true;
    var timer = setInterval(function() {
        if(selecting) {
            number = number % 3 + 1; // 1 ~ 3까지 계속 바뀐다.
            if(number == 1) {
                hamster.leds(Hamster.LED_RED);
            } else if(number == 2) {
                hamster.leds(Hamster.LED_GREEN);
            } else {
                hamster.leds(Hamster.LED_BLUE);
            }
        } else {
            clearInterval(timer);
            console.log('selected: ' + number); // 선택된 숫자 표시

            // 선택된 숫자만큼 이동한다.
            move(number);
        }
    }, 200); // 0.2초마다 값을 바꾼다.
}

select();
목차
수업 자료 내려 받기
수업 준비
  1. 하드웨어 살펴보기
  2. 햄스터 · 햄스터S · USB 동글 PDF · PPT
  3. 소프트웨어 설치
  4. PDF · PPT
  5. 로봇과 컴퓨터 연결
  6. PDF · PPT
  7. 소프트웨어 실행
  8. 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. 자리 바꾸기
Copyright 로봇SW교육원 All rights reserved.
어려운 일이 있으면 광운대학교 로봇학부 박광현 교수(akaii@kw.ac.kr)에게 연락하세요.