Select

서론 마지막 효과로 소리를 적용해보 겠습니다. HTML 오디오 태그를 추가해준뒤 어트리뷰트로 보이는거처럼 추가해 줍니다. 오디오태그 자동재생은 브라우저에서 막아둔곳이 많아서 다음과 같이 자바스크립트를 수정해 줍니다. const beeSound = document.getElementById("bee-sound"); const [body] = document.getElementsByTagName("body"); function play() { if (!beeSound instanceof HTMLAudioElement) return; if (beeSound.paused) { beeSound.play(); } else { body.removeEventListener("click", play); } console..

서론 에셋을 화면에 불러와서 날라니는 CSS 애니메이션 까지 적용했는데 움직이지를 않으니까 뭔가 썰렁하네요 CSS variable 하고 트랜스폼 프로퍼티를 이용해서 똥파리가 날라다니는 효과를 추가할게요. CSS 부분 :root { --x: 0; --y: 0; --facing: -1; } CSS파일 최상단에 위에 내용을 추가합니다. 똥파리의 좌표값과 바라보는 방향을 나타냅니다. .control { position: fixed; top: 0; left: 0; width: 100px; z-index: 999; pointer-events: none; transform: translate(var(--x), var(--y)) scaleX(var(--facing)); } 제일 마지막줄 트랜스폼만 추가해줬습니다 자바스..

서론 저번시간에 작업해둔 이미지 스프라이트를 HTML에 불러와서 CSS 애니메이션을 적용해보겠습니다. HTML 구조 잡기 적절한 폴더에다가 index.html 파일을 생성해준뒤 HTML 기본 구조를 잡아 줍니다. body 태그안에 div 엘리멘트를 생성해준뒤 .control 클래스 값을 줬습니다. 그리고 그안에 div 일리멘트와 .bee 클래스값을 줬습니다. .controll 엘리멘트에다가 포지션 fixed를 줘서 .bee를 조종 해주기 위해서 구조를 이렇게 잡았습니다. CSS 적용하기 .control { position: fixed; top: 0; left: 0; width: 100px; z-index: 999; pointer-events: none; } 가장위에 보이게하기위해서 z-index:999로..

서론 이번시간의 최종목표는 원하는 효과를 위해 필요한 에셋 구하기 입니다. 필요한 에셋은 화면에 뿌려줄 이미지와 소리파일이 필요합니다. 에셋을 구할때는 CC0 저작권인지 꼭 확인합니다. 적절한 이미지 찾기 구글에서 여기저기 돌아다니면서 조건에 충족하는 이미지를 아래 사이트에서 찾았습니다. 똥파리로 할려고했는데 잘안보여서 말벌로 작은 변경이 있습니다. 그림에 보시는거처럼 저작권 CC0 합격 사이트에 들어가셔서 링크를 누르시면 다운로드 됩니다. https://opengameart.org/content/red-horned-bee-fly-game-sprites-character Red horned Bee Fly Game Sprites Character FREE GAME ASSET: Red Horned Bee G..

이프로젝트의 최종목표는 제가 웹 프론트엔드 기본기술(HTML, CSS, JS)을 사용해서 화면에 똥파리가 위이잉 소리를 내면서 날라다니는 효과를 만드는 과정을 일지로 기록하는 것 입니다. 왜 하필 똥파리? 똥파리가 갑자기 화면에 나타나서 위이이잉 소리를 내면서 날라다니면 황당하고 웃기지 않을까해서 똥파리를 선택 하게 됐습니다. 시작의 의미로 프로젝트 폴더를 만들고 폴더명을 'flying-fly'로 지었습니다.