進行方向が変わるタイミングで3つのオブジェクトの表示順が変わりまた100回のうちに表示内容が消去されるようになります。ランダムの機能を使用しているのでいつそうなるのかは神のみぞ知るって感じです。。。また方向転換するたびに奏でる音も変わります。どんな音が出るかもまた神のみぞ知るって感じです。。。
関数resetCountで表示状態の初期化とどのオブジェクトが前に来るとかと言う表示順を設定して、関数playSoundでどんな音を出力するのかを設定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 描画状態を初期化する resetCount() { // 1-100の間から初期化カウントを取得 var count = Math.random() * 100; // 初期化カウントを超えた場合は描画状態を初期化 if (this.count >= count) { this.context.clearRect(0,0,800,600); this.count = 0; } else { // 初期化しない場合は増加 this.count++; } // 表示順を設定する。 this.element.style.zIndex = Math.floor(Math.random() * 3); // 音再生 this.playSound(); } playSound() { // 音量を設定 (0から1の間でランダム) var volume = Math.floor(Math.random() * 100); // 音程配列から今回再生する音程をランダムに取得 var note = this.notes[this.keys[Math.floor(Math.random() * this.keys.length)]]; // 波形(音色)配列から今回再生する波形をランダムに取得 var oscillatorType = this.oscillatorTypes[Math.floor(Math.random() * this.oscillatorTypes.length)]; this.synth.play(volume, note, oscillatorType); } |
という感じでこのプログラムの解説を終わりにしようと思います。
最後に説明しきれなかった部分等も含めた全体を記載しておきます。
次回はこれを応用したものを作ってみようかと思ってます、はい。
動作するプログラムはこちらです。
続きを読む