단순한 보드 게임
보드 게임을 만들어 봅시다.
아래 그림의 말판에서 각 칸에 도착하면 점수를 더하거나 뺍니다.
출발 위치의 칸에 도착했을 때는 점수가 없습니다.
이동하는 칸 수는 키보드의 엔터 키를 누르면 결정됩니다.
우선 키보드의 엔터 키를 누르면 숫자 하나를 선택하도록 해봅시다.
빠르게 변하는 숫자를 눈으로 보고 선택할 수 있도록 숫자 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까지의 무작위 점수가 더해지도록 합시다.
우선 아래 그림과 같이 각 칸을 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();
갈림길 보드 게임
아래 그림과 같이 갈림길에 도착하면 다른 길로 이동할 수 있도록 해봅시다.
키보드의 키를 눌러 선택하게 할 수도 있지만 여기서는 무작위 수에 따라 선택되도록 합시다.
갈림길로 이동하는 것을 구분하기 위한 변수를 추가해도 되지만, 갈림길이 많아지면 경우의 수가 많아져서 복잡해집니다.
아래 그림과 같이 갈림길에 대한 번호를 추가하여 현재 위치 값으로 판단하는 것이 더 간단합니다.
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();
목차
수업 자료 내려 받기
- 원본 그림 2017.01.23 버전 (33.0 MB)
고급
- 행위 기반의 로봇 제어
- 경로 탐색
- 자리 바꾸기
Copyright 로봇SW교육원 All rights reserved.
어려운 일이 있으면 광운대학교 로봇학부 박광현 교수(
akaii@kw.ac.kr)에게 연락하세요.