Devjo의 코딩

게임개발의 기초편에서 다음과 같이 draw내부에서 사용되는 함수들을 알아보았다 .getContext의 함수 (draw내부에서 사용) 색 정하기 fillStyle = 'color'; name, rgb(), #HEX 사각형 그리기 테두리만 존재 .strokeRect(x,y,width,height) x,y = 좌표 width, height = 크기 채워진 사각형 .fillRect(x,y,width,height) 사각형 지우기 .clearRect(x,y,width,height) 패스로 그리기 패스 열기 .beginPath(); 형식 ctx.beginPath(); 패스 시작점 .moveTo(x, y); 연결하기 .lineTo(x,y); 채우기 .fill();v *게임 개발의 기초: https://devyoseph..

2021 10 24 업데이트 HTML 세팅 1) HTML의 기본 골격을 사용한다. html / head /body 2) meta태그는 속성을 세가지를 사용한다 charset / http-equiv / name ="viewport" 3) CSS와 js연결. script 속성으로 type="module"을 추가함으로 import와 export를 이용해 더욱 객체화한다 4) canvas를 HTML에 만들지 않는다 는 서로 호환성이 다른 경우에 인터넷 익스플로러(IE)버전 중 가장 최신으로 보여주게 해준다. 쿼크모드라고도 한다 meta viewport는 애플이 디바이스 화면크기에 따라 크기를 조절하기 위해 만들었다. content 내에 설정값을 적어주며 쉼표(,)로 구분한다. width = device-widt..

1. 준비하기 CSS와 Javascript에 연결하기 HTML: 태그 canvas는 width와 height속성을 사용할 수 있는 요소로 드로잉 영역을 생성한다. 간단한 게임을 만들 때 게임이 작동하는 공간으로 사용된다. HTML에 요소를 만들었으니 자바스크립트에도 연결해주어야 한다 var canvas = document.getElementById("canvas"); 는 처음에 비어있는 도화지와 같다. 그림을 그릴 연필과 크레파스(도구)를 같이 불러와야 한다 .getContext('2d'); 메소드를 통해 2차원 랜더링의 함수(도구)에 접근할 수 있다 var ctx = canvas.getContext('2d'); 캔버스의 크기를 정해준다 canvas.width=window.innerWidth - 100;..

window.scrollY를 활용하자 어느 일정 구간을 스크롤하면 '버튼'이 만들어지도록 한다 상수를 정하고 window.scrollY가 그 값을 넘으면 버튼이 생기는 방식이다 const STANDARD = 40; if (window.scrollY > STANDARD) { // 스크롤이 40px을 넘었을 때 toTop.classList.add('go_top'); //go_top이라는 버튼 생성 lastScrollY를 통해 스크롤의 방향을 추적한다 lastScrollY는 이전 내가 스크롤한 기록이다 그렇다면 현재 스크롤의 위치와 비교해서 이용자의 스크롤 방향을 알아낼 수 있다 스크롤을 내릴 때 위 메뉴바가 사라지고 스크롤을 올릴 때 위 메뉴바가 뜨도록 만든다 if (window.scrollY > lastS..

setTimeout(함수명, 밀리초); *주의점: setTimeout이 실행시키는 함수로 클래스 값을 지울 때 e.target이 아닌 querySelector사용 밀리초 후에 함수를 실행한다 function event2(){ document.querySelector('.change').classList.remove('change'); //event2는 change 클래스를 찾아 change를 지운다 } function event1(e){ e.target.classList.add('change'); setTimeout(event2,500); //500밀리초 후에 event2 실행 } 마우스 버튼 이벤트: MouseEvent.button 마우스 왼쪽 버튼 = 0 마우스 휠 = 1 마우스 오른쪽 버튼 = 2 ..

element.addEventListener(event, handler); onclick 이벤트는 새로운 이벤트를 할당할 때 덮어씌워지는 단점이 있다 const btn = document.querySelector('#btn1'); btn.onclick = function(){ console.log("Hello"); } btn.onclick = function(){ console.log("Bye"); }//btn버튼의 결과값은 Bye가 나온다 이런 문제를 줄이기 위해 addEventListener를 사용한다 function event1(){ console.log("Hello"); } function event2(){ console.log("Bye"); } btn.addEventListener('click'..

비표준속성 지금까지 써왔던 class, id 속성을 쓰지 않고 나만의 방식으로 속성을 정하고 분류할 수 있다 속성이름="속성값" HTML //nonstandard 라는 속성을 임의대로 만들어보았다 Javascript non-standard properties CSS와의 연결 [속성 이름]{ }; [nonstandard]{ color: blue; } *다른 속성과는 달리 [대괄호] 안에 넣고 사용한다 자바스크립트 비표준속성 연결 querySelectorAll('[속성이름]') 을 사용하여 연결한다 const nonstandard = document.querySelectorAll('[nonstandard'); console.log(nonstandard); *nonstandard라는 상수에 querySelec..

style 프로퍼티를 이용해 스타일에 접근할 수 있다 today.children[0].style.textDecoration = 'line through'; *text-decoration이 아닌 textDecoration, background-color가 아닌 backgroundColor로 접근한다 [카멜표기법] 요소.style.속성 = ' 속성값 ' ; 하지만 여러 개의 요소의 스타일을 변경하기는 매우 번거롭다 = 스타일형식을 클래스 안에 넣고 해당 클래스를 적용한다 클래스를 적용하는 방법은 크게 두가지가 있다 클래스 전체를 덮어씌우거나 일부분을 변경하는 방법이다 style을 클래스 형식으로 적용하기 전체를 덮어씌운다(className) element.className = 'name'; 원래 클래스는 지..

DOM은 웹페이지에 나타난 html 문서 전체를 → 객체로 표현한다 HTML 문서가 만들어지면 객체들의 정보가 DOM객체에 입력된다(태그→요소노드,텍스트노드) HTML 태그 속성(property)들은 대부분 DOM객체의 요소노드의 속성이 되지만 HTML 표준이 아닌(ex: href) 속성은 요소노드의 속성이 되지 않는다 //link 라는 href링크를 가진 id가 존재한다 console.log(link); //출력된다 console.log(link.href); //undefined가 출력된다. //href는 HTML의 표준 속성이 아니기 때문이다 HTML표준이 아닌 속성의 접근 / 추가 / 삭제 하는 메소드명에는 Attribute 단어가 공통으로 들어간다 자바스크립트 → HTML 속성 접근하기 eleme..

요소노드 DOM을 노드로 이루어져 있으며 요소노드는 뼈대를 이룬다 요소노드들을 다루는 속성들을 익힌다면 자바스크립트에서 HTML 요소를 변경할 수 있다 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue //먼저 연결을 하고 const myPro = document.querySelector('#list-1'); //list-1은 태그이다 //속성들을 적용해본다 console.log(myPro.innerHTML); // #list-1의 내부 요소들을 보여준다 console.log(myPro.outerHTML); // #list-1를 포함한 내부 요소들을 보여준다 console.log(..