Javascript 更改动画速度
我正在创建一个新的“打鼹鼠”式游戏,在这个游戏中,孩子们必须根据问题打正确的数字。到目前为止,一切都进行得非常顺利,我有一个计时器,计算正确答案和错误答案,当游戏开始时,我有一些被称为“角色”的div,它们在设定的时间随机出现在容器中 我拿走了“播放”按钮,换成了“轻松”、“中等”和“硬”。单击模式时,我希望速度改变。三个按钮共享“游戏设置”类 下面是处理动画的代码Javascript 更改动画速度,javascript,jquery,Javascript,Jquery,我正在创建一个新的“打鼹鼠”式游戏,在这个游戏中,孩子们必须根据问题打正确的数字。到目前为止,一切都进行得非常顺利,我有一个计时器,计算正确答案和错误答案,当游戏开始时,我有一些被称为“角色”的div,它们在设定的时间随机出现在容器中 我拿走了“播放”按钮,换成了“轻松”、“中等”和“硬”。单击模式时,我希望速度改变。三个按钮共享“游戏设置”类 下面是处理动画的代码 function randomFromTo(from, to) { return Math.floor(Math.rand
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
function scramble() {
var children = $('#container').children();
var randomId = randomFromTo(1, children.length);
moveRandom("char" + randomId);
}
var currentMoving = [];
function moveRandom(id) {
// If this one's already animating, skip it
if ($.inArray(id, currentMoving) !== -1) {
return;
}
// Mark this one as animating
currentMoving.push(id);
var cPos = $('#container').offset();
var cHeight = $('#container').height();
var cWidth = $('#container').width();
var bWidth = $('#' + id).width();
var bHeight = $('#' + id).css('top', '395px').fadeIn(100).animate({
'top': '-55px'
}, 6000).fadeOut(100);
maxWidth = cPos.left + cWidth - bWidth;
minWidth = cPos.left;
newWidth = randomFromTo(minWidth, maxWidth);
$('#' + id).css({
left: newWidth
}).fadeIn(1000, function () {
setTimeout(function () {
$('#' + id).fadeOut(1000);
// Mark this as no longer animating
var ix = $.inArray(id, currentMoving);
if (ix !== -1) {
currentMoving.splice(ix, 1);
}
window.cont++;
}, 1000);
});
}
如何使这些设置根据开始时按下的难度进行更改
Fiddle:您的按钮不共享“游戏设置”类,它们位于div中的“游戏设置”类中,因此如果您在按钮之间单击,游戏也会启动。修改如下:
// remove this line
$(".game_settings").find('input').click(
// replace it with...
var AnimationSpeed = 6000;
$(".game_settings").find('input').click(function () {
// here you could set a different timer value for each variant
// or simply send the classname to startplay and handle the
// settings there.
switch($(this).attr('class')) {
case 'easy':
AnimationSpeed = 6000;
break;
case 'medium':
AnimationSpeed = 3000;
break;
case 'hard':
AnimationSpeed = 1000;
break;
}
startplay();
});
在计时器功能中,删除以下行:
$("#btnstart").bind("click", startplay);
在函数moveRandom中,使用AnitActionSpeed:
var bHeight = $('#' + id).css('top', '395px').
fadeIn(100).animate({'top': '-55px'}, AnimationSpeed).
fadeOut(100);
您可以找到一个正在运行的演示。在DotNet中,您需要“停止”故事板,并通过速度修改重新启动
Dim sb as Storyboard = ctype(Me.FindRessources("Storyboard1"), Storyboard)
sb.Stop
Select Case Level
Case "easy": sb.SpeedRatio = 0.75
Case "medium": sb.SpeedRatio = 1
Case "hard": sb.SpeedRatio = 2.0
End Select
sb.Begin
也许在JavaScript中也是如此?我认为您要做的是根据游戏难度设置时间间隔。这就是我认为你可以让它工作的方式 将要进行的更改: html:
//Change
<div class="game_settings">
<div><input class="easy" type="button" value="Easy"></div>
<div><input class="medium" type="button" value="Medium"></div>
<div><input class="hard" type="button" value="Hard"></div>
</div>
//To
<div class="game_settings">
<div><input class="game-speed" id="easy" type="button" value="Easy"></div>
<div><input class="game-speed" id="medium" type="button" value="Medium"></div>
<div><input class="game-speed" id="hard" type="button" value="Hard"></div>
</div>
//Change
$(".game_settings").click(function () {
startplay();
});
//To
$(".game-speed").click(function () {
startplay($(this).attr('id'));
});
//Change in startPlay()
startPlay()
play = setInterval(function () {
if (window.cont) {
window.cont--;
scramble();
}
}, 500);
//To
startplay(speed_check) // As it is now expecting a variable
if(speed_check == 'easy'){
play = setInterval(function () {
if (window.cont) {
window.cont--;
scramble();
}
}, 2000);
}
else if(speed_check == 'medium'){
play = setInterval(function () {
if (window.cont) {
window.cont--;
scramble();
}
}, 1000);
}
else if(speed_check == 'hard'){
play = setInterval(function () {
if (window.cont) {
window.cont--;
scramble();
}
}, 400);
}
else{
play = setInterval(function () {
if (window.cont) {
window.cont--;
scramble();
}
}, 1000);
}
根据需要设置时间间隔
注意:这只是一个想法,它应该是什么样子。当然,您可以提高效率,因为您比其他人更了解自己的代码。我是否可以使用“游戏设置”单击功能来交换此功能?你有小提琴吗@阿克塞尔。michel@Milo-是的,你替换它,我没有深入研究你的代码,所以我不知道你想要改变的所有间隔/超时的确切速度。这里是fiddle修改startplay函数的间隔。@Milo-J我已经更新了fiddle:,现在每个变量的块以不同的速度移动。有人能解释下一票吗?这个答案有什么问题吗?它与这个问题有什么关系?今天我在我的项目中遇到了同样的问题“如何设置动画的相关级别”,但在您的情况下评级的情况似乎是巨大的不同。