!目次 *[[6/1|#p1]] *[[6/8|#p2]] *[[6/15|#p3]] *[[6/22|#p4]] *[[6/29|#p5]] *[[7/6|#p6]] *[[7/13|#p7]] *[[7/20|#p8]] *[[トップページへ戻る|18::gr07]] <<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}
使用したカニの画像は私が大晦日に食べたものであるので著作権は問題なし。
フォントや色は仮のものである。とりあえずこのように文字や画像を配置したい。
そして全体をフェードイン表示させたい。
全体をフェードインさせるcssがあったのでこれを使うことにした。 --- body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
---
「かにのうわさ」を考える。
[カニの豆知識|http://onsenyado.sakura.ne.jp/kani_mame.html]からいくつか引用。
とりあえず10個考える。
ランダムで文が出るようにする。
body内に以下の文を追加。

---



--- これでランダム表示ができた。
文字や画像をセンタリングし、ほぼ理想どおりの画面ができた。あとはここにボタンをつける。

<<{gameover.png}
　[[▲ページ上部へ|#]] <<7/6>> ゲームオーバー画面にボタン設置、そしてフォントの変更を行う。
タイトル画面のときと同様にボタンを設置。(「タイトルに戻る」「やりなおす」の2つ)

“GAME OVER”のフォントを変更する。
[こちらのサイト|http://uxmilk.jp/52837]より、Caveatというフォントを使用する。
HTMLに ---
--- CSSに --- font-family: 'Caveat', cursive; --- を加える。
さらに、文字のサイズと間隔、位置を変更したので、“GAME OVER”部分のCSSは以下のようになる。 --- .title {
color: #FF0000;
font-size: 60px;
text-align: center;
margin-top: -45px;
letter-spacing: 10px;
font-family: 'Caveat', cursive;
}
--- 「かにのうわさ」の部分を少しいじってみたくなったのでいろいろ変えてみる。
最初はフォントを変更しようと試みたが、ピンとくる日本語フォントがなかったため断念。

最終的に、枠で囲ってみることにした。
[こちらのサイト|https://saruwakakun.com/html-css/reference/box]を参考にした。
26番目のタイトル付きボックスをベースに、枠線を点線に変更したものを使用。
HTMLは ---


カニのうわさ




--- CSSは --- .box26 {
position: relative;
margin: 2em 2.5em;
padding: 0.5em 0em;
border: dashed 2px #FFFFFF;
border-radius: 8px;
}

.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #000;
color: #FFFFFF;
font-weight: bold;
}

.box26 p {
margin: 0;
padding: 0;
color: #FFF;
background:#000;
text-align: center;
}
--- となった。
<<{screen2.png}
これでとりあえずステージ1のGAMEOVER画面は完成。
これをコピーしてステージ2、3用のGAMEOVER画面も作成した。

タイトル画面とゲームオーバー画面にそれぞれフリー素材のBGMをつけた。
ずっと悩まされてきた「ウィンドウサイズを変えるとボタンの位置も変わってしまう問題」を解決する。
今まで作った「タイトル画面」「ストーリー画面」「ゲームオーバー画面」のCSSに追加。 --- body {
width: 600px;
height: 450px;
}
--- これで背景が固定されたのでウィンドウサイズを変えてもボタンや画像の位置がずれることがない。

別のストーリー画面を作らなきゃいけないのだが、飽きてきたのでエンドロールから作ってみることにした。
[こちらのサイト|http://co-jin.net/web/movie-credits]を参考に、映画っぽい感じにしてみる。
HTML、CSSはとても長くなるので割愛。
背景を少し工夫してみる。
[こちらのサイト|https://www.webcreatorbox.com/tech/css-gradient]を参考に、グラデーションがかかった背景に画像が透けて見えるような背景を作ってみる。
とりあえず実行できるかを確認するために、色はサイトの例のまま、画像は[[素材集|18::gr07::活動記録]]のカニのイラストを使う。 背景部分のCSSは以下の通り。 --- body {
background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
url(http://wiki.cis.iwate-u.ac.jp/~wiki/csd/group.cgi/2018/?p=18%3A%3Agr07%3A%3A%E6%B4%BB%E5%8B%95%E8%A8%98%E9%8C%B2;f=image2.jpeg);
width:600px;
}
--- いい感じのエンドロールができた。次はこれを修正していこうと思う。

<<{endroll.png}
　[[▲ページ上部へ|#]] <<7/13>> エンドロールの修正から始める。
背景を海っぽい色合いにして、スクロールが終わったらエンドページ(これから作る)に遷移するようにする。 なんとなくゲームのロゴ的なものが欲しかったので作ってみた。
<<{kanirogo2.png} これをエンドロールの最初に流す。
最後は「and you!」で締める。

<<{screen4.png}


<<{screen5.png}
スクロールし切るまでに何秒かかるか計測し、ページ遷移のコードを足す。
--- $(function(){
setTimeout(function(){
window.location.href = 'end.html';
},52000);
});
--- 次に、エンド画面を作成する。
さっきのロゴと「おわり」という文字をフェードイン→フェードアウト→トップページに遷移　という流れにしたい。 htmlは ---


おわり


--- cssは --- body{
width:600px;
background-color:#000;
}

.box {
position: relative;
}

div.title{
float:left;
position: relative;
width: 600px;
height:450px;
margin:0 auto;
animation-name: 'anime';
animation-duration: 8s;
animation-timing-function: ease;
animation-delay:0;
animation-iteration-count: 1;
animation-direction:normal;
animation-fill-mode: forwards;
text-align:center;
}

.title img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:70%;
height:50%;
}

div.end{
float:right;
position: relative;
width: 150px;
height:50px;
margin:0 auto;
animation-name: 'anime';
animation-duration: 8s;
animation-timing-function: ease;
animation-delay:0;
animation-iteration-count: 1;
animation-direction:normal;
animation-fill-mode: forwards;
text-align:center;
}

.end {
position: absolute;
top: -100px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
width:70%;
height:50%;
color:#FFF; font-size:40px;
}

@keyframes 'anime' {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
--- javascriptは --- $(function(){
setTimeout(function() {
window.location.href = 'index.html';
},10000);
});
--- これで思い通りの動作になった。
<<{screen6.png}
　[[▲ページ上部へ|#]] <<7/20>> 半カニの画像ができたようなので、それを使ってステージ2の前のストーリーアニメーションを作る。 スクショをとってGIFアニメを作り、ページ遷移を用いてアニメーションを完成させる。
このgifアニメが、一度ページを開いたあとに再度ページを開くと最後のコマのまま動かないという事態が発生した。
どうやらキャッシュが残ってしまうことが原因の模様。
[こちらのサイト|https://blanche-toile.com/web/jquery-gifanimation-load-web-caching]を参考に、画像の末尾の数字を変えて違う画像と認識させ、何度ページを開いても最初からgifが再生されるようにした。

このような動作になった。

<<{スクリーンショット_2018-07-20_17-19-54.png}
<<{スクリーンショット_2018-07-20_17-20-10.png}
<<{スクリーンショット_2018-07-20_17-20-31.png}
<<{スクリーンショット_2018-07-20_17-20-47.png}
エンドロールに効果音を追加した。 --- <<[[トップページへ戻る|18::gr07]]