Javascript 移除与球碰撞的对象

我知道你可以

fillRect

对吗？您可以

clearRect

。但是，如果有一个动画，您必须删除一个对象，尽管它将从

setInterval

重新绘制，会发生什么情况呢。您将如何删除fillRect

下面是一个例子：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var width=canvas.width；
var height=canvas.height；
变量圆=函数（x、y、半径、圆角圆、颜色）{
ctx.beginPath（）；
ctx.fillStyle=颜色；
弧（x，y，半径，0，数学π*2，假）；
如果（填充圆）{
ctx.fill（）；
}否则{
ctx.stroke（）；
}
};
var drawRect=函数（x、y、颜色）{
ctx.fillStyle=颜色；
ctx.fillRect（x，y，20，20）
}
var对象=函数（xPos、yPos）{
x=xPos；
y=yPos；
}
//球构造函数
var Ball=函数（）{
这.x=宽度/2；
这.y=高度/2；
this.xSpeed=0；
这个.ySpeed=0；
这个半径=10；
};
//根据球的速度更新球的位置
Ball.prototype.move=函数（）{
this.x+=this.xSpeed；
this.y+=this.y速度；
如果（此.x<11）{
这个x=11；
}else if（this.x>宽度-11）{
x=宽度-11；
}否则，如果（此.y<11）{
这个y=11；
}else if（this.y>高度-11）{
y=高度-11；
}
};
//在当前位置绘制球
Ball.prototype.draw=函数（）{
圆圈（这个.x，这个.y，10，真，“黑色”）；
};
Object.prototype.draw=函数（）{
drawRect（this.x，this.y，“黑色”）
}
Object.prototype.drawKey=函数（颜色）{
drawRect（this.x，this.y，“黄色”）
}
Object.prototype.checkCollision=函数（方向）{
返回（ball.x-ball.radiusthis.x）
&&（ball.y-ball.radiusthis.y）
;
}
函数绘图（）{
ctx.clearRect（0，0，宽度，高度）；
ball.draw（）；
反对1.绘制（“蓝色”）；
object2.draw（）；
object3.draw（）；
object4.draw（）；
object5.draw（）；
key.drawKey（）；
ctx.冲程（0，0，宽度，高度）；
}
函数模拟（）{
对于（z=0；z<5；z++）{
var prev_ball_x=ball.x；
var prev_ball_y=ball.y；
ball.move（）；
//在这里处理碰撞
if（object1.checkCollision（）| | object2.checkCollision（）| | object3.checkCollision（）| | object4.checkCollision（）| | object5.checkCollision（））{
球。设置方向（“停止”）；
//重置球的位置，使它们不会重叠
ball.x=上一个球；
ball.y=上一个ball\u y；
}
if（key.checkCollision（））{
ball.x=上一个球；
ball.y=上一个ball\u y；
}
}
$（“body”）.keyup（函数（事件）{
球。设置方向（“停止”）；
})
}
setInterval（函数（）{
//分别绘制和模拟阶段
模拟（）；
draw（）；
}, 30);
//根据线设置球的方向
Ball.prototype.setDirection=功能（方向）{
如果（方向==“向上”）{
this.xSpeed=0；
这个.ySpeed=-1；
}否则如果（方向==“向下”）{
this.xSpeed=0；
该速度为1；
}否则如果（方向==“左”）{
this.xSpeed=-1；
这个.ySpeed=0；
}否则，如果（方向==“右”）{
this.xSpeed=1；
这个.ySpeed=0；
}否则如果（方向==“停止”）{
this.xSpeed=0；
这个.ySpeed=0；
}
};
//创建球对象
var ball=新的ball（）；
var object1=新对象（50,0）；
var object2=新对象（50,20）；
var object3=新对象（50,40）；
var object4=新对象（50,60）；
var object5=新对象（50,80）；
var键=新对象（70,70）；
//将键代码转换为操作名称的对象
var键操作={
37:“左”，
38:“向上”，
39:“对”，
40：“向下”
};
//每次按键都将调用的keydown处理程序
$（“body”）.keydown（函数（事件）{
var direction=keyActions[event.keyCode]；
球。设定方向（方向）；
});
通常，当你在游戏中有几个项目时，你会将它们放入一种
对象
数组中，然后当你画图时，你会在每个项目上循环调用
.draw（）
。通过这种方式，您可以删除不需要的项目（例如
键
），因此它将不再被绘制。在您的情况下，我们可以做的一件事（假设只有一个键）是给您的
ball
a
hasKey
属性。碰撞时，将其从
false
设置为
true
。然后在内部绘制，如果您还希望删除碰撞，请执行
！ball.hasKey&&key.checkCollision（）
在键的碰撞条件中：

if(!ball.hasKey) key.drawKey();


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var width=canvas.width；
var height=canvas.height；
变量圆=函数（x、y、半径、圆角圆、颜色）{
ctx.beginPath（）；
ctx.fillStyle=颜色；
弧（x，y，半径，0，数学π*2，假）；
如果（填充圆）{
ctx.fill（）；
}否则{
ctx.stroke（）；
}
};
var drawRect=函数（x、y、颜色）{
ctx.fillStyle=颜色；
ctx.fillRect（x，y，20，20）
}
var对象=函数（xPos、yPos）{
x=xPos；
y=yPos；
}
//球构造函数
var Ball=函数（）{
这.x=宽度/2；
这.y=高度/2；
this.xSpeed=0；
这个.ySpeed=0；
这个半径=10；
this.hasKey=false；
};
//根据球的速度更新球的位置
Ball.prototype.move=函数（）{
this.x+=this.xSpeed；
this.y+=this.y速度；
如果（此.x<11）{
这个x=11；
}else if（this.x>宽度-11）{
x=宽度-11；
}否则，如果（此.y<11）{
这个y=11；
}else if（this.y>高度-11）{
y=高度-11；
}
};
//在当前位置绘制球
Ball.prototype.draw=函数（）{
圆圈（这个.x，这个.y，10，真，“黑色”）；
};
Object.prototype.draw=函数（）{
drawRect（this.x，this.y，“黑色”）
}
Object.prototype.drawKey=函数（颜色）{
drawRect（this.x，this.y，“黄色”）
}
Object.prototype.checkCollision=函数（方向）{
返回（ball.x-ball.radiusthis.x）
&&（ball.y-ball.radiusthis.y）
;
}
函数绘图（）{
C