!目次
*[[6/1|#p1]]
*[[6/8|#p2]]
*[[6/15|#p3]]
*[[6/22|#p4]]
*[[6/29|#p5]]
*[[7/6|#p6]]
*[[トップページへ戻る|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画面は完成。
タイトル画面とゲームオーバー画面にそれぞれBGMをつけた。
---
<<[[トップページへ戻る|18::gr07]]
