Javascript HTML5画布&x2B；js游戏|死亡重置游戏改变游戏速度？

我正在尝试使用HTML5的画布和javascript制作一个游戏。我相信我一直都做得很好，直到我需要在死亡时重新设定游戏。我不确定是什么导致了这种意想不到的行为，但我有一些想法

基本上，游戏以“x”速度运行，然后当它重置时，一切都会运行得更快。我没有改变任何速度的任何变量，当调试和检查我的代码时，新创建的对象的速度与第一次启动游戏时相同，但它们移动得更快。如果你再次死亡，它会再次重置，运行得更快。死亡，冲洗，重复，它不断加快，直到页面可能会达到“无响应”状态

我不确定我做错了什么导致了速度差，或者至少是速度差的错觉。我有一个想法，这与我的游戏循环在每次重置时都会多次运行到永久有关，但我不明白它是如何/为什么这样做的。任何反馈都将不胜感激

此外，如果您需要比我在下面发布的更多的代码，您可以访问我的测试页面查看所有代码：

var windowx，
窗口的，
帆布，
玩家，
四叉树，
ctx；
变量对象；
var-keyState；
var主回路；
无人机框架；
可变一帧时间；
变量重置=函数（）{
//获取画布并设置高度和宽度
canvas=document.getElementById（'canvas'）；
canvas.setAttribute（'width'，windowx/2）；
canvas.setAttribute（'height'，windowy/2）；
ctx=canvas.getContext（“2d”）；
drawObjects=[]；
keyState={}；
四叉树=新四叉树（四叉树组）；
//使友好的广场
player=新矩形（20,20,40,40,0,0，Xphysisbehaviornormal，Yphysisbehaviornormal，XboundaryBehaviorInCas，YboundaryBehaviorInCas，PlayerObject类型，'#580000'，null）；
推（玩家）；
push（新矩形（40100，canvas.width+（distanceOutsideCanvasBeforeDie/2），canvas.clientHeight-100，defaultEnemyRectangleVelocity，0，null，YPhysisBehaviorNormal，null，YBoundaryBehaviorInCas，enemyObjectType，null，OutOfCanvasDieBehavior））；
背景音乐播放（）；
//定义主循环
mainloop=函数（）{
构建四叉树（）；
updateGame（）；
drawGame（）；
};
//定义windowanimationframeobject
animFrame=window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
无效的
如果（animFrame！==null）{
var recursiveAnim=函数（）{
mainloop（）；
动画框架（递归动画、画布）；
};
//启动主循环
动画框架（递归动画、画布）；
}否则{
//如果浏览器不支持requestAnimationFrame，请返回到setInterval
一帧时间=1000.0/60.0；
设置间隔（主循环，一帧时间）；
}
}
$（函数（）{
//获取窗口的宽度和高度；
windowx=window.innerWidth；
windowy=window.innerHeight；
重置（）；
$（文档）.on（'更改'，'声音启用切换'，函数（））{
var isChecked=$（this）.is（'：checked'）；
$（“#声音启用切换”）.blur（）；
如果（已检查）{
背景音乐播放（）；
playerJumpAudio=playerJumpMusicAudioSetup（）；
playerLinkAudio=playerLinkMusicAudioSetup（）；
}否则{
背景音乐暂停（）；
playerJumpAudio=新音频（“”）；
playerLinkAudio=新音频（“”）；
}
});
});
//将函数保留在这里，以防我需要执行任何其他操作，但现在它只是清除。
函数buildQuadTree（）{
四叉树；
}
函数updateGame（）{
//确定当前点是否按下了任何键
按键动作（）；
//用于计算和更新所有对象位置/值的循环。
对于（var i=0；i

总的来说，我建议重新分解此代码，这样重置函数就不会重新创建这么多对象。基本上，重置功能只是重新创建大量游戏逻辑

您确定的具体问题似乎来自于您在每次重置时调用setInterval而不清除前一个间隔的事实。请参阅下面的代码，并进行最小的更改以防止此问题

var windowx,
    windowy,
    canvas,
    player,
    quadTree,
    ctx,
    gameLoop;

var drawObjects;
var keyState;

var mainloop;
var animFrame;
var ONE_FRAME_TIME;

var reset = function() {

    // Remove our old game loop
    clearInterval(gameLoop);

    //get canvas and set height and width
    canvas = document.getElementById('canvas');
    canvas.setAttribute('width', windowx / 2);
    canvas.setAttribute('height', windowy / 2);
    ctx = canvas.getContext("2d");
    drawObjects = [];
    keyState = {};
    quadTree = new Quadtree(quadTreeBounds);


    //make the friendly square
    player = new Rectangle(20, 20, 40, 40, 0, 0, XPhysicsBehaviorNormal, YPhysicsBehaviorNormal, XBoundaryBehaviorInCanvas, YBoundaryBehaviorInCanvas, playerObjectType, '#580000', null);
    drawObjects.push(player);
    drawObjects.push(new Rectangle(40, 100, canvas.width + (distanceOutsideCanvasBeforeDie / 2), canvas.clientHeight - 100, defaultEnemyRectangleVelocity, 0, null, YPhysicsBehaviorNormal, null, YBoundaryBehaviorInCanvas, enemyObjectType, null, OutOfCanvasDieBehavior));


    backgroundMusicAudio.play();

    //define main loop
    mainloop = function() {
        buildQuadTree();
        updateGame();
        drawGame();
    };

    //define the windowanimationframeobject
    animFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        null;

    if (animFrame !== null) {
        var recursiveAnim = function() {
            mainloop();
            animFrame(recursiveAnim, canvas);
        };

        // start the mainloop
        animFrame(recursiveAnim, canvas);
    } else {
        // fallback to setInterval if the browser doesn't support requestAnimationFrame
        ONE_FRAME_TIME = 1000.0 / 60.0;
        gameLoop = setInterval(mainloop, ONE_FRAME_TIME);
    }
}

$(function() {
    //get window width and height;
    windowx = window.innerWidth;
    windowy = window.innerHeight;

    reset();

    $(document).on('change', '#sound-enabled-toggle', function() {
        var isChecked = $(this).is(':checked');
        $('#sound-enabled-toggle').blur();
        if (isChecked) {
            backgroundMusicAudio.play();
            playerJumpAudio = playerJumpMusicAudioSetup();
            playerBlinkAudio = playerBlinkMusicAudioSetup();
        } else {
            backgroundMusicAudio.pause();
            playerJumpAudio = new Audio('');
            playerBlinkAudio = new Audio('');
        }
    });
});

//left the function here in case I need to do anything else but for now it's  just clearing.
function buildQuadTree() {
    quadTree.clear();
}

function updateGame() {

    //determine if there are any keys pushed at the current point
    keyPressActions();

    //loop for calculating and updating all objects positions/values.
    for (var i = 0; i < drawObjects.length; i++) {
        var object = drawObjects[i];
        quadTree.insert(new SimpleRectangle(object.x, object.y, object.width || (object.radius * 2), object.height || (object.radius * 2), object.name));
        object.update();

        //roundFloatingPoints Numbers to 2 decimal places
        roundObjectVelocitiesAndPoints(object);
    }
    PlayerDeathTrigger(player);
}

function drawGame() {
    //clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = "20px Verdana";
    ctx.fillText("100,000", (canvas.width * .8), (canvas.clientHeight * .1));
    ctx.font = "15px Verdana";
    ctx.fillText("Temp Score", (canvas.width * .8), (canvas.clientHeight * .05));

    //draw all objects in drawObjects
    for (var i = 0; i < drawObjects.length; i++) {
        var object = drawObjects[i];
        object.draw();
    }
}

var windowx，
窗口的，
帆布，
玩家，
四叉树，
ctx，
配子环；
变量对象；
var-keyState；
var主回路；
无人机框架；
可变一帧时间；
var reset=函数（）{
//移除我们的旧游戏循环
clearInterval（gameLoop）；
//获取画布并设置高度和宽度
canvas=document.getElementById（'canvas'）；
canvas.setAttribute（'width'，windowx/2）；
canvas.setAttribute（'height'，windowy/2）；
ctx=canvas.getContext（“2d”）；
drawObjects=[]；
keyState={}；
四叉树=新四叉树（四叉树组）；
//使友好的广场
player=新矩形（20,20,40,40,0,0，Xphysisbehaviornormal，Yphysisbehaviornormal，XboundaryBehaviorInCas，YboundaryBehaviorInCas，PlayerObject类型，'#580000'，null）；
推（玩家）；
drawObjects.push（新矩形（40100，canvas.width+（distanceOutsi
var windowx,
    windowy,
    canvas,
    player,
    quadTree,
    ctx,
    gameLoop;

var drawObjects;
var keyState;

var mainloop;
var animFrame;
var ONE_FRAME_TIME;

var reset = function() {

    // Remove our old game loop
    clearInterval(gameLoop);

    //get canvas and set height and width
    canvas = document.getElementById('canvas');
    canvas.setAttribute('width', windowx / 2);
    canvas.setAttribute('height', windowy / 2);
    ctx = canvas.getContext("2d");
    drawObjects = [];
    keyState = {};
    quadTree = new Quadtree(quadTreeBounds);


    //make the friendly square
    player = new Rectangle(20, 20, 40, 40, 0, 0, XPhysicsBehaviorNormal, YPhysicsBehaviorNormal, XBoundaryBehaviorInCanvas, YBoundaryBehaviorInCanvas, playerObjectType, '#580000', null);
    drawObjects.push(player);
    drawObjects.push(new Rectangle(40, 100, canvas.width + (distanceOutsideCanvasBeforeDie / 2), canvas.clientHeight - 100, defaultEnemyRectangleVelocity, 0, null, YPhysicsBehaviorNormal, null, YBoundaryBehaviorInCanvas, enemyObjectType, null, OutOfCanvasDieBehavior));


    backgroundMusicAudio.play();

    //define main loop
    mainloop = function() {
        buildQuadTree();
        updateGame();
        drawGame();
    };

    //define the windowanimationframeobject
    animFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        null;

    if (animFrame !== null) {
        var recursiveAnim = function() {
            mainloop();
            animFrame(recursiveAnim, canvas);
        };

        // start the mainloop
        animFrame(recursiveAnim, canvas);
    } else {
        // fallback to setInterval if the browser doesn't support requestAnimationFrame
        ONE_FRAME_TIME = 1000.0 / 60.0;
        gameLoop = setInterval(mainloop, ONE_FRAME_TIME);
    }
}

$(function() {
    //get window width and height;
    windowx = window.innerWidth;
    windowy = window.innerHeight;

    reset();

    $(document).on('change', '#sound-enabled-toggle', function() {
        var isChecked = $(this).is(':checked');
        $('#sound-enabled-toggle').blur();
        if (isChecked) {
            backgroundMusicAudio.play();
            playerJumpAudio = playerJumpMusicAudioSetup();
            playerBlinkAudio = playerBlinkMusicAudioSetup();
        } else {
            backgroundMusicAudio.pause();
            playerJumpAudio = new Audio('');
            playerBlinkAudio = new Audio('');
        }
    });
});

//left the function here in case I need to do anything else but for now it's  just clearing.
function buildQuadTree() {
    quadTree.clear();
}

function updateGame() {

    //determine if there are any keys pushed at the current point
    keyPressActions();

    //loop for calculating and updating all objects positions/values.
    for (var i = 0; i < drawObjects.length; i++) {
        var object = drawObjects[i];
        quadTree.insert(new SimpleRectangle(object.x, object.y, object.width || (object.radius * 2), object.height || (object.radius * 2), object.name));
        object.update();

        //roundFloatingPoints Numbers to 2 decimal places
        roundObjectVelocitiesAndPoints(object);
    }
    PlayerDeathTrigger(player);
}

function drawGame() {
    //clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = "20px Verdana";
    ctx.fillText("100,000", (canvas.width * .8), (canvas.clientHeight * .1));
    ctx.font = "15px Verdana";
    ctx.fillText("Temp Score", (canvas.width * .8), (canvas.clientHeight * .05));

    //draw all objects in drawObjects
    for (var i = 0; i < drawObjects.length; i++) {
        var object = drawObjects[i];
        object.draw();
    }
}