JavaScript canvas 함수(6)

이전 포스팅을 이어서 작성한 내용입니다. 

https://rubbery.tistory.com/62

JavaScript canvas 함수(5)

 

이전 포스팅에서 토끼를 맞추면 풍선이 사방으로 퍼지는 효과를 만들어보았다.

하지만 풍선의 값들이 배열안에 남아있어서 데이터가 쌓이며 홈페이지에 과부하를 주게된다.

생성된 풍선 값이 배열안에 남아있다.

이를 해결하기위해 풍선이미지가 화면에 벗어나게되면 배열에서 삭제를 시키는 코드를 작성해보자.

 

1. 풍선을 만들어주는 for문 안에 풍선이 화면을 벗어나는지의 여부를 체크하기위해 isOut 배열을 추가한다.

 

 

 

 

 

2. 기존 작성된 setInterval 함수 안에 풍선이 화면을 이탈한지의 여부를 확인하기위한 if문을 작성한다.

 

 

 

3. setInterval 함수 안에 화면을 벗어난 풍선을 제거하는 for문을 작성한다.

 

 

 

Console

콘솔창에서 확인해보면 풍선이 화면에 존재할땐 배열안에 오브젝트값이 존재하지만

풍선이 화면에 벗어난뒤 다시 확인해보면 배열안의 값들이 삭제된것을 볼 수 있다.