I. 게임만들기
1. boy 생명여부
<안내 메시지 및 종료 관련 전체 흐름>
<안내메시지 출력>
[d<r1r2 여부] => 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없고, 호출한적 없어야(noLife)한다.
if(this.onNoLife && this.noLife){
this.onNoLife();
this.noLife = true;
}
}nolife 가 참거짓 일때 실행 조건을 추가하고, 조건문 블럭안에서 noLife에 true를 넣어준다.
2)
import newlec from "../newlec.js";
export default class Boy{
#speed;
constructor(x , y){
this.noLife = false;
}
}그렇기 때문에 처음에는 false를 넣어준다.
(2) 결국에는
조건에 부합하면은 onNoLife()를 콜백으로 실행해주고,
다시 실행안되게끔 noLife 에 true를 넣어준다.
2. 창 버튼 누르면 실행하기
숫자를 같은것을 반복할수록 고치기가 힘들어진다.
캡슐화는 책임부여하는 기능은없다
그러나 데이터 구조화는 해야한다
(1) 버튼 반복문만들기
1) 객체만들기
export default class ConfirmDlg{
constructor(){
this.x = 100;
this.y = 100;
this.width = 400;
this.height = 200;
//버튼에 대한 형태 구조화
this.btnYes = {
x : 70,
y : 100,
width : 100,
height : 50,
label : 'yes'
};
this.btnNo = {
x : 230,
y : 100,
width : 100,
height : 50,
label : 'no'
};
}}버튼에 대해서 그 속성들을 객체로 만들어준다.
2) 배열에 두개 객체 담아서 for문돌리기
let btns = [this.btnYes, this.btnNo]
for(let btn of btns){
let {x ,y ,width:w ,height:h, label} = btn;
}}}각각의 객체에 대해서 배열로 담아주고, for반복문으로 value값으로 그려준다.
3) 이 경우 어디를 중심으로 x,y좌표 잡을지?(상대적)
상대적인관점에서 생각해보자
let btns = [this.btnYes, this.btnNo]
for(let btn of btns){
let {x ,y ,width:w ,height:h, label} = btn;
ctx.fillStyle = "grey";
ctx.fillRect(this.x + x, this.y + y, w, h);
ctx.fillStyle = "black";
ctx.fillRect(this.x + x, this.y + y, w, h);
ctx.fillStyle = "red";
ctx.font = "'bold' '30px' 'serif'";
ctx.fillText(label, this.x + 20 + x, this.y + 110 + 25);
}이 경우 창을 기준으로 x,y값 잡는것을 집중하자.
(2) 버튼을 객체로 안 분리한다면?
버튼을 부모들이 다 끌어안고있어야한다.
새로운 타입이 안만들어져서 코드가 중복해야한다
직접 두번을만들어야한다.
그림그리기도 하나만있으면 되는데,,,, 반복문으로 줄였지만,, 어쨋든 두번그리고있는 것임
버튼 3개라면... 연산등이 3번일어난다 (물론반복문이 가능하지만... 좋지는 않음)
일단 자식 안만들고 해보자
1)
< 게임 종료>
clickHandler, => notifyClick => onclick => dlgClickHandler (gameCanvas) => onGameOver (app.js)
우선 notifyClick() 에 사용자 입력을 받기위한 함수를 만들자.
<game-canvas>
clickHandler(e){
// this.boy.draw(this.ctx);
// this.pause = true;
this.boy.moveTo(e.x, e.y);
//e.x e.y 이벤트 발생한 x,y 좌표가 나온다.
//좌표 주면서 여기있냐고 물어보기.
// this.boy.notifyClick(e.x,e.y);
// for(let enemy of this.enemies){
// enemy.notifyClick(e.x,e.y);
// }
if(this.dlg.notifyClick(e.x,e.y));
}클릭 위치 값을 받는다.
<confirm>
//notify 수신하기 위한 함수
//윈도우로써 사용자 입력 이벤트를 수신하기 위한 함수
notifyClick(x,y){
//자식이 있다면 자식에게도 이 이벤트를 통지해야한다
//하지만 자식이 아직 분가하지않음, 내가 체크해서 통지
//내가 클릭된 건가
if((this.x < x && x < this.x + this.width)
&&(this.y < y && y < this.y + this.height))
{
console.log("앗 나임?");
//지금 일부로 !(not) 붙임
// console.log(this.onNoLife);
if(this.onclick){
this.onclick(3);
// console.log("3");
}
//만약 1을 받으면 DLG
// 2를 받으면 YES,
// 3을 받으면 NO
}
}클릭 위치 값이 dialouge 위에 눌렀을 때 콜하게끔 하는 함수이다.
이때 onclick 의 값이 1이면 DLG 창 자체 / 2이면 YES창 / 3이면 NO이다.
2)
그런데 클릭이 살짝 간극을 벗어나면 안된다. margin 때문이다
마진을 없재우어야한다
<main.html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
<script type ="module" src="./ex2-es6-moudle.js"></script>
<style>
body{
margin: 0;
}
.d-none{
display : none;
}
</style>
</head>body 그 자체에 마진 0을 넣어주는 것이다.
- 만드는건 어렵지만 도구화 잘하면 다음에 할때는 생산성이 올라간다.
중요한것은 코딩능력이 아니라, 만든 코딩을 다음에 재활용할수 있는 능력이 중요하다
(3) 게임 종료 메시지 던져주기
<game -canvas>
dlgClickHandler(id){
//사용자가 더이상 게임이어갈 의지 X라고 함
if(this.onGameOver)
//할당도 안했는데 호출하면 안됨
this.onGameOver();
//app 에게 canvas가 끝났음을 알림
console.log("clicked: " + id);
}id 값을 받아서 (만약 yes 인 2id 값을 받으면)
게임 오버가 아니면 게임오버 메소드를 호출한다.
(4) app.js 에 게임종료 시키기
window.addEventListener("load",function(){
const gamecanvas = new Gamecanvas();
//classList는 class 를 가져오는것
gamecanvas.onGameOver = (e) =>{
gamecanvas.dom.classList.add("d-none");
rankcanvas.dom.classList.remove("d-none");
gamecanvas = null;
}
gamecanvas.run();
//스스로 다른것을 가져오는게 바로 안된다.
//html에 요구해야한다
const rankcanvas = new RankCanvas();
rankcanvas.run();
// newlec.x++;
// console.log("x : "+ newlec.x);
//다른곳도 2나오는지 3이나오는지 알오보기
// gamecanvas.pause();
});여기서 onGameOver 을 실행하면 콜백함수로 gamecanvas요소의 classList에 있는 d-none(가리기) 이라는 속성을 추가한다.
그리고 rankcanvas요소의 classList에 있는 d-noe 속성을 제거한다.
II. 웹소켓
웹서버란 WAS인데,
Client가 WAS에 요청(GET / POST)을 한다. data 가 sever로 가는것을 post요청이라고 한다.
문서를 달라는 요청 get요청 (오늘날 꼭 문서는 아님)
web은 특징상 get post하는데 연결이 끊어져서, 서버에서는 감지를 못한다
클라이언트가 브라우저가 켜져있는지, 닫았는지, 몇명이 보고있는지 모른다.
서버입장에서 data post했는데, post한놈에게 못준다. 줄수있는게 없어서...
그래서 옛날에는 pulling Service로 다 땡기면서 확인했었다. (사실상 디도스공격)
그런데 웹소켓을 쓰면 psuh형이 가능하다
보낸데이터에다가 연결유지하는 등 할 수있다.
1. 보충
1) d-none
부트스트랩을 이용한 방법이다.
방법은 여러가지인데 이는 모든화면에서 숨기는것을 의미한다.
2. 회고
1) 몸이 피곤하니까 수업이 잘 안들린다. 그리고 한번 시험접수 등에 신경이 쓰이면 수업에 집중이 안된다.
금번의 수업에서 집중을 못해서 의욕을 다소 잃은점이 아쉽다.
'배움 __IL > TIL 1기' 카테고리의 다른 글
| TIL : 36번째- 230117~20 [1-3-화~금] (0) | 2023.01.23 |
|---|---|
| TIL : 35번째- 230116 [1-3-월] (0) | 2023.01.16 |
| TIL : 33번째- 230112 [1-2-목] (0) | 2023.01.12 |
| TIL : 32번째- 230111 [1-2-수] (0) | 2023.01.11 |
| TIL : 31번째- 230110 [1-2-화] (0) | 2023.01.10 |