Question

所以我同意用他的一个小项目来帮助一个朋友。制作一个简单的游戏，人们选择一个标记行，然后加载另一个。我完成了布局和一些功能，但它们都很糟糕。

当我尝试添加第三阶段时，问题就开始了。我很确定我会遇到某种内存泄漏，因为一切都开始乱了。我当前的迭代试图将功能分开，但不可否认，只有一个基本的js课程，我认为我还不知道如何使这项工作。

我这里有一个小提琴。你可以在负载上看到它直接跳到第三阶段，即使这样也无法正常工作。我相信它的编码可以做出正确的答案＆＃34; Rock and Roll＆＃34;闪烁绿色，但仍然闪烁红色。

function resetFrame1 (){

    $('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
    callback();

}

function resetFrame2 (){

    $('#leftSide, #rightSide, #leftImage, #rightImage, #leftText, #rightText').fadeToggle(750).delay(1).css("background-color", "transparent");
    callback();
}

function end(){
    //right now undefined since I can't get this to work at all.



}





function stageOne(){

    var score = 0;

    $('#leftText').text("Green Living. . . . . Easy!!!")

    $('#leftImage').html("<img src=>");

    $('#rightText').text("Burn Your Tires!");

    $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            score++;
            $('#leftSide').css( "background-color", "green");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame1();
            });
        }   
        else if (e.which==76 || e.which==108){
            $('#rightSide').css( "background-color", "red");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame1();
            });
        }   
    });

}   

function stageTwo(){


        $('#leftText').text("Keep your lights on. It prevents home invasion.")

        $('#leftImage').html("<img src=>");

        $('#rightText').text("The earth needs YOU!");

        $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            $('#leftSide').css( "background-color", "red");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame2();
            });
        }   
        else if (e.which==76 || e.which==108){

            score++;
            $('#rightSide').css( "background-color", "green");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    resetFrame2();
            });
        }   
    }); 
}   


function stageThree(){


        $('#leftText').text("Organic Farms are Terrorists")

        $('#leftImage').html("<img src=>");

        $('#rightText').text("Environmental Activism is the new Rock&Roll.");

        $('#rightImage').html("<img src=>");

    $('html').keyup(function(e){

        if (e.which==97 || e.which==65){
            $('#leftSide').css( "background-color", "red");

            $('#leftSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    end();
            });
        }   
        else if (e.which==76 || e.which==108){

            score++;
            $('#rightSide').css( "background-color", "green");

            $('#rightSide').fadeToggle(1000).fadeToggle(2000).fadeToggle(1000).fadeToggle(2000, function(){
                    end();
            });
        }   
    }); 
}   




$(document).ready(function(){

    stageOne(); 

    stageTwo();

    stageThree();1

});

JSFIDDLE

我继续添加我正在使用的js文件，以便允许链接到jsfiddle。

感谢大家的帮助。请记住，正如我试图帮助我的朋友一样，＆＃34;没有好事不受惩罚＆＃34;。

Answer 1

您在文档就绪功能内一个接一个地调用这些函数。如果你想让它们逐步显示，请调用stageOne（），然后有一些逻辑可以前进到第二阶段（通过调用stageTwo函数）或某些导航来在各个级别之间来回传递。因为stageThree最后被调用，所以这就是它被执行和渲染的原因。

Javascript跳过最后一个功能，忽略其他功能

1 个答案: