Canvas "Pong"게임 패들

Question

내 연구의 일부로 온라인에서 발견 한 오픈 소스 "Pong"게임의 일부를 수정하고 있습니다 (Kushagra Agarwal로 생성).

Game's Fiddle

은 내가 패에 더 좋은 모습을 설정하기 위해 노력하고있어 :

1. 는 둥근 모서리 대신에 날카로운 모서리를 얻을 수 있습니다. 찾았습니다 this article,하지만 내 코드를 구현하는 방법을 모르겠습니다. 단지 색상 작성 패 (또는 그 주제에 대한 기사 참조) 대신 실제 이미지를 사용하는 방법에 대한

   function Paddle(pos) { 
   // Height and width 
   this.h = 30; 
   this.w = 600; 
   
   // Paddle's position 
   this.x = W/2 - this.w/2; 
   this.y = (pos == "top") ? 0 : H - this.h; 
   } 
   

2. 제안 : 는 지금 사람들은 패입니다.

감사합니다, 로이

Answer 1

당신의 패드는 슬림하고 공간에 대한 낮은 공간을 활용하고를 만드는 등 호를 사용하는 서로의 상단에 두 개의 사각형을 대신 그릴 수 매끄러운 때문에 진원의 환상. 약간 번째 사각형을 오프셋, 우리는 두 가지를 사용하기 때문에이 같은 시간에 그들을 경로에 모두를 추가 기입하는 것이 더 효율적일 수 있습니다 :

Updated fiddle

function draw() { 
    paintCanvas(); 
    for(var i = 0; i < paddles.length; i++) { 
     p = paddles[i]; 

     ctx.beginPath();      // begin new path 
     ctx.rect(p.x, p.y, p.w, p.h);   // main rect. 
     ctx.rect(p.x-1, p.y+1, p.w+2, p.h-2); // second, giving the round illus. 
     ctx.fillStyle = "white"; 
     ctx.fill();       // fill at the same time 
    } 

    ball.draw(); 
    update(); 
} 

당신이 뭔가 더 복잡한을 원하는 경우 처음에는 오프 스크린 캔버스로 그리는 것이 좋습니다. 그런 다음 drawImage() 캔버스를 게임 화면에 표시합니다 (표시된 방법으로도이 작업을 수행 할 수 있습니다). 그러나 이런 종류의 게임을 위해서는 여분의 노력을 기울일 가치가 없을 것입니다.

Here is an effective way of creating rounded rectangles (두꺼운 패드가 필요한 경우).

fillStyle을 최적화하는 데 더 많은 시간을 할애하여 공과 패드를 그리는 데 비용이 많이 드는 작업이므로 동일한 채우기 스타일을 공유 할 수 있습니다. 캔버스를 채우는 대신 CSS 배경색을 파란색으로 설정 한 다음 clearRect()을 사용하여 지울 수도 있습니다 (fillStyle을 두 번 이상 설정할 필요 없음).

희망이 도움이됩니다.