!目次 *[[6/1|#p1]] *[[6/8|#p2]] *[[6/15|#p3]] *[[6/22|#p4]] *[[6/29|#p5]] <<6/1>> スタート直後のストーリーアニメーションの作成。
jQueryをダウンロードし、タイプライターのように文字を表示するようにした。
<<{image_1.png}
画像だとわからないが、実際は一文字ずつ順番に表示されていく。 <<<改善点>>> *文字の位置を少し下げる *クリックしたら次の文または画像に切り替わるようにする
　→画面をクリックしたら変数countの値が1増えるようにし、その値に応じて表示する文章を変える
　[[▲ページ上部へ|#]] <<6/8>> 文字の位置を下げることに成功した。次の文章を表示しようと試みたが、同時に表示されてしまう。
<<{Screenshot-2018-6-8 カーニハンの大冒険(蟹).png}
改善策を探しつつ、タイトル画面の作成をした。
<<{image_3.png}
背景は仮のものである。
ボタンを設置し、クリックしたボタンによってその後の動作が変わる。
<<<改善点>>> *引き続き文章が順番に表示されるように頑張る *ウィンドウを拡大・縮小した時にボタンの位置が変わってしまうのをどうにかする
　[[▲ページ上部へ|#]] <<6/15>> 日本語入力ができなくて困った。(6/22mozc設定修正済み)
6/8時点の2文が同時に表示されてしまう件を改善するよう試みたがうまくいかなかった。
カーソルが点滅するようなエフェクトをとりやめ、文字だけがカタカタと入力されていくように変更。
--- (before)
↓
(after)
---
caretオプションでカーソルの表示設定をoffにし、2文目をやや遅らせて表示させるように変更。
これにより、自然なオープニングアニメーションになった。 <<{screen.png}
(スクショだと違いがわからない・・・) ページ遷移の設定も行った。タイトル画面のボタンをクリックするとゲームが始まる(オープニングアニメーションに遷移する)ようにした。 ---

--- 終了ボタンの実装に苦労した。検索して出てくる"window.close();"だけを入力しても全くウィンドウが閉じる気配がなく、対処法を検索して出てきたこのタグで対応。
一応ゲームは終了するが、空白タブに入れ替わるだけである。ここも改善の余地あり。
文字タイプに合わせてキーボード音がなるようにした。
しかし、文字の長さより効果音の再生時間のほうが長く違和感。
波形編集ソフト等で効果音のトリミングを行おうと試みるもAudacityのlinuxバージョンのインストール方法がわからず・・・。 <<<改善点>>> 「ゲームを終了する」ボタンをクリックしたらウィンドウごと閉じるようにする。
7秒ある効果音を5秒ほどにトリミングし実装する。
　[[▲ページ上部へ|#]] <<6/22>> オープニングアニメーションに3文目「しかもここは海の底」4文目「とにかくここから出よう」を追加する。 6/1の改善点「クリックしたら次の文または画像に切り替わるようにする　→画面をクリックしたら変数countの値が1増えるようにし、その値に応じて表示する文章を変える」
これを実装しようと頑張ったができず。他の方法を考えてみることにした。 ページ遷移を使って3、4文目を表示する。
新たなページ“title2.html”を作成。
“title1.html”のヘッダ部分に以下のコードを追加。 --- $(function(){
setTimeout(function(){
window.location.href = 'title2.html';
},7000);
});
--- これで1、2文目が表示された7000ms後に3、4文目が表示されるようになった。 <<{sent3.png}
このアニメーションが終了したらステージ1のプレイ画面に切り替わる。（後々実装予定）
　[[▲ページ上部へ|#]] <<6/29>> ゲームオーバー画面の制作にとりかかる。このような画面を作りたい。
<<{1530247807348.jpg}
使用したカニの画像は私が大晦日に食べたものであるので著作権は問題なし。
フォントや色は仮のものである。とりあえずこのように文字や画像を配置したい。
そして全体をフェードイン表示させたい。
　[[▲ページ上部へ|#]] --- <<[[トップページへ戻る|18::gr07]]