참고 영상 : https://youtu.be/s2HlPDMIbi4 (코딩알려주는누나)

2일차 내용

1. key값 구하기 (keysDown)
2. key값에 따라 조약돌의 x,y좌표 바꿔주기
3. 캔버스 크기만큼만 갈 수 있도록 제한
4. 이미지 렌더링

1. key값 구하기 (keysDown)

1-1. setupKeyboardListener() 함수 생성

• document.addEventListener : event를 읽어오는 함수
• "keydown" : '키보드의 key가 눌렸다'는 event
• function(event) : event를 매개변수로 가져오는 function실행
• event.key : event에서 어떤 key가 눌렸는지에 대한 정보 받아오기

function setupKeyboardListener() {
  document.addEventListener("keydown", function (event) {
    console.log("무슨 키가 눌렸어?", event.keyCode);
}
                            
setupKeyboardListener();                            

1-2. keysDown변수 객체{}로 생성

• keyDown에 눌린 event.keyCode값을 담아주기 : 눌린 버튼들의 값을 저장할 수 있음

let keysDown = {};
function setupKeyboardListener() {
  document.addEventListener("keydown", function (event) {
    //console.log("무슨 키가 눌렸어?", event.keyCode);

    keysDown[event.keyCode] = true;
    console.log("KeysDown =", keysDown);
  });
}

1-3. keyUp이벤트가 실행되면 -> 객체에서 값을 제거하기

• keysDown 객체에 값이 저장되어 있다 = key가 계속 눌려있다는 뜻
• delete keysDown[event.key]; :keyUp(key에서 손을 떼면) 을 하면 객체에서 값을 빼줘야함

let keysDown = {};
function setupKeyboardListener() {
  document.addEventListener("keydown", function (event) {
    //console.log("무슨 키가 눌렸어?", event.keyCode);

    keysDown[event.keyCode] = true;
    console.log("KeysDown =", keysDown);
  });

  document.addEventListener("keyup", function (event) {
    delete keysDown[event.keyCode];
    console.log("버튼 클릭 후 = ", keysDown);
  });
}

2. key값에 따라 조약돌의 x,y좌표 바꿔주기

2-1. upadate() 함수 생성

• if / 39(→) key가 눌리면 / spaceshipX(x좌표)의 값을 +5 : 오른쪽으로 이동

function update() {
  if (39 in keysDown) {
    spaceshipX += 5;
  } // right
}

2-2. main()함수에 update()함수 호출

function main() {
  update(); // 좌표값 업데이트
  render(); //그려주기
  requestAnimationFrame(main);
  //console.log("anmiation calls");
}

2-3. if / 37(←) key가 눌리면 / spaceshipX(x좌표)의 값을 -5 : 왼쪽으로 이동

function update() {
  if (39 in keysDown) {
    spaceshipX += 5;
  } // right

  if (37 in keysDown) {
    spaceshipX -= 5;
  } //left
}

3. 캔버스 크기만큼만 갈 수 있도록 제한

3-1. 캐릭터가 화면밖으로 나가지 않도록 위치 제한하기

• if / x가 0과 같거나 작아지면(왼쪽으로 나가면) / x값을 0으로 고정
• if / x가 400-64와 같거나 커지면(오른쪽으로 나가면) x값을 400-64로 고정

function update() {
  if (39 in keysDown) {
    spaceshipX += 5;
  } // right

  if (37 in keysDown) {
    spaceshipX -= 5;
  } //left

  if (spaceshipX <= 0) {
    spaceshipX = 0;
  }
  if (spaceshipX >= canvas.width - 64) {
    spaceshipX = canvas.width - 64;
  }
}

---

2일차 전체코드

// 1. Canvas 세팅
let canvas;
let ctx;

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 700;
document.body.appendChild(canvas);

// 2. image 가져오기
let backgroundImage, mainImage, bulletImage, enemyImage, gameOverImage;

//주인공 좌표
let spaceshipX = canvas.width / 2 - 32;
let spaceshipY = canvas.height - 64;

function loadImage() {
  backgroundImage = new Image();
  backgroundImage.src = "images/background.jpg";

  mainImage = new Image();
  mainImage.src = "images/main.png";

  bulletImage = new Image();
  bulletImage.src = "images/bullet.png";

  enemyImage = new Image();
  enemyImage.src = "images/enemy.png";

  gameOverImage = new Image();
  gameOverImage.src = "images/gameover.jpg";
}

//방향키 누르면
let keysDown = {};
function setupKeyboardListener() {
  document.addEventListener("keydown", function (event) {
    //console.log("무슨 키가 눌렸어?", event.keyCode);

    keysDown[event.keyCode] = true;
    //console.log("KeysDown =", keysDown);
  });

  document.addEventListener("keyup", function (event) {
    delete keysDown[event.keyCode];
    //console.log("버튼 클릭 후 = ", keysDown);
  });
}

// 우주선의 xy좌표가 바뀌고
function update() {
  if (39 in keysDown) {
    spaceshipX += 5;
  } // right

  if (37 in keysDown) {
    spaceshipX -= 5;
  } //left

  if (spaceshipX <= 0) {
    spaceshipX = 0;
  }
  if (spaceshipX >= canvas.width - 64) {
    spaceshipX = canvas.width - 64;
  }
}

function render() {
  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
  ctx.drawImage(mainImage, spaceshipX, spaceshipY, 64, 64);
}

function main() {
  update(); // 좌표값 업데이트
  render(); //그려주기
  requestAnimationFrame(main);
  //console.log("anmiation calls");
}

loadImage();
setupKeyboardListener();
main();

---

2일차 후기

1. 객체(object)에 대해서 공부하기
-> 왜 true를 넣어주지?

let keysDown = {};
keysDown[event.keyCode] = true;

2. event.keyCode => event.key로 업데이트 됐다고함