Если заявление поставлено не в том месте - PullRequest
Новая
       11

Если заявление поставлено не в том месте

0 голосов
/ 22 февраля 2019

Для того, чтобы провести некоторый тест на TweenMax, я делаю простую игру "лови цвет", однако похоже, что я делаю какую-то ошибку в своем коде, поскольку все в порядке, но единственное выражение 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 должен смениться на «Вы выиграли», если вы ловите синий, или «Попробовать еще раз» для других цветов.

Заранее благодарим за помощь и советы.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Пожалуйста, смотрите функцию ниже.Вы должны поймать цвет элемента во время события 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();
        }
    })
}
0 голосов
/ 22 февраля 2019 
I have made some changes and its working fine for me.
https://codepen.io/anon/pen/NoZBPz

Проблема в том, что он дает значение rgb, и приложение также не останавливается на воне и изменило условие 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();
        }
...