Javascript 画布奇怪的问题，当丢失所有东西时，速度会加快2倍

所以我有一个简单的游戏，像乒乓球游戏，投球，现在只是一个简单的游戏，有一些冲突检查，结果是当我输掉比赛时，球员跑得更快，好像快了两倍，球也跑得更快。 不知道是什么原因造成的，有什么帮助吗

目前，我有一个简单的html，按照这个顺序加载3个脚本文件（player.js、ball.js、index.js）

ball.js

// defines player configuration behaviour
const PLAYER_WIDTH = 200;
const Y_OFFSET = 100;
const PLAYER_HEIGHT = 30;
const SPEED = 6;

function Player(x = ctx.canvas.width/2 - PLAYER_WIDTH/2, y = ctx.canvas.height - Y_OFFSET, width = PLAYER_WIDTH, height = PLAYER_HEIGHT, color = 'rgba(0,0,0)') {
    this.left = false;
    this.right = false;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;

    this.movePlayer = function(deltaX) {
        this.x += deltaX;
    }

    this.drawPlayer = function() {
        ctx.fillStyle = this.color;        
        ctx.fillRect(this.x, this.y, this.width, this.height);        
    }
}

// defines player configuration behaviour
const BALL_POSITION_Y = 100;
const RADIUS = 12;
const BALL_SPEED = 6;

function Ball(x = ctx.canvas.width/2, y = ctx.canvas.height - Y_OFFSET - RADIUS, radius = RADIUS, color = 'rgb(100,149,237)', speed = BALL_SPEED) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.speed = speed;

    this.drawBall = function() {
        ctx.fillStyle = this.color;        
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
        ctx.fill();
    }

    // for inital game started
    this.moveBallWithPlayer = function(deltaX) {
        this.x += deltaX;
    }

    this.moveBallY = function(flag) {
        this.y = this.y + flag;
    }

    this.moveBallX = function(flag) {
        this.x = this.x + flag;
    }
}

主代码，index.js（gamelogic）

