모-코드

프로젝트 회고로 갈음 게임 미니프로젝트 회고 바로가기

I. 작성취지 목적 : 이번에 만든 게임프로젝트에서 이벤트리스너 및 핸들러 방식으로 만들지 않은 것이 무엇인지 찾고, 리팩토링 해보기 II. 비동기적 자바스크립트 1. 비동기적 프로그래밍 What (정의) : 기존의 작업이 끝나지않고 실행되는 동안에도, 다른 이벤트에 응답할 수있게 하는 기술 Why (존재이유) : 동기적 프로그래밍에서는 작업량이 큰 작업(장기실행 동기함수)이 있는 경우 다른 작업을 하기위해서는 이전 작업이 끝나고 난 뒤에 가능하다. How (방법) : 이벤트리스너와 이벤트 핸들러를 이용한다. 그리고 콜백함수 e.g. (예) : 2. 이벤트 처리기 (이벤트핸들러 / 함수) What (정의) : 이벤트가 발생한 경우 이벤트리스너가 호출하는 함수를 의미한다. 즉 비동기호출함수이다. Why (..

I. 게임만들기 1. boy 생명여부 [d boyNoLifeHandler(gameCanvas) => show(ConfirmDlg) clickHandler, => notifyClick => onclick => dlgClickHandler (gameCanvas) => onGameOver (app.js) (1) 여러번 실행되는 boyNoLifeHandler() boyNoLifeHandler(gameCanvas) => show(ConfirmDlg) 캔버스에서는 계속 호출해서 불편하다 한번만 호출하자 1) if(d < r1r2){ enemy.chungdol(); console.log("충돌발생"); //이게 호출할지에 대한 시그널이 필요하다 //이미 이벤트를 발생했는지 여부에 대해서 //life없..

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. 게임 쓰레드 이해하기 무한 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); = 때문에 선언으로 보이지만, 디스르럭쳐링을 하려면 전체를 괄호로 감싸라고 한다. 오류 때문에 전체를(..