2023 ソフトウェア設計及び演習用の班Wiki

この画面では、「シミュレーション」「お酒情報」「設定」の３つのボタンがあり、そのいずれかをクリックするとそのページに遷移する。

• 実装方法
  buttonを利用し、タグにそれぞれのパスを埋め込むことでページ遷移を実現している。

この画面では、体重、アルコール度数、量、杯数を入力し、結果ボタンを押すことでsimu.jsへ値が送られる。simu.jsから返ってきた値を出力する。また、この予測時間に対応した画像を出力する。戻るボタンではタイトル画面に戻る。

• 実装方法
  inputでデータの遷移を実現している。document.getElementByIdを用いて出力をしている。

この画面では全１０種のボタンを用意し、それを押したときに酒に関する情報を表示する。 また戻るボタンでタイトルに戻る。

• 実装方法
  cp_boxというボタンクラスを作成し、クリックすると隠れていた文字が表示されることで実現している。 またbuttonにページのパスを埋め込むことで遷移を実現している。

この画面では主に各ページにおけるBGMとSEのON，OFFの制御を行っている。また戻るボタンではタイトル画面に戻る。注意点としてブラウザの設定において、音楽の自動再生を許可されていないとうまくBGMが再生されないので、プログラムを試す場合は許可するを選択してほしい。

• 実装方法
  BGM.jsとSE.jsと連携することで他ページに渡るBGMとSEの制御を行っている。また、buttonタグのonclick属性を用いることでBGM、SEそれぞれ専用のjavascript内にある関数を呼び出し制御している。

今回私達が作成したアプリの主となる機能をする場所です。simu.htmlから体重、アルコール度数、量、杯数の情報が結果ボタンが押されることでこの場所に送られ、ここで計算をします。 計算結果をhtmlに返します。

• 関数
  1.calc_kekka()
  この関数ではアルコールの抜ける時間を計算している。getElmentByIdを用いて体重、アルコール度数、量、杯数をsimu.htmlから読み出し、計算を行っている。計算と、それに応じて危険度を表す画像の出力も担っている。
  2.calc_kekka2()
  この関数ではcalc_kekka()と同様の手順でアルコールの抜ける時間を計測し、計算結果から体内からアルコールが抜けるのが翌日なのか今日なのか判定し、時刻を表示する。

ボタンを押すとお酒の情報が表示されたり消えたりする。

• 実装方法
  クリックするとhiddenクラスをつけ外しすることで実現している。

各ページにおいて、SEを出力するためのプログラム。また、webstorageを用いることで各ページのSEのON,OFFの制御もここで行っている。

各ページにおいて、BGMを出力するためのプログラム。またwebstorageを用いることでBGMのON,OFFの制御を行うとともに、ページ遷移とともにBGMがリセットされないようにするための制御も行っている。

• BGM＿ON、BGM＿OFF()関数：これらはそれぞれ音楽の再生、一時停止を制御する関数である。またsessionStorageを用いることで再生を続けるか、一時停止したままなのかを他ページに伝える。
• a()関数：これは、現在のBGMがどこまで再生されているかを記録する関数でこれもsessionStorageを用いて実現している。
• その他：if文に関しては記録された再生時間を参照してその時間からBGMを再生するという操作を行っている。

文字の大きさ、色、ボタンの形などの装飾を行う。また、tytle.htmlにページ遷移する際文字がゆっくり下から上にフェードインするようになっている。

• 実装方法
  フェードインの方法に関して、アニメーションのfadeupとdelayを利用することで実現している。

cp_boxのボタンが押されたらボタンの下にゆっくりとテキストが表示されるようにしている。

set.htmlで画面に出力される文字やボタンなどのデザインを行っている。