帆布" Pong"游戏桨

时间:2014-12-09 11:44:18

标签: javascript html canvas html5-canvas

作为我学习的一部分,我正在修改我在网上找到的开源“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. 关于使用实际图像而不仅仅是颜色填充的拨片的建议(或关于该主题的文章的参考)。

  3. 谢谢, 罗伊

1 个答案:

答案 0 :(得分: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)。

希望这有帮助!