为了在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应该在“您赢了”之间进行更改,而对于其他颜色,则应在“重试”之间进行更改。
在此先感谢您的帮助和建议。
答案 0 :(得分:2)
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();
}
答案 1 :(得分:0)
请参阅下面的功能。 您必须在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();
}
})
}