如果声明放在错误的地方

Question

为了在 TweenMax 上做一些测试，我正在做一个简单的 "catch-the-color" 游戏，但看起来我在我的代码中犯了一些错误，因为一切都很好，但一个 if 语句应该结束游戏.我想问题不在于换色器本身，而在于我放置 if 语句的地方。我对编程还很陌生，所以我很可能犯了一些愚蠢的错误。

您可以在此处查看整个页面：https://codepen.io/IvanRoselli/pen/vbqjoo

这是我用过的Javascript

var colorCircle = document.getElementById('circle');
var startBtn = document.getElementById('start-btn');
var catchBtn = document.getElementById('catch-btn');
var mainTitle = document.getElementById('main-title');
var colorChange = new TimelineMax({repeat: -1});
var circleBackgroundColor = document.getElementById('circle').style.backgroundColor;
var colorCircle = document.getElementById('circle');
var startBtn = document.getElementById('start-btn');
var catchBtn = document.getElementById('catch-btn');
var mainTitle = document.getElementById('main-title');
var colorChange = new TimelineMax({repeat: -1});
var circleBackgroundColor = 
document.getElementById('circle').style.backgroundColor;

function playPause(){
    colorChange.paused(!colorChange.paused()); 
}

function getIt(){
     $('#catch-btn').click(function(){
        if(circleBackgroundColor === 'blue'){
            mainTitle.innerHTML = "YOU WON!";
            return;
        } else {
            mainTitle.innerHTML = "Try again pressing CATCH"; 
            playPause();
        }
    })
}

function startGame(){
    getIt();
    $('#start-btn').css("display", "none");
    $('#catch-btn').css("display", "inline");
    $(colorCircle).css("cursor", "pointer");
    colorChange.from(colorCircle, .5, {backgroundColor: 'orange', ease: SteppedEase.config(1)});
    colorChange.to(colorCircle, .5, {backgroundColor: 'red', ease: SteppedEase.config(1)});
    colorChange.to(colorCircle, .5, {backgroundColor: 'pink', ease: SteppedEase.config(1)});
    colorChange.to(colorCircle, .5, {backgroundColor: 'yellow', ease: SteppedEase.config(1)});
    colorChange.to(colorCircle, .5, {backgroundColor: 'blue', ease: SteppedEase.config(1)});
    colorChange.to(colorCircle, .5, {backgroundColor: 'green', ease: SteppedEase.config(1)});
    colorChange.to(colorCircle, .5, {backgroundColor: 'cyan', ease: SteppedEase.config(1)});


};


$('#start-btn').click(function() {
    startGame();
});

基本上，H1 应该在 "You Won" 之间变化，如果你抓住蓝色或 "Try Again" 其他颜色。

在此先感谢您的帮助和建议。

Answer 1

I have made some changes and its working fine for me.
https://codepen.io/anon/pen/NoZBPz

问题是它给出了 rgb 值，而且应用程序也没有在 won 上停止也改变了 if 条件。

if((document.getElementById('circle').style.backgroundColor) === 'rgb(0, 0, 255)'){
            mainTitle.innerHTML = "YOU WON!";
          playPause();
            return;
        } else {
            mainTitle.innerHTML = "Try again pressing CATCH"; 
            playPause();
        }

Answer 2

请看下面的函数。您必须在 onclick 事件期间捕获元素的颜色，这意味着颜色是在单击按钮时捕获的而在您的情况下，颜色在加载过程中被捕获并且永远不会改变。我使用 rgb 格式进行条件检查。

function getIt(){
    $('#catch-btn').click(function(){
       circleBackgroundColor = document.getElementById('circle').style.backgroundColor;
        if(circleBackgroundColor == 'rgb(0, 0, 255)'){
            mainTitle.innerHTML = "YOU WON!";
            return;
        } else {
            mainTitle.innerHTML = "Try again pressing CATCH"; 
            playPause();
        }
    })
}

如果声明放在错误的地方

If statement put in wrong place

javascript

if-statement

background-color

gsap