자바스크립트로 퐁(Pong) 게임 만들기 Part - 4

공이동

게임을 하기 위해서는 공을 가속화 해야합니다. 위치, 속도, 가속도 및 시간 간격 dt가 주어지면 볼의 새로운 위치와 속도는 다음과 같이 계산 될 수 있습니다.

accelerate: function(x, y, dx, dy, accel, dt) {
  var x2  = x + (dt * dx) + (accel * dt * dt * 0.5);
  var y2  = y + (dt * dy) + (accel * dt * dt * 0.5);
  var dx2 = dx + (accel * dt) * (dx > 0 ? 1 : -1);
  var dy2 = dy + (accel * dt) * (dy > 0 ? 1 : -1);
  return { nx: (x2-x), ny: (y2-y), x: x2, y: y2, dx: dx2, dy: dy2 };
},

가속화가되면 ball의 update () 메소드는 다음을 수행해야 합니다.

- 공의 새로운 위치와 속도를 계산하십시오.

- 상단 또는 하단 벽에서 튀어 나오면 감지 (단순 경계 검사)

- 패들에서 튀었는지 탐지합니다 (다음 섹션 참조).

- 공이 움직이는 외륜을 치면 스핀을 시뮬레이트하기 위해 y 속도를 조정하십시오.

update: function(dt, leftPaddle, rightPaddle) {
  pos = Pong.Helper.accelerate(this.x, this.y, this.dx, this.dy, this.accel, dt);

  if ((pos.dy > 0) && (pos.y > this.maxY)) {
    pos.y = this.maxY;
    pos.dy = -pos.dy;
  }
  else if ((pos.dy < 0) && (pos.y < this.minY)) {
    pos.y = this.minY;
    pos.dy = -pos.dy;
  }
  var paddle = (pos.dx < 0) ? leftPaddle : rightPaddle;
  var pt     = Pong.Helper.ballIntercept(this, paddle, pos.nx, pos.ny);
  if (pt) {
    switch(pt.d) {
      case 'left':
      case 'right':
        pos.x = pt.x;
        pos.dx = -pos.dx;
        break;
      case 'top':
      case 'bottom':
        pos.y = pt.y;
        pos.dy = -pos.dy;
        break;
    }
    // add/remove spin based on paddle direction
    if (paddle.up)
      pos.dy = pos.dy * (pos.dy < 0 ? 0.5 : 1.5);
    else if (paddle.down)
      pos.dy = pos.dy * (pos.dy > 0 ? 0.5 : 1.5);
  }
  this.setpos(pos.x,  pos.y);
  this.setdir(pos.dx, pos.dy);
},

볼 및 패들 교차점

위 update () 메서드에서 사용 된 ballIntercept () 메서드는 프레임 간격 (dt) 동안 볼이 패들에 충돌하는지 여부를 정확하게 감지해야 합니다.

공이 시간 간격 (dt) 동안 p1에서 p2로 이동하고 패들 가장자리가 p3에서 p4로 늘어나고 충돌하는지 확인해야합니다.

우리는 공이 배트의 명백한면에 충돌 하는지 알 수 있기를 원합니다.

- 공이 왼쪽으로 움직이는 경우 플레이어 1의 오른쪽 가장자리를 확인하십시오.

- 공이 오른쪽으로 움직이는 경우 플레이어 2의 왼쪽 가장자리를 확인하십시오.

그러나 우리는 또한 공이 '빗나 갔다'는 눈에 띄지 않는 가장자리가 있는지를 알기 위해 위쪽과 아래쪽과 같은 명백하지 않은 부분을 확인하려고 하지만 목표를 향해 나가기 전에 위쪽이나 아래쪽으로 튀어 나옵니다. 대부분의 pong 게임은 이것으로 귀찮게 하지 않지만, 우리는 완성을 위해 노력하고 있습니다. 그래서 간단한 라인 intercept() 메서드가 있다고 가정하면 ballIntercept ()는 다음과 같이 구현 될 수 있습니다 :

ballIntercept: function(ball, rect, nx, ny) {
  var pt;
  if (nx < 0) {
    pt = Pong.Helper.intercept(ball.x, ball.y, ball.x + nx, ball.y + ny,
                               rect.right  + ball.radius,
                               rect.top    - ball.radius,
                               rect.right  + ball.radius,
                               rect.bottom + ball.radius,
                               "right");
  }
  else if (nx > 0) {
    pt = Pong.Helper.intercept(ball.x, ball.y, ball.x + nx, ball.y + ny,
                               rect.left   - ball.radius,
                               rect.top    - ball.radius,
                               rect.left   - ball.radius,
                               rect.bottom + ball.radius,
                               "left");
  }
  if (!pt) {
    if (ny < 0) {
      pt = Pong.Helper.intercept(ball.x, ball.y, ball.x + nx, ball.y + ny,
                                 rect.left   - ball.radius,
                                 rect.bottom + ball.radius,
                                 rect.right  + ball.radius,
                                 rect.bottom + ball.radius,
                                 "bottom");
    }
    else if (ny > 0) {
      pt = Pong.Helper.intercept(ball.x, ball.y, ball.x + nx, ball.y + ny,
                                 rect.left   - ball.radius,
                                 rect.top    - ball.radius,
                                 rect.right  + ball.radius,
                                 rect.top    - ball.radius,
                                 "top");
    }
  }
  return pt;
}

선 교차점

ballIntercept () 메서드는 일반적인 intersect 메서드를 사용합니다.

공이 (x1, y1)에서 (x2, y2)로 이동하고 패들 가장자리가 (x3, y3)에서 (x4, y4)로 이동한다고 가정하면 intercept () 메서드는 다음과 같이 구현할 수 있습니다.

intercept: function(x1, y1, x2, y2, x3, y3, x4, y4, d) {
  var denom = ((y4-y3) * (x2-x1)) - ((x4-x3) * (y2-y1));
  if (denom != 0) {
    var ua = (((x4-x3) * (y1-y3)) - ((y4-y3) * (x1-x3))) / denom;
    if ((ua >= 0) && (ua <= 1)) {
      var ub = (((x2-x1) * (y1-y3)) - ((y2-y1) * (x1-x3))) / denom;
      if ((ub >= 0) && (ub <= 1)) {
        var x = x1 + (ua * (x2-x1));
        var y = y1 + (ua * (y2-y1));
        return { x: x, y: y, d: d};
      }
    }
  }
  return null;
},

게임은 이제 이 데모와 함께 2 인 게임으로 즐길 수 있습니다.