[Javascript Basic] 03. 공튕기기 게임(2)

학습 목표

• 앞서 만든 캔버스를 이용해 공을 움직여보자

공 움직이기

먼저 우리는 공을 움직일 것이기 때문에 '방향'이라는 새로운 변수가 필요하다. x축, y축, 속도를 변수에 담아보자.

// 방향에 대한 변수 설정
let arcMoveDirX = 1; 
let arcMoveDirY = -1;
let arcSpeed = 1;

• 이제 특정 조건을 만족하면 각각의 arcPos에 arcMove를 증감하는 방식을 적용하여 공을 움직여 보자. (arcSpeed를 곱해줌으로서 속도도 조절 가능)
• x축 코드만 활성화시 가로, y축 코드만 활성화시 세로, 모두 활성화시 대각선으로 움직이는 것을 볼 수 있다.
• arcPosX, arcPosY를 증감해주는 이유는 원의 중앙을 기준으로 움직이기때문에 기존에 설정한 radius값을 설정해주었다.

// 상태변화
function update() {
    if(arcPosX - 25 < 0 ) { // 왼쪽 벽에 부딪히면 오른쪽으로
        arcMoveDirX = 1;

    } else if(arcPosX + 20 > canvas.width){ // 오른쪽 벽에 부딪히면 왼쪽으로
        arcMoveDirX = -1;
    }
    if(arcPosY - 25 < 0) { // 아래쪽 벽에 부딪히면 위로
        arcMoveDirY = -1; 
    } else if(arcPosY + 25 > canvas.height) { // 위쪽 벽에 부딪히면 아래로
        arcMoveDirY = +1; 
    }

    //arcSpeed+=0.01;
    arcPosX += arcMoveDirX * arcSpeed;
    arcPosY -= arcMoveDirY * arcSpeed;
}

// 움직임을 위해 코드 추가
setInterval(update, 10);

학습 내용

• 내가 바꾸는게 뭔지, 어떤걸 바꿔야하는 인지하고 그것을 변수로 설정해서 바꿔보는 연습
• 조건문 로직 구현하는 연습