이전편좌로 장애물들이 나온다. 스페이스바를 누르면 공룡이 점프를 한다. 장애물과 공룡이 충돌할 경우 종료   index.html  canvas 태그를 이용하여 만든다. m" data-og-host="ranidiant.tistory.com" data-og-source-url="https://ranidiant.tistory.com/entry/js-%ED%81%AC%EB%A1%AC-%EA%B3%B5%EB%A3%A1-%EA%B2%8C%EC%9E%84-%EB%A7%8C%EB%93%A4%EA%B8%B0" data-og-url="https://ranidiant.tistory.com/entry/js-%ED%81%AC%EB%A1%AC-%EA%B3%B5%EB%A3%A1-%EA%B2%8C%EC%9E%84-%EB%A7%8C%..

크롬 공룡게임 js로 만들기! 게임진행우->좌로 장애물들이 나온다. 스페이스바를 누르면 공룡이 점프를 한다. 장애물과 공룡이 충돌할 경우 종료   index.html  canvas 태그를 이용하여 만든다. main.jsconst canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth - 100;canvas.height = window.innerHeight - 100; 처음 비어있는 캠버스에 표시해주기 위해 랜더링 컨텍스트에 접근해야한다. getContext그려진 내용들을 보일 캔버스 사이즈도 정해준다.    let dino = { x: 10, y: 200, w..

가입하기 https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com 먼저 npm 패키지 배포를 위해 npm 사이트에 가입이 되어 있어야 한다. 2. $ mkdir [디렉토리명] $ cd [디렉토리명] $ npm init npm..

👀 lottie 디자이너 분께서 lottie json을 만들어주셨다. ✅ html 페이지에 적용해보자 📌 공식문서 보기 Lottie Docs airbnb.io 로티 : 에어비앤비에서 개발한 라이브러리 애니메이션은 백터 기반, svg로 저장 된다. 📌 CDN https://cdnjs.com/libraries/lottie-web lottie-web - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript - Simple. Fast. Reli..

function getFileExtension(fileName) { let fileLegnth = fileName.length; // 가장 마지막의 . 의 위치 let lastDot = fileName.lastIndexOf('.'); // .의 다음 위치부터 파일 총 길이까지 let fileExtension = fileName.substring(lastDot + 1 , fileLegnth).toLowercase(); return fileExtension; } .lastIndexOf() 문자열 위치를 찾습니다. indexOf() 와 반대로 뒤에서부터 시작하여 찾아줌 .substring() 특정 문자열을 잘라내어 반환한다. substring(start, end) 시작위치에서 종료 위치까지 문자열을 자른다. ..

swiper 슬라이드에 마우스를 올렸을 때 슬라이드 동작을 일시적으로 정지하고 싶은 경우 See the Pen swiper 2 - autoplay stop on hover by jaeheekim (@jaehee) on CodePen. $('.swiper').hover(function() { swiper.autoplay.stop(); }, function(){ swiper.autoplay.start(); }); swiper.autoplay.stop() swiper.autoplay.start() 두 개 속성을 이용하여 마우스가 올려졌을 때는 슬라이드 stop() 그 외는 다시 start로 적용되게끔 한다. 이때 슬라이드 동작이 멈출 때 기준은 하나 slider 기준 하나의 슬라이드 처음과 끝이 모두 시작과 ..

new Date() const date = new Date(); console.log(date) //Mon Apr 03 2023 13:16:27 GMT+0900 (한국 표준시) 날짜 가져오기 const date = new Date(); const year = date.getFullYear(); const month = date.getMonth(); const day = date.getDate(); console.log(year, month, day); //2023 3 3 //현재 날짜 2023년 4월 3일 월 정보를 가져오기 위해 getMonth()를 활용했다. 주의할 점은 1월은 0부터 시작하여 12월은 11로 나타나기에 +1을 해줘야함 YYYY-MM-DD 형식으로 const date = new Dat..

간혹 작업하다보면 흐르는 배너일까 슬라이드일까 하는 부분이 필요할 때가 있다 애니메이션 요소로도 만들 수 있지만 swiper를 이용한 슬라이드로 만들어보기 smooth motion of slide 🧵 조건 슬라이드 2개가 서로 다른 방향으로 흘러가야함 ( 오른쪽->왼쪽 / 왼쪽 ->오른쪽) swiper loop 옵션을 사용하여 무한으로 돌아야함 부드럽게 흐르는 이미지 🔧 HTML/CSS/JS 1. HTML 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 html layout 은 swiper js Doc 기본구조를 적용하여 진행했다. 두 개의 슬라이드가 서로 다른 방향으로 흘러가야 하기 때문에 ltr rtl 를 사용해야 한다. 컨테이너 요소에 슬라이드 방향을 지정해주는 것인데 l..