[TIL. 08] 핑퐁 게임 만들기- 점수, com ai

신지원·2021년 2월 24일
post-thumbnail

점수

  if (ball.x - ball.radius < 0) {
    com.score++;
    ballReset();
  } else if (ball.x + ball.radius > canvas.width) {
    user.score++;
    ballReset();
  }

공이 캔버스의 왼쪽에 닿으면 컴퓨터의 score가 1 증가하고, 공이 캔버스의 오른쪽에 닿으면 user의 score가 증가한다.

user든 com 이든 점수를 획득하면 공이 다시 정중앙에 오도록 해주어야 한다.

function ballReset() {
  ball.x = canvas.width / 2;
  ball.y = canvas.height / 2;
  ball.speed = 7;
  ball.velocityX = -ball.velocityX; 
}

ball.velocityX = -ball.velocityX;은 득점한 사람쪽으로 공을 보내주도록 한다.

com ai

  com.y += (ball.y - (com.y + com.height / 2)); 

패들의 중앙이 공의 y값과 같으면 패들이 공을 따라 오게 된다.
공의 중앙 부분과 패들의 중앙부분의 차이를 구해주고, 컴퓨터의 패들에 그 차이 값을 더해주면 된다.




이걸로 js로 핑퐁 게임 만들기는 끝났다..
사실 뭔가 새로운 js문법을 배운다기보단 공이 어떻게 움직이는지 고민하고 생각해야 되는 시간이 더 길었던것같다...
그치만 새로운 method들도 알게 된 시간이었다.

0개의 댓글