 | |
|
움직이는 생명체
이런! 아무도 다른 것과 교배를 하지 않는다. 우리는 이 생명체들이 움직여 다른 생명체를 찾을 수 있도록 도와주어야 한다.
속도에 근거해 움직이는 생명체
우리의 생명체에 설정한 속성 두 가지는 수평과 수직 속도다. 이 속도는 생명체가 한 번의 "돌" 때마다 움직이는 픽셀 수다. 이런 일이 벌어지도록 Creature.js에 다음 코드를 추가한다.
Listing 11. 움직이는 생명체
...
this.move = function (){
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
this.renderAt(this.x, this.y);
};
this.renderAt = function(xpos, ypos){
theDiv = document.getElementById(this.id);
theDiv.style.left = this.x;
theDiv.style.top = this.y;
};
...
|
먼저 새로운 위치 정보를 객체에 설정한다. 그 다음 renderAt() 메서드를 호출해 새로운 left와 top 스타일 값을 변경한 새로운 위치에 실제 div를 위치시킨다. 마지막으로 계속 움직이도록 생명체에 알려주어야 한다. Environment.js에 있는 setTimeout() 자바스크립트 함수를 사용해 그렇게 할 수 있다.
Listing 12. 계속해서 움직이는 생명체
...
function createNewEnvironment(){
size = rand(maxSize);
theCreature1 = new Creature();
theCreature1.createAt("thisId1", 0, rand(width-size),
rand(height-size), size,
rand(255), rand(255), rand(255),
-10 + rand(20), -10 + rand(20));
size = rand(maxSize);
theCreature2 = new Creature();
theCreature2.createAt("thisId2", 1, rand(width-size),
rand(height-size), size,
rand(255), rand(255), rand(255),
-10 + rand(20), -10 + rand(20));
setTimeout("nextTurn()", interval);
}
function nextTurn(){
theCreature1.move();
theCreature2.move();
setTimeout("nextTurn()", interval);
}
|
setTimeout() 함수는 자바스크립트 엔진이 일정 시간이 지날 때마다 어떤 동작을 실행하도록 한다. 이번 경우에는, nextTurn() 함수가 그 동작이 된다. 그리고 주기는 이전에 설정한 것처럼 1/10초(100밀리초)로 설정한다. nextTurn() 함수는 두 개의 생명체를 움직인다. 그리고 타임아웃을 설정해 1/10초마다 다시 실행하도록 한다.
이제 파일을 저장하고 브라우저를 다시 읽어 들이면, 페이지 범위를 벗어나면서까지 생명체가 움직이는 것을 볼 수 있다.
가장 먼저 해야 할 일은 그것들의 움직임을 멈추는 방법을 만드는 것이다. 그래야 화면에서 사라지지 않고 환경의 모서리에 튕기는 모습을 볼 수 있을 것이다.
생명체 멈추기
생명체를 멈추는 것은 매우 간단하다. 그것들이 움직임을 시작하고 멈추는 방법만 만들면 된다. environment.js에 새로운 변수를 추가하여 생명체가 움직이기 전에 확인하도록 한다.
Listing 13. 계속 움직일지 확인하기
var ison = true;
var maxSize = 100;
var maxWidth = 600;
...
function nextTurn(){
theCreature1.move();
theCreature2.move();
if (ison){
setTimeout("nextTurn()", interval);
}
}
|
모두 움직이는 상태로 시작했고 이 경우 생명체들은 계속 움직일 것이다. 모든 것을 멈추기 위해 새로운 div를 environment.html 페이지에 추가한다.
Listing 14. 멈춤 스위치
...
<body onload="createNewEnvironment()">
<div onclick="ison = false;alert('Stopping...');">Stop</div>
<div id="environment" style="float: right; width:
600px; height: 500px; border: 3px solid black;position: relative;">
...
|
저장하고 다시 읽어 들이면, 새로운 div가 왼쪽에 추가된 것을 확인할 수 있다.
그림 21. 멈춤 스위치
이제 도망자들을 처리해 보자.
세상의 끝 탐지하기
생명체가 멀리 달아나도 서식지를 그만큼 넓힐 수 없다. 그 대신 그것들이 환경의 경계선에 닿으면 튕기기를 원한다. 달리 말하면 생명체가 옆 벽에 닿으면 속도를 반대로 바꾸길 바란다. 즉 만약 3픽셀/턴의 속도로 오른쪽으로 가고 있었다면, 3픽셀/턴의 속도로 왼쪽으로 가기를 원한다는 것이다. 그렇게 하려면 생명체가 움직일 때마다 위치를 확인해야 한다. 이런 변경 사항을 Creature.js에 반영한다.
Listing 15. 생명체 튕기기
...
this.bouncex = function(){
this.xspeed = -1 * this.xspeed;
};
this.bouncey = function(){
this.yspeed = -1 * this.yspeed;
};
this.die = function(){ alert("Killing this creature."); }
this.move = function (){
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
if ((this.x + this.size) > maxWidth ){
this.x = maxWidth - this.size;
this.bouncex();
} else if (this.x < 0) {
this.x = 0;
this.bouncex();
} else if ((this.y + this.size) > maxHeight ){
this.y = maxHeight - this.size;
this.bouncey();
} else if (this.y < 0) {
this.y = 0;
this.bouncey();
}
this.renderAt(this.x, this.y);
};
...
|
아래부터 시작해서 경계선의 옆면, 위 또는 바닥에 닿았는지 확인하고 있다. 기억할 것은, 생명체의 원본이 좌측 상단 구석에 있으므로 오른쪽과 아래 벽을 확인할 때 생명체의 크기만큼을 고려하여 추가해야 한다.
만약에 그것들이 경계에 도달하면 그들의 위치를 약간 조정해 다시 범위 안으로 돌아가게 해야 한다. 그리고 bounce 함수를 호출해 그 속도를 바꿔야 한다. 다음에 그것들이 움직이면 다른 방향으로 움직이게 될 것이다.
저장하고 페이지를 다시 읽으면, 생명체들이 탁구공처럼 벽면에 튀기는 것을 볼 수 있을 것이다.
| |
