Menu
I'm working on a hobby project to help me better my javascript skills, so please bear with me. In short: What I'm trying to make a is a moveset metronome for super smash bros melee characters. I have some frame data for when to input a button, and will play a beep.mp3 sound at the respective frames. So what I'd like for that is to use a dependent dropdown, which I finally got working after some googling/tinkering. The code for that looks like this:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
#category2 option{
display:none;
}
#category2 option.label{
display:block;
}
</style>
<body>
<form id="formname" name="formname" method="post" action="submitform.asp" >
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="fox">Fox</option>
<option value="mario">Mario</option>
</select>
<select disabled="disabled" id="category2" name="category2">
<option value>Select Category2</option>
<!-- FOX: -->
<option rel="fox">Select: </option>
<option rel="fox" value="wavedash">Wavedash</option>
<option rel="fox" value="waveshine">Waveshine</option>
<!-- MARIO -->
<option rel="mario">Select: </option>
<option rel="mario" value="wavedash">Wavedash</option>
</select>
</form>
</body>
<script>
$(function(){
var $cat = $("#category1"),
$subcat = $("#category2");
$cat.on("change",function(){
var _rel = $(this).val();
$subcat.find("option").attr("style","");
$subcat.val("");
if(!_rel) return $subcat.prop("disabled",true);
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});
});
</script>
</html>
Then, I have a different piece of code where I wrote a function using setInterval to actually display the selected character's selected move. For example, I selected "Fox" in the option, and then I selected Fox' move "Waveshine", I would want it to run this code:
var sound1 = new Audio('beep.mp3');
var sound2 = new Audio('beep2.mp3');
var sec = 0;
var frame = 0;
var slowDown = 5;
setInterval( function(){
frame = ++frame%60;
document.getElementById("frames").innerHTML="Framecount: "+String(pad(frame));
if(frame >= 0 && frame <= 4){
sound1.loop = false;
sound1.play();
document.getElementById("test").innerHTML=("⇑");
} else {
document.getElementById("test").innerHTML="";
}
if(frame >= 4 && frame <= 14){
if(frame == 4){
sound2.play();
}
document.getElementById("test").innerHTML=("R+⇘");
}
}, (1000/60)*slowDown);
function pad ( val ) {
return val > 9 ? val : "0" + val;
}
But I can't figure out how to make it run this code once I've selected "Fox" and "Wavedash" in the option, and I also have no idea how to stop the setInterval if I would switch to, for example, "Mario" and "Wavedash". So basically I'm trying to combine the two pieces of code that I have now to run a function on interval, when a certain character and a certain move is selected. Sorry if this post is a bit unclear, please let me know if I should expand on something. Thanks for reading.
967
First you would need to put this code within a function:
function playSound() {
var sound1 = new Audio('beep.mp3');
var sound2 = new Audio('beep2.mp3');
var sec = 0;
var frame = 0;
var slowDown = 5;
setInterval( function(){
frame = ++frame%60;
document.getElementById("frames").innerHTML="Framecount: "+String(pad(frame));
if(frame >= 0 && frame <= 4){
sound1.loop = false;
sound1.play();
document.getElementById("test").innerHTML=("⇑");
} else {
document.getElementById("test").innerHTML="";
}
if(frame >= 4 && frame <= 14){
if(frame == 4){
sound2.play();
}
document.getElementById("test").innerHTML=("R+⇘");
}
}, (1000/60)*slowDown);
}
And then on your $cat and $subcat onchange events you can then invoke the playSound method.
$cat.on("change",function() {
// Your code
latestSoundInterval = playSound();
});
setInterval returns an integer, therefore it would be best to keep track of all the setIntervals you invoke when the category/subcategory is changed.
var soundInterval = setInterval() { .... }
You could use the above variable as the return type of the new playSound function.
Then to stop the interval you can use clearInterval and pass it back the soundInterval variable.
var latestSoundInterval = playSound();
clearInterval(latestSoundInterval); // Stop the set interval function
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
