Moving user paddle

캔버스로 필요한 모양은 다 잡고, 움직이는걸 구현 해야 했다.
처음 내가 필요한 물체들 위치 잡은것을 이런식으로 구현 했었다.

const user = {
  x: 0, 
  y: (canvas.height - 100) / 2
  width: 10,
  height: 100,
  score: 0,
  color: "WHITE",
};

  //paddle
  const drawpaddle = (x, y, width, height) => {
    ctx.fillStyle = "yellow";
    ctx.fillRect(x, y, width, height);
  };

  drawpaddle(0, 0, 20, 100); //user
  drawpaddle(580, 0, 20, 100); //computer

paddle 움직이도록 하는 기능은

canvas.addEventListener("mousemove", getMousePos);
  
function getMousePos(evt) {
    let rect = canvas.getBoundingClientRect();
    user.y = evt.clientY - rect.top - user.height / 2;
  }
  canvas.getBoundingClientRect();

근데 이렇게 아무리 넣어도 안됐다... console.log 찍어서 확인해보면 함수 자체에 문제는 없는지 잘 찍혔다.. 왜 안되는지 정말 삽질만 3시간 정도 했다...ㅠ

이유는 다음과 같았다.
getMousePos 함수를 보면 user.y 의 값이 움직이면서 paddle이 움직이는 건데... 그 부분을 내가 간과 했던것이다

내가 paddle을 만든것을 보면 user 객체의 y를 가져 온것이 아니고, 숫자를 넣어서 변할 수 없게 위치를 탁 박아버렸던 것이다.

// 네모 그리기
function drawRect(x, y, w, h, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
}

const user = {
  x: 0, // left side of canvas
  y: (canvas.height - 100) / 2, // -100 the height of paddle
  width: 10,
  height: 100,
  score: 0,
  color: "WHITE",
};

canvas.addEventListener("mousemove", getMousePos);

function getMousePos(evt) {
  let rect = canvas.getBoundingClientRect();

  user.y = evt.clientY - rect.top - user.height / 2;
}

이런식으로 user 객체의 y의 값이 움직 일 수 있도록 해줬어야 했다..

실제 콘솔에서 이런식으로 y의 값이 계속 해서 움직이고 있다는 사실을 알 수 있다.

evt.clientY 는 마우스의 y 위치
rect.top은 페이지를 스크롤 다운 할때마다 캔버스의 위치가 바뀌니깐 그 값 긁어 오는것.
getBoundingClientRect() method 는 특정한 element의 위치 값 구하는 것.
user.height / 2 는 user.y = evt.clientY - rect.top 이렇게만 값을 줬을 땐 마우스의 커서가 패들의 윗 부분이 마우스의 커서의 값과 같았다면, user.height / 2 을 빼줌으로써 패들의 중간부분과 마우스 커서의 값이 같게 된다.

이런식으로..

setInterval

그리고 사실 위의 상태로만으로는 paddle이 움직이지 않는다. 즉, 함수만 선언해준다고 해서 user의 paddle의 y의 값이 바뀌지 않는다는 뜻이다.
그래서 필요한것이 setInterval method.

• setInterval: 일정한 시간 간격으로 작업을 수행하기 위해서 사용한다. clearInterval 함수를 사용하여 중지할 수 있다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있다.

• setInterval(function, milliseconds, param1, param2, ...)
  function: 싱핼시킬 함수
  milliseconds: 코드를 실행하는 간격

이 method를 추가함으로써 user paddle의 마우스 모양이 움직일 수 있도록 한다.
즉,

setInterval(render, 1000 / 50); //1초당 50번 함수를 실행한다.

render 함수는 drawRect함수를 실행시키도록 하면서 user paddle을 위치하게 해주는 함수를 포함한다.

1000 은 1초, 100은 1분 임.