gpt4 book ai didi

javascript - Canvas "Pong"游戏 handle

转载 作者:行者123 更新时间:2023-12-03 11:15:09 28 4
gpt4 key购买 nike

作为我研究的一部分,我正在修改我在网上找到的开源“Pong”游戏(由 Kushagra Agarwal 创建)中的一些部分。

Game's Fiddle

我正在尝试为桨设置更好的外观:

  1. 实现圆 Angular 而不是锐边。我找到了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. 关于使用实际图像而不仅仅是填充颜色的桨的建议(或有关该主题的文章的引用)。

谢谢,罗伊

最佳答案

由于您的垫子纤薄而时尚,因此您可以利用较低的空间并在彼此之上绘制两个矩形,而不是使用弧线等来创建圆形的错觉。稍微偏移第二个矩形,因为我们使用两个矩形,所以将它们添加到路径并同时填充它们可能会更有效:

<强> 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();
}

如果您想要更复杂的东西,您将受益于首先将其绘制到屏幕外 Canvas ,然后 drawImage() 该 Canvas 到您的游戏屏幕(您也可以使用所示方法执行此操作) 。但对于这种游戏来说,可能不值得付出额外的努力。

<强> Here is an effective way of creating rounded rectangles (如果您需要更厚的垫)。

我宁愿花更多时间优化fillStyle,这样您就可以在绘制球和焊盘时共享相同的填充样式,因为这是一项昂贵的操作。您还可以将 CSS 背景颜色设置为蓝色而不是填充 Canvas ,然后使用 clearRect() 清除它(不必多次设置 fillStyle)。

希望这有帮助!

关于javascript - Canvas "Pong"游戏 handle ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27378179/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com