Холст «Понг» игровые весла

Question

В рамках моих исследований я изменяю некоторые части в игре с открытым исходным кодом «Понг», которую я нашел онлайн (созданный 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 более одного раза).

Надеюсь, это поможет!