모-코드

I. INTRO : 프로젝트관련 차근차근 성장을 위해서 하자 II. 게임개발 1. 폭파시키기 폭파는 누가 과연해야하는가? 터지는건 적이 터지는데, 누가 해야하는가? 함수는 시키는 것이다. 터지다는 것 명령어를 함수로 한다. enemy에 터지라고 할 때... 1) 충돌시 폭파 이미지 그리기 export default class Enemy{ constructor(x = 0, y = 0){ // this.img = document.querySelector("#enemy"); // this.imgEplo = document.querySelector("#exposion"); // this.x = x; // this.y = y; // this.speed = 3; // //이 변수에 함수의 참조값이 들어갔는지 // ..

I. INTRO : 프로젝트관련 결과에 너무 목매달지 말자 아무거나 코드 들고오려고 하지말자 만든거 만큼만 발표하자 너무 크게하지말고 조금만 해서 조금씩만 더해가자! 그래야만 내가 만든것이 되고, 어제 콜백함수를 썻다. 이거는 객체지향의 모든개념에서 쓰인다. 특히 이벤트와 관련곳엣 쓰일 수있다 오늘은 창 전환과 충돌에 대해서 한다. II. 게임만들기 1. 적기와의 충돌 체크 (1) 이론 boy만 검사하려면 적기만 쉽게 관리 할 수있어야한다 boy가 적기 이용하려고하지만, 적기는 canvas가 가지고있다. 그렇다면 boy가 canvas참조해야하나? 이상하다 loop가 만들어진다. (이미 canvas가 boy참조상태) 이것을 해소하기 위해서 그림을 다시 그려보자... 그렇다면... canvas도 boy도 e..

I. 게임만들기 1. 적기관련 (1)움직이기 update(){ this.y += this.speed; // if(this.y == 700){ // this.y = 0; // // this.x += 100; // } } export default class Gamecanvas{ //생성자 만들기 constructor(){ //enemy this.enemies = [new Enemy(10,0),new Enemy(30,0),new Enemy(300,0),new Enemy(500,0),new Enemy(556,0) ,new Enemy(800,10),new Enemy(700,20),new Enemy(60,0),new Enemy(300,30),new Enemy(700,0)]; } update()함수에 적기의 y값을..

I. INTRO : 지난시간 복습 입력감지 후 지령내리기 update() 점진적, draw()는 화면에 주사하는 역할을한다. II. 게임만들기 1. 적기(enemy) 만들기 적기의 경우 자기스스로 해야한다. 다만 자기스스로 하는것이 힘들다. 스스로 움직임 VS 캔버스가 지령을 내려주기 무엇이 바람직하나? 두개 다 차례대로 해보자 (1) 움직이기 keyDownHandler(e){ // console.log("aaaa"); console.log(`e.key : ${e.key}, e.char: ${e.char}`); switch(e.key){ case "ArrowUp" : this.boy.move(1); break; case "ArrowRight" : this.boy.move(2); break; case "A..

I. 들어가며 : java의 함수와 다른 JavaScript 특유의 함수관련 개념 및 용어정리 위한 것이다. I. 함수표현식 1. 익명함수 함수는 일급객체여서 일반변수처럼 변수명을 할당 할 수있다. 이 경우 함수가 복사된것이 아니라 함수의 참조값을 변수에 대입하게 되는 것이다. 결국 함수 호출은 변수명으로 해야한다. var foo = function(a,b){ }; var bar = foo; 참고로 함수명과 변수를 가진 익명함수는 유사한것으로 볼수있다 결국 함수명으로 호출한다는 것은 변수명으로 호출한 것처럼 볼 수있기 때문이다. II. 함수 호이스팅 변수 호이스팅은 변수를 선언 후 대입하기 이전에 변수출력을 하면 undefined 가 나온다 이유는 DIA 단계에서 A이전 이기 때문이다. (변수 호이스팅은..

I. 인라인 태그 학습하기 (8) 1. u,i,b 태그 (30) (1) u태그 말 그대로 underLine 으로 하는 것이다. 이렇게 스타일을 꾸며주는 태그가 없어질거같지만 안없어지고있음, 왜냐하면 경고로 있음 CSS로 충분히 스타일을 줄수가 있다. 사실 태그로 스타일주는것이 바람직하지는 않다. (2) i 태그 이탤릭체인데, 이것도 CSS로 줄수도있다. 나중에 다른태그와 비교할때 화면에 보여주기위한 스타일로 하지말고, 의미로 표현하기 위해서 쓰는것을 권하는 편이다 최초 CSS없던 시절의 취지와 달라졌다 (3) u태그 언더라인이다. 이것도 마찬가지이다. (4) b태그 얘는 bold이다. 그런데 html의 의미를 html5에서는 다르다 즉 CSS에 있는것을 두고 이후 얘는 의미로서 보자라고한다. (5) br..

I. 시맨틱 영역태그(6) 1. 섹션 내의 영역 태그 용법(22) main은 꼭 한번만 가능한데, 한번은 나와야할까? 나오지 않아도 괜찮다! index페이지나 관리자페이지 등은 메인이 없을수도있다. 왜? 음식먹으러 왔는데, 중국집이 요리 홍보위해 시식코너 만들었는데 메인은 없는것이다.' 1) header / main / footer 얘들은 section이 아니기 때문에 제목을 이끌고 있는것들이 아님 2. 블록태그와 인라인 태그의 특징(23) 지금까지는 방만들기였다면, 이제부터는 방과달리 content자체를 꾸며주거나 content를 설명할때 쓰는것이다. 어휘자체에서 의미를 느껴보자 block 는 머릿속에 박스(영역)을 그리고 영역안에 content가 들어간다 inline 은 _______ 한줄에서있는데,..

I. 게임 쓰레드 이해하기 무한 loop에 빠져있다. 흐름이 하나 면은 다른 것을 못한다를 의미한다. 즉 흐름이 하나가 아니라는 것을 의미한다. 스레드로 흐름을 별개로 만들어주어야한다. 하나는 무한 + 하나는 사용자의 입출력담당 위해 무한 mainTread(보조흐름이지만, 추가한): uiThread 초당 60번돌리기위한 흐름 : gameThread 두개가 동시에 동작한다. 항상 있다고 해야한다. 만들 때 메인쓰레드인지, 게임쓰레드인지 파악을해야한다 둘간에 소통은 상태변수로 소통한다. 흐름에 직접 꽂아넣기가 불가능한데, 위에(상태변수)에다가 값을 넣어준다. 흐름은 상태변수 바뀐것을 적용한다. (즉 바로 적용은아니다) 파이터라는 상태변수로 가능하다. 60번돌면서 쟤를 확인하면서 바꾸는 것이다. II. 동작시..

I. INTRO : 들어가며 오늘은 디스트럭쳐링 배열을 한다. II. ES6 1. Array Destucturing 1) let kors = [1,2,3]; let[kor1, kor2, kor3] = kors; console.log(kor1); let kors2 = [3,4,5]; [kor1, kor2, kor3] = kors2; console.log(kor1); 이렇게 하면 된다 - 이경우 let때문에 아래 kor1 관련부분은 건들면안된다. 2) let std1 = {name : 'dragon' , phone : '010'}; ({name,phone}= std1); console.log(phone); = 때문에 선언으로 보이지만, 디스르럭쳐링을 하려면 전체를 괄호로 감싸라고 한다. 오류 때문에 전체를(..

I. 엘리먼트 객체 선택하기 (05) 문서에서 태그와 연관되어있는 메모리상 객체를 엘리먼트 객체라고한다. 1. 스크립트 작성방식 : ID를 직접 이용하는 방식의 문제점 구분자로 id로 이름을 달게되면 된다. 그러나 id 를 JS에 직접 가져다 쓰면 문제가있다. btn-print로 JS 는 대시(-)는 쓸 수 없다. 우리는 이렇게 보다 document 보따리 다른말로 컨테이너(엘리먼트를 가지고있는 박스) 이 컨테이너가 다큐먼트 객체이다 다큐먼트 객체에게 내가 이 이름을 호명할 것이니까 이 객체 좀 얻어줘라는 방식으로한다. 오류가 나니까 이 이름을 바꾸고 가지고온다. id 를 가지고 element 줘 라고 하는 의미이다. 꺼내서 변수 규칙에 맞게 쓴다. id를 쓸수있다고 해서 쓰기보다는 얻어가지고 쓰는것이 ..