<<活動記録>> <<第２回>> JavaScriptや、GiiLabの使い方の説明。正直、理解度は怪しい。 簡易企画書の制作では音ゲーを作ること、ゲーム画面の方向性が見えてきた。 <<第３回>> ものと操作の洗い出し。デザイン・操作・採点基準などは決まってきたが、タイトルは迷走中。 <<第４回>> ものと操作の洗い出し。前回決まらなかった採点基準、スタート・クリア・オプション・選曲画面などが決まった。未だにタイトルが決まらないので各自で考えてきて発表しあうこととなった。 <<第５回>> 各画面ごとの処理内容を確定した。画面遷移図を制作したので、後はモジュールの振り分け。 <<第６回>> プロトタイプの製作開始。担当モジュールはゲーム内処理。時間計測や音楽再生を担当するモジュール。時間の計測は開始時刻との差を利用する方式を使うプログラムにした。時間計測のめどは立ったが知識不足で音楽に苦戦中。 <<第７回>> 音楽再生部分に苦戦中。ただ再生するだけならできるがストップと再生がなかなか組み込めない。 <<第８回>> なかなかできなかった音楽再生部分がなんとか落ち着いてきた。ストップウォッチと連動して、音楽が再生、停止、リセットできるようになった。現在は一曲の状態で試しているので複数の曲でもできるように改良していく必要がある。 <<プログラム置き場>> 内部処理のプロトタイプ
00:00:000
(function(){ 'use strict'; //楽曲の読み込み var TARGET = new Audio('01.mp3'); //htmlのidからデータを取得 //取得したデータを変数に代入 var timer = document.getElementById('timer'); var start = document.getElementById('start'); var stop = document.getElementById('stop'); var reset = document.getElementById('reset'); //クリック時の時間を保持するための変数定義 var startTime; //経過時刻を更新するための変数。 初めはだから0で初期化 var elapsedTime = 0; //タイマーを止めるにはclearTimeoutを使う必要があり、そのためにはclearTimeoutの引数に渡すためのタイマーのidが必要 var timerId; //タイマーをストップ -> 再開させたら0になってしまうのを避けるための変数。 var timeToadd = 0; //ミリ秒の表示ではなく、分とか秒に直すための関数, 他のところからも呼び出すので別関数として作る //計算方法として135200ミリ秒経過したとしてそれを分とか秒に直すと -> 02:15:200 function updateTimetText(){ //m(分) = 135200 / 60000ミリ秒で割った数の商　-> 2分 var m = Math.floor(elapsedTime / 60000); //s(秒) = 135200 % 60000ミリ秒で / 1000 (ミリ秒なので1000で割ってやる) -> 15秒 var s = Math.floor(elapsedTime % 60000 / 1000); //ms(ミリ秒) = 135200ミリ秒を % 1000ミリ秒で割った数の余り var ms = elapsedTime % 1000; //HTML 上で表示の際の桁数を固定する　例）3 => 03　、 12 -> 012 //javascriptでは文字列数列を連結すると文字列になる //文字列の末尾2桁を表示したいのでsliceで負の値(-2)引数で渡してやる。 m = ('0' + m).slice(-2); s = ('0' + s).slice(-2); ms = ('0' + ms).slice(-3); //HTMLのid　timer部分に表示させる　 timer.textContent = m + ':' + s + ':' + ms; } //再帰的に使える用の関数 function countUp(){ //timerId変数はsetTimeoutの返り値になるので代入する timerId = setTimeout(function(){ //経過時刻は現在時刻をミリ秒で示すDate.now()からstartを押した時の時刻(startTime)を引く elapsedTime = Date.now() - startTime + timeToadd; updateTimetText() //countUp関数自身を呼ぶことで10ミリ秒毎に以下の計算を始める countUp(); //1秒以下の時間を表示するために10ミリ秒後に始めるよう宣言 },10); } //startボタンにクリック時のイベントを追加(タイマースタートイベント) start.addEventListener('click',function(){ //在時刻を示すDate.nowを代入 startTime = Date.now(); //音楽の再生 TARGET.play(); //再帰的に使えるように関数を作る countUp(); }); //stopボタンにクリック時のイベントを追加(タイマーストップイベント) stop.addEventListener('click',function(){ //音楽の一時停止 TARGET.pause(); //タイマーを止めるにはclearTimeoutを使う必要があり、そのためにはclearTimeoutの引数に渡すためのタイマーのidが必要 clearTimeout(timerId); //タイマーに表示される時間elapsedTimeが現在時刻かたスタートボタンを押した時刻を引いたものなので、 //タイマーを再開させたら0になってしまう。elapsedTime = Date.now - startTime //それを回避するためには過去のスタート時間からストップ時間までの経過時間を足してあげなければならない。elapsedTime = Date.now - startTime + timeToadd (timeToadd = ストップを押した時刻(Date.now)から直近のスタート時刻(startTime)を引く) timeToadd += Date.now() - startTime; }); //resetボタンにクリック時のイベントを追加(タイマーリセットイベント) reset.addEventListener('click',function(){ //音楽の停止 TARGET.pause(); TARGET.currentTime = 0; //経過時刻を更新するための変数elapsedTimeを0にしてあげつつ、updateTimetTextで0になったタイムを表示。 elapsedTime = 0; //リセット時に0に初期化したいのでリセットを押した際に0を代入してあげる timeToadd = 0; //updateTimetTextで0になったタイムを表示 updateTimetText(); }); })();