JavaScript勉強記 ep2 バスドラム メトロノーム（仮）

youtu.be

今回、勉強中であるJavaScriptを使って、何か作ってみよう！ということで、「バスドラムメトロノーム（仮）」となるものを作ってみました！

(仮)というのは試しに作ってみたからという感じです。後でわかりますが、めっちゃ不安定なできとなっております…。（笑）

どういうもの？

画像の素材としては、いらすとやさんのドラムペダルのイラストと大太鼓のイラストと姿勢の良い・姿勢の悪い椅子に座る男の子のイラストの3つを組み合わせて、以下の2つの画像を作りました。(Photoshopのパペットワープめっちゃ便利…。)

ペダルを踏んでいる画像とペダルを踏んでいない画像の2つです。

この2つの画像が自分の決めたBPMでパラパラ漫画のように動くというものです。

コード

イヌでもわかるJavaScript講座のStep.65 - 定期的に画像を変更する(スライドショー)を参考にさせていただきました。

以下のようなコードになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>バスドラム</title>
</head>

<body>
</body>
<script type="text/javascript">
myImage=new Array(
"pedal0.png",
"pedal1.png",
"pedal1.png",
"pedal1.png"
);
myNowCnt=0;
myInterval=0;

function mySet(){
	var myTemp=eval(document.myForm.myFormTemp.value);
	var myInterval=eval(250*(60/Number("myTemp")));
	return myInterval;
}
	
	
function myChange(){
	if(myNowCnt==myImage.length-1){
		myNowCnt=0;
	}else{
		myNowCnt++;
	}
	document.sshow.src=myImage[myNowCnt];
	
	setTimeout("myChange()","mySet()");
}
	
function myStart(){
	mySet();
	myChange();
}
</script>
<form name="myForm">
テンポを入力してください BPM=
<input type="text" size="2" name="myFormTemp">
<input type="button" value="ＯＫ" onclick="myStart()">
</form>
<img src="pedal0.png", width="500" height="500" name="sshow">

</html>

setTimeout関数（メソッド）を再帰的に呼び出して、一定の周期で画像が切り替わります。

周期はフォームから自分で入力できるようになっています。BPMなので、１分間に何回バスドラムを叩かくか決められます。

テンポを決めて、フォームのOKボタンを押すと、アニメーションが動き始めます。

テンポを決める関数（myTemp）とパラパラ漫画が動かす関数（myChange）がOKボタンを押すと、myTemp→myChangeの順で開始されるという感じです。

ただ動画でもわかるように、テンポを決めるフォームに何も打ち込まなくても動いてしまったり、何回も押したら、トリッキーなリズムを刻むようになったり…（苦笑）

もしかするとsetTimeout関数がごっちゃになって、何重にも実行されてしまっているのかもしれないです。

まだまだ修行は続きそうです…。

よみあきでした。

【理系大学生】yomiakiのラクガキ

徒然なるままによみあき

【プログラミング】JavaScript勉強記 ep2 〜バスドラムメトロノーム（仮）〜

JavaScript勉強記 ep2 バスドラム メトロノーム（仮）

どういうもの？

コード