Question

我正在尝试使用带有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;
 }

jsFiddle

我知道我正在使用clearRect()，但我认为它只是移除了画布的矩形部分。

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

Source

随意给我任何其他提示，因为我几乎是初学者。

Answer 1

实际上是因为你没有打电话给beginPath，所以你绘制的每一个新圆圈都会重新绘制所有旧圆圈！

在此修复插图：

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

取出beginPath的电话，看看以前发生了什么。

Answer 2

我不是画布专家，所以我会选择“其他提示”。 :-)如果你离开画布，而是使用像div这样的html元素来绘制你的桨和球，你将不必费心去除，只需要移动。然后有很多库可以帮助你进行元素定位，动画等，其中jQuery将是我的首选。

Answer 3

当渲染球的新位置时，您可能会给'clearrect'函数提供不正确的坐标。你对'this'的一些提及看起来也可能是狡猾的：

var that = this;

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

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

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

如何在画布中清除圆圈的先前位置？

3 个答案: