자바스크립트 2D로 게임만드는강의 질문입니다.

[최연진]

자바스크립트 2D로 게임만드는강의 질문입니다.

// 장애물
class Cactus {
    constructor() {//생성자
        this.x = 500
        this.y = 200
        this.width = 50
        this.height = 50
    }

    draw() {
        ctx.fillStyle = 'red';
        ctx.fillRect(this.x, this.y, this.width, this.height)
        console.log(this.x)

    }
}

지금 장애물 만들어주는 코드는 위 코드이고

 

function 프레임마다실행할거() {
    requestAnimationFrame(프레임마다실행할거)
    timer++ //게임을 실행할때 타이머는 프레임마다 1씩증가

    //그릴때 잔상이 남기때문에 지우고 그리고 지우고 그리고를 하기 위해 캔버스 지우는 코드도 추가해줘야함
    ctx.clearRect(0, 0, canvas.width, canvas.height);//캔버스 다 지워주기
    //dino.x++

    if (timer % 120 === 0) { //프레임으로 나눠주면 1초에 한번 장애물 그려주기 성공
        let cactus = new Cactus(); //객체 생성
        cactus여러개.push(cactus) //이렇게 하면 120프레임마다 장애물 추가된다.
       // cactus.draw()//장애물 그리기
    }
    cactus여러개.forEach(a => {
        a.x-- //장애물 x좌표 --해주기 //한프레임마다 x좌표빼주기

        a.draw()

    })//배열에서 장애물 빼와서 그려주기

    dino.draw()//공룡그리기
}

이 함수는 장애물을 120프레임마다 그려주면서 x위치를 -1씩 빼주는거잖아요??

일단 120프레임이 되려면 프레임마다실행할거()가
120번실행이 되서 120번째가 된건가요?(1번째 질문)

그러면 계속 120번씩 돌아야한다는건데 이렇게 계속 함수 무한 호출되도
메모리는 괜찮은건지 알고싶습니다.(2번째 질문)

그리고 이게 어떻게 움직이는지 모르겠습니다...
120프레임이 지날때마다 장애물을 생성해줘서 배열에 추가해주고
그배열에 있는 요소들을 forEach로 돌리는건데
forEach자체가 첫번째인덱스요소 끝나면 두번째인덱스 돌리고 ... 이러면서
전체 요소 다 순회하고 끝나는건데
그렇게 되면 첫번째 인덱스요소 -1되서 499되고 2번째로 만들어진 요소 들어가서
-1또되서 499되고... 이렇게 계속 반복되서 모든 요소 499위치에서 멈취있는게
아닌가요?? ㅠㅠ (3번째 질문) 아그리고 이렇게 1씩빼지는게 아니라 60px정도 빼진다고 2번째 강의에서
그러셨는데 왜 60px씩 빼지는건가요?requestAnimationFrame가 60번 실행해서 그런가요?
 (4번째 질문)

 

• 이 게시글은 최연진에 의해 10 월, 3 주 전에 수정됐습니다.

[codingapple]

1. 지금 몇프레임이 지났는지는 timer 변수로 세고 있는듯요
2. 넴
3. 프레임마다 -1해주니까 100프레임 지나면 500px에서 400px위치로 갈듯요
4. 그건 기억이 안나는데 진짜그런가 출력해봅시다

[글쓴이]

글