KEEP CODING

캔버스에 마우스로 그림을 그리기 위해서는 mousemove event를 이용해줘야 한다. 과정 마우스로 그림을 그리는 과정을 생각하면 다음과 같다. 1. 마우스를 원하는 곳으로 이동시킨다. 2. 클릭한다. 3. 클릭한 채로 그림을 그린다. 4. 클릭을 뗀다. mousemove event 위의 과정과 관련된 이벤트들은 다음과 같다. mousedown 마우스 버튼을 누를 때 발생한다 mouseup 마우스 버튼을 뗄 때 발생한다 mousemove 마우스를 움직일 때 발생한다 mouseout 마우스를 해당 element 밖에서 안으로 이동시킬 때 발생한다 (mouseover) (마우스를 해당 element 안에서 밖으로 이동시킬 때 발생한다) 1 2 3 4 5 6 7 8 9 10 11 // mouse event..

Canvas는 Javascript를 이용해 원하는대로 그림을 그릴 수 있는 API이다. 보통 직사각형의 캔버스를 사용하는데, 특이한 모양의 캔버스를 만들고 싶어서 찾아보았다. 캔버스 만들기 1 2 3 4 5 6 7 8 9 const canvas = document.getElementById("canvas"); canvas.width = 300; canvas.height = 300; canvas.style.border = "1px solid black"; Colored by Color Scripter cs 300px*300px 크기의 캔버스를 화면에 만들고, 검은색 테두리로 캔버스를 구분할 수 있도록 한다. 원하는 모양 그리기 직사각형 직사각형 모양은 정해진 메소드로 쉽게 그릴 수 있다. 색칠된 직사각형 ..

복사하기 위해서는 두 가지 과정이 필요하다. 1. 복사할 내용 선택 2. 복사 1번에서 텍스트를 선택하는 .select()의 경우, textarea나 input과 같은 form 엘리먼트에서만 사용이 가능하다. 즉, textarea나 input을 사용하지 않는 경우 .select()를 사용해 문자를 선택할 수 없다. 선택할 내용이 다른 곳(div, span, p 등)에 있는 경우는 다른 방법을 사용해야 한다. execCommand를 사용한 복사 execCommand를 사용해 복사하기 위해서는 아래와 같은 과정을 거쳐야한다. 1. document에 .select()가 가능한 element 생성 2. 1번에 복사할 내용을 입력한다 3. .select()를 사용해 복사할 내용을 선택한다 4. 클립보드로 복사한다..

아래의 점수판은 오프라인에서 보드게임 야찌를 할 때 사용하는 점수판입니다. 주사위는 있는데 점수판을 만들기 귀찮은 적이 있어서 만들었습니다. 주사위를 굴려서 나온 숫자를 입력해서 점수확인/submit버튼을 누르면 자동으로 점수를 계산해주고, 그중에 내가 적을 점수를 누르면 선택됩니다. 두 가지 종류가 있으니 편한 것으로 사용하세요 🎲 한글 점수판(한판) https://yahtzeeone.purple402.repl.co/ 야찌 점수판 최고 기록 기록이 없습니다 yahtzeeone.purple402.repl.co 영어 점수판(3판) https://yahtzee.purple402.repl.co/ Yahtzee Yahtzee Categories Aces Deuces Threes Fours Fives Sixes ..

주사위는 있는데 점수판 만들기가 귀찮을 때 사용할 야찌 점수판을 만들어보려고 한다. 실제 야찌 점수판 야찌 규칙과 점수판 기록법 https://namu.wiki/w/%EC%95%BC%EC%B0%8C 야찌 - 나무위키 주사위 5개를 던진다.이 중 원하는 주사위들은 남겨두고 나머지 주사위들을 다시 던진다. 다시 던지기는 한 라운드에 두 번까지[3] 가능하며, 앞에서 던지지 않았던 주사위도 원한다면 다시 던질 namu.wiki 규칙과 구현해야 할 기능 5개의 주사위 눈을 입력한다 5개의 주사위의 눈을 입력받는다(모두 입력해야 한다) 1~6 사이의 숫자가 아니면 입력받지 않는다. 원하는 주사위를 남겨두고 나머지 주사위들을 다시 던진다. 한 라운드에 두 번 까지 가능하며, 던지지 않았던 주사위들도 원한다면 다시 ..

https://javascript30.com/ JavaScript 30 Build 30 things with vanilla JS in 30 days with 30 tutorials javascript30.com https://github.com/wesbos/JavaScript30 wesbos/JavaScript30 30 Day Vanilla JS Challenge. Contribute to wesbos/JavaScript30 development by creating an account on GitHub. github.com 내 github repository https://github.com/purple402/javascript30 purple402/javascript30 Contribute to pu..

목표 두더지 잡기 게임 구현하기 -시작 버튼을 누르면 게임을 시작하고, 10초 후에 게임을 종료한다. -두더지가 무작위로 올라오고, 올라갔다 내려오는 시간도 무작위로 설정한다. -두더지를 클릭하면 title옆에 숫자가 바뀌고, 총 몇 마리를 잡았는지 알려준다. 어떻게 해야 할지 감이 안잡혀서 영상을 보며 같이 코드를 작성했다. 영상의 코드 만들어야 할 함수 -무작위 시간을 출력하는 함수 -두더지가 나올 구멍을 정하는 함수 (같은 곳을 연속으로 두번 선택하지 않도록 한다. 설정하지 않으면 클릭해도 새로운 두더지가 나와있어서 들어가지 않게된다.) -두더지가 나오게 하는 함수 -게임을 시작하는 함수 -클릭했을 때 두더지가 다시 들어가고, 점수를 올려주는 함수 - addEventListener로 연결 1 2 3..

목표 카운트다운 기능 구현하기 버튼 사용해 정해진 시간을 설정하거나, 맨 오른쪽의 input을 통해 내가 원하는 시간을 입력할 수도 있다. 내가 작성한 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 const timeLeft = document.querySelector('.display__time-left'); const endTime = document.querySelector('.display__end-time'); const buttons = docume..

목표 비디오 옆의 bar를 움직여 재생 속도 조절하기 내가 작성한 코드 1 2 3 4 5 6 7 8 9 10 11 const speed = document.querySelector('.speed'); const bar = speed.querySelector('.speed-bar'); const video = document.querySelector('.flex'); speed.addEventListener('mousemove', (e) => { e.preventDefault(); const height = e.offsetY bar.style.height = `${(e.offsetY / 400) * 100}%`; bar.innerHTML = `${(e.offsetY / 100).toFixed(1)}x`; ..

목표 마우스 클릭/드래그로 화면 내의 요소 움직이기 내가 작성한 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 const items = document.querySelector('.items'); let coords = { left: 0, x: 0 } function clickItems() { items.classList.add('active'); coords = { left: items.scrollLeft, x: event.clientX } items.addEventListener('mousemove', dragItems); items.addEventListener('mouseup', leave..