なにを作る？
- HTML5 のグラフィック・サウンド系技術を使用したなにか
- こどもがネットでタイピングゲームやるのでそれを題材にする
妄想してみる
- 出題単語をどうするか？
- URL叩いたらスクレイピングして出題単語を取得する（URLによって難易度が変化？）
- 成績の保存、共有に Firebase を使う？（アカウントは Google の OAuthが使える？）
- シューティングゲーム風にする？（2D or 3D ?）
- 敵（出題単語）の出現パターンとかステージクリアとかボスキャラの概念を持たせる（社員紹介URL叩いたら、顔写真のボスキャラが登場とか）
- Web Audio API で数値化した音声データを活用できないか？（ゲームの難易度？、ビジュアル？）
- プレイ状況を Web Audio API で音声に変化を与える？（スクロール速度に合わせ再生速度を変える？）
- etc...
技術を決める
- CANVAS、SVG、WebGL？
- HTML5 本、よもつさんの記事を見て SVG に決定
- path 使ってねうねさせたらおもしろそう
- 案件にて Highcharts の SVG を直接見ざる得ない状況とかあったので触っときたい
使った技術
- SVG
- Snap.svg
- 出題単語のうごき、地面のスクロールに使用
- Web Audio API
- Web speech API
- Gulp
やったこと
- スペースハリアー風 3D タイピングゲーム
- シューティングゲームっぽく敵キャラ出現パターン・動きを定義できる
感想
- 技術というより設計の勉強がメインになった感あり
- ゲームのように常にステータスが変化する構成の場合、どのようにモデル、コントローラ、ビューの分離を行うか？
- 他のへの依存性をうすくしてビュー部分の実装に注力できるようにするにはどんな構成がよいか？
- 的なことを考えすぎて、設計の見直しとリファクタに時間を使いすぎて、肝心の技術のほうにはあまり時間を当てれなかった ><
- リファクタ中途半端な状態なのでとりあえずこれだけはきれいにしたい
- 機能追加しやすい構成にはなってる気はする
- あと SVG 素材の調達とか Snap.svg のこまかなこととか、よもつさんにいろいろ教えてもらいたい