var画布；
var-ctx；
var播放器；
var球；
var启动；
var flagY；
var flagX；
var角；
函数init（）{
canvas=document.getElementById（'myCanvas'）
if（canvas.getContext）{
ctx=canvas.getContext（'2d'）
设置画布大小（ctx）
玩家=新玩家（）
球=新球（）
attachKeyboardListeners（）
draw（）；
}
}
函数绘图（）{
flagX=-1；
flagY=-1；
角度=35；
gameStarted=false
player=新玩家（）；
球=新球（）；
制作动画（）
}
函数设置动画（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
浮冰
player.drawPlayer（）；
ball.draull（）；
playerMovementeHandler（）
如果（游戏开始）{
ballMovementHandler（）；
}
window.requestAnimationFrame（动画）；
}
函数playerMovementeHandler（）{
如果（player.left==真）{
如果（player.x>0）{
player.movePlayer（-SPEED）；
如果（！gameStarted）{
球。用球员移动球（-SPEED）；
}            
}
}
如果（player.right==真）{
if（player.x+player.width

问题在于，一旦玩家输了，调用

draw（）

重置状态，然后在draw函数中调用

animate（）

。这意味着，每当玩家输了，你就会开始一个新的动画循环，并且每帧会调用两次球移动函数（每次输完3次、4次等）

在这里，我更新了您的代码，以调用绘图函数“reset”，并在

init（）

中调用一次“animate”

//player.js
//定义播放器配置行为
常数玩家_宽度=200；
常数Y_偏移=100；
康斯特球员的身高=30；
恒速=6；
函数播放器（x=ctx.canvas.width/2-Player_width/2，y=ctx.canvas.height-y_OFFSET，width=Player_width，height=Player_height，color='rgba（0,0,0）'{
this.left=false；
this.right=false；
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
这个颜色=颜色；
this.movePlayer=函数（deltaX）{
此.x+=deltaX；
}
this.drawPlayer=函数（）{
ctx.fillStyle=this.color；
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
}
//ball.js
//定义播放器配置行为
恒球位置Y=100；
常数半径=12；
恒球速度=6；
函数球（x=ctx.canvas.width/2，y=ctx.canvas.height-y_OFFSET-RADIUS，RADIUS=RADIUS，color='rgb（100149237）”，speed=Ball_speed）{
这个.x=x；
这个。y=y；
这个半径=半径；
这个颜色=颜色；
速度=速度；
this.draull=函数（）{
ctx.fillStyle=this.color；
ctx.beginPath（）；
弧（这个.x，这个.y，这个.radius，0,2*Math.PI）；
ctx.fill（）；
}
//最初的游戏开始了
this.moveBallWithPlayer=函数（deltaX）{
此.x+=deltaX；
}
this.moveBallY=函数（标志）{
this.y=this.y+标志；
}
this.moveBallX=函数（标志）{
此.x=此.x+标志；
}
}
//游戏代码
var帆布；
var-ctx；
var播放器；
var球；
var启动；
var flagY；
var flagX；
var角；
函数init（）{
canvas=document.getElementById（'myCanvas'）
if（canvas.getContext）{
ctx=canvas.getContext（'2d'）
设置画布大小（ctx）
玩家=新玩家（）
球=新球（）
attachKeyboardListeners（）
重置（）；
制作动画（）；
}
}
函数重置（）{
flagX=-1；
flagY=-1；
角度=35；
gameStarted=false
player=新玩家（）；
球=新球（）；
}
函数设置动画（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
浮冰
player.drawPlayer（）；
ball.draull（）；
playerMovementeHandler（）
如果（游戏开始）{
ballMovementHandler（）；
}
window.requestA
// defines player configuration behaviour
const BALL_POSITION_Y = 100;
const RADIUS = 12;
const BALL_SPEED = 6;

function Ball(x = ctx.canvas.width/2, y = ctx.canvas.height - Y_OFFSET - RADIUS, radius = RADIUS, color = 'rgb(100,149,237)', speed = BALL_SPEED) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.speed = speed;

    this.drawBall = function() {
        ctx.fillStyle = this.color;        
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
        ctx.fill();
    }

    // for inital game started
    this.moveBallWithPlayer = function(deltaX) {
        this.x += deltaX;
    }

    this.moveBallY = function(flag) {
        this.y = this.y + flag;
    }

    this.moveBallX = function(flag) {
        this.x = this.x + flag;
    }
}

var canvas;
var ctx;
var player;
var ball;
var gameStarted;
var flagY;
var flagX;
var angle;

function init() {
    canvas = document.getElementById('myCanvas')
    if (canvas.getContext) {
        ctx = canvas.getContext('2d')
        setCanvasSize(ctx)
        player = new Player()
        ball = new Ball()
        attachKeyboardListeners()     
        draw();   
    }
}

function draw() {
    flagX = -1;
    flagY = -1;
    angle = 35;
    gameStarted = false
    player = new Player();
    ball = new Ball();
    animate()
}

function animate () {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    drawIce()    
    player.drawPlayer();
    ball.drawBall();
    playerMovementeHandler()

    if(gameStarted) {
        ballMovementHandler();            
    }

    window.requestAnimationFrame(animate);    
}

function playerMovementeHandler() {
    if(player.left === true) {
        if(player.x > 0) {
            player.movePlayer(-SPEED);
            if(!gameStarted) {
                ball.moveBallWithPlayer(-SPEED);
            }            
        }
    }

    if(player.right === true) {
        if(player.x + player.width < ctx.canvas.width) {
            player.movePlayer(SPEED);            
            if(!gameStarted) {
                ball.moveBallWithPlayer(SPEED);
            }      
        }
    }
}

function ballMovementHandler() {
    if(ball.y - ball.radius <= 0) {
        flagY = 1;
    }
    if(ball.y + ball.radius === player.y) {
        if(ball.x + ball.radius >= player.x && ball.x < player.x + player.width) {
            flagY = -1;            
        }
        else {
            draw();
        }
    }
    if(ball.x - ball.radius <= 0) {
        flagX = 1;
    }
    if(ball.x + ball.radius >= ctx.canvas.width) {
        flagX = -1;
    }
    radians = angle * Math.PI/ 180;
    ball.moveBallY(Math.sin(radians) * ball.speed * flagY);
    ball.moveBallX(Math.cos(radians) * ball.speed * flagX);  
}

function drawIce() {
    ctx.fillStyle = 'rgb(134,214,216)'
    ctx.fillRect(0,ctx.canvas.height - Y_OFFSET + player.height + 10, ctx.canvas.width, Y_OFFSET)
}

function setCanvasSize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
}


function keyboardEvent(keyCode, keyStatus) {
    switch(keyCode) {
        case 37: 
            player.left = keyStatus;
            break;
        case 39: 
            player.right = keyStatus;
            break;
        case 32:
            gameStarted = true;
            break;
    }
}

function attachKeyboardListeners() {
    document.addEventListener('keydown', function(e) {
        keyboardEvent(e.keyCode, true)
    })  
    document.addEventListener('keyup', function(e) {
        keyboardEvent(e.keyCode, false)   
    }) 
}

  init();