我现在正在查看这段代码已经两天了,而且在我看来并不像任何错误。试图在很多方面改变代码,但球的滞后问题几乎没有成功。事情显然是错误的,因为球有这种奇怪的滞后(有时它表现正常,但大多数时候它有这种奇怪的滞后,导致球的速度发生变化。)
这是让球移动的两个主要功能,对我来说似乎都没问题。
function ball(){ //gets called 1000 times per second
if(lifeCount==0){
ctx.clearRect(0,0,900,600);
ctx.drawImage(youLose,0,0,900,600);
return;
}
else{
ctx.beginPath();
ctx.clearRect(xBall-(r+1),yBall-(r+1),2*r+2,2*r+2);
ballCollision(); //function
ctx.arc(xBall,yBall,r,0,2*Math.PI, true);
ctx.fillStyle = "#c82124";
ctx.fill();
ctx.stroke();
bricksHit(); //function (no lag)
bricksDraw(); //function (no lag)
ballPowerUp(); //function (no lag)
}
}
function ballCollision(){
if(startDirection === 1) //random start, ball begins moving "left"
xBall += -xSpeed;
if(startDirection === 2) //random start, ball begins moving "right"
xBall += xSpeed;
if(xBall>=canvas.width-r) //right wall collision
xSpeed = -xSpeed
if(xBall<=0+r) //left wall collision
xSpeed = -xSpeed
if(yBall<=0+r)//top wall collision
ySpeed = -ySpeed;
if(xBall>=x-(paddleW/2) && xBall<=x+(paddleW/2) && (yBall <= canvas.height-paddleH-r && yBall >= canvas.height-paddleH-r-4)) //bottom paddle collision
ySpeed = -ySpeed;
yBall += ySpeed;
if(yBall>=canvas.height-r){
lifeCount--;
if(lifeCount>0)
initBall(); //another chance if you still have lives left
}
}
canvas.onmousemove = function() {
if(lifeCount==0){
return;
}
else{
padd();
}
}
在某些地方我可能无法找到或者我不知道还有什么可能造成这种情况的代码中可能存在一些新手错误。如果您有任何建议请告诉我。
如果有人想看看游戏实际上是如何落后的话。这是html文件的链接:https://drive.google.com/open?id=1A1H1MiKpIutj9Z4kdrDunHZHHYeWNfl3
提前致谢!