2

我正在尝试使用带有 JavaScript 的画布制作 Pong。

自从我制作任何游戏以来已经有很多年了，因此我还是个初学者。

我有一个问题，我试图移动球（现在只是它的 x 位置）并试图移除它以前的位置。我使用的代码适用于桨（向上和向下键移动它）。

但是，它似乎不想和球一起工作。

我究竟做错了什么？

this.draw = function() {
    ctx.clearRect(this.prevX - this.radius, this.prevY - this.radius, this.radius * 2, this.radius * 2);

    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fill();

    this.prevX = this.x;
    this.prevY = this.y;
 }

js小提琴。

我知道我正在使用clearRect()，但我的印象是它只是删除了画布的一个矩形部分。

clearRect(x,y,width,height)：清除指定区域并使其完全透明

来源。

也请随时给我任何其他提示，因为我几乎是这方面的初学者。

4

3 回答 3

5

其实是因为你没有调用beginPath，所以你画的每一个新的圈子也会重绘所有的旧圈子！

在这里用插图修复：

http://jsfiddle.net/UvGVb/15/

把电话拿出beginPath来看看之前发生了什么。

于 2011-04-27T16:10:10.507 回答
0

我不是画布专家，所以我会接受“其他提示”的恳求。:-) 如果您离开画布，而是使用 div 之类的 html 元素来绘制桨和球，您就不必费心移除，只需移动即可。然后有很多库可以帮助您进行元素定位、动画等，其中 jQuery 将是我的首选。

于 2011-04-27T12:41:32.920 回答
0

当您渲染球的新位置时，您可能会为“clearrect”函数提供不正确的坐标。您对“this”的一些引用看起来也可能很狡猾：

var that = this;

以上是在函数内部 - 我认为它在函数的本地范围内引用“this”，而不是在球的范围内（这是我假设你想要的）。您可以设置对此（球范围）的引用，并在需要时从内部函数中使用它。

试着打印出球的坐标，以及它之前位置的坐标。然后，您可以确定您是否正在清除画布的正确区域。我还会检查您对 this 关键字的使用，并确保它在您想要做的事情的正确范围内。

我只是快速浏览了一下，所以如果我误解了你想要做的事情，我很抱歉。

于 2011-04-27T12:46:36.677 回答