[JavaScript] 파도 효과 구현하기

파도 효과 구현하기

우선 visual studio를 사용한다면 live server 익스텐션을 추가해서 live server 환경에서 실행을 해야합니다.

프로젝트 구조

다음과 같이 구성되어 있습니다.

HTML

html 같은 경우에는 js, css 파일을 로드하고 다른 요소를 만들지는 않았습니다.

CSS

css 역시도 설명할게 없습니다.

JS

• Point.js
  Point.js는 좌표들을 생성합니다. 좌표를 생성하는 이유는 Wave.js에서 Point에서 생성해낸 좌표를 기준으로 라인을 이어야하기 떄문에 좌표를 생성하고 각각의 좌표가 움직이는 speed등을 정합니다.
• Wave.js Wave.js에서는 Point에서 생성한 각각의 좌표들을 이어 라인을 이어지게하는 역할을 합니다.
  반복문을 통해 이전 좌표 값과 현재 좌표 값 을 이어주는 방식으로 했습니다.
• App.js App.js는 캔버스 엘리먼트를 생성, 추가하고 Wave객체를 생성합니다. 또한 사이즈가 변했을때의 값을 다시 설정하고 애니메이션 관련 루틴을 정의합니다.

실행화면

 

전체 코드는 github에서 확인 가능합니다.

github: https://github.com/hanhyung6376/javascript/tree/main/wave

GitHub - hanhyung6376/javascript: 자바스크립트 공부

 

참고: https://velog.io/@jakeseo_me/%EC%9B%B9-%EC%95%84%ED%8A%B8%EC%9B%8C%ED%81%AC-1-%EB%82%98%EB%A7%8C%EC%9D%98-%ED%8C%8C%EB%8F%84-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0