javascript 로 공룡 점프게임 만들기

Question

공룡점프 게임영상을 따라 하고 있는데var cactus = new Cactus(); 이 구문 위치가 바뀌었는데 실행결과를 설명해 주실 분 계실까요? 이해가 안되서... 부탁드립니다....ㅠㅠ아래는 코드입니다.var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth - 100; canvas.height = window.innerHeight - 100; var dino = { x : 10, y : 200, width : 50, height : 50, draw(){ ctx.fillStyle = 'green'; ctx.fillRect(this.x,this.y, this.width,this.height); } } dino.draw(); class Cactus { constructor(){ this.x = 1000; this.y = 200; this.width = 50; this.height = 50; } draw(){ ctx.fillStyle = 'red'; ctx.fillRect(this.x,this.y, this.width,this.height); } } var timer = 0; var cactusArray = []; function framedo() { requestAnimationFrame(framedo); var cactus = new Cactus(); timer++; ctx.clearRect(0,0, canvas.width, canvas.height); if(timer % 120 === 0) { cactusArray.push(cactus); } cactusArray.forEach((a) => { a.x--; a.draw(); }); dino.draw(); } framedo(); Document

으악 또 · Accepted Answer

원래는 객체를 한번만 생성 하는 거구 바뀐건 프레임 돌때마다 객체를 생성하는 거에요 저러는 이유는 객체를 하나 만들어서 배열에 넣어도 레퍼런스가 같아서 1나의 Cactus만 있는 거라서바뀐걸로 하는 거 같은 데 저러면 프레임 돌때마다 안쓰는 객체가 생성되니 뭐 어차피 스크립트라 큰 문제는 아니지만 자동으로 가비지를 날리니 하지만 프레임마다 틱차이가 좀날지도요저 라면요런 식으로 사용 할 듯요if(timer % 120 &#61;&#61;&#61; 0) {cactusArray.push(new Cactus());}

javascript 로 공룡 점프게임 만들기

1개의 답변

#requestanimationfram 목록