2018 ソフトウェア設計及び演習用の班Wiki
18::gr07::近江愛結
6/1
6/8
6/15
日本語入力ができなくて困った。(6/22mozc設定修正済み)
6/8時点の2文が同時に表示されてしまう件を改善するよう試みたがうまくいかなかった。
カーソルが点滅するようなエフェクトをとりやめ、文字だけがカタカタと入力されていくように変更。
(before)
<script src="jquery-3.3.1.min.js"></script>
<script src="t.min.js"></script>
<script>
$(function(){ $(".sent1").t({ speed : 100 }); });
$(function(){ $(".sent2").t({ speed : 100 }); });
</script>
↓
(after)
<script src="jquery-3.3.1.min.js"></script>
<script src="t.min.js"></script>
<script>
$(function(){ $(".sent1").t({ speed : 100, caret : false }); });
$(function(){ $(".sent2").t({ speed : 100, caret : false, delay : 3 }); });
</script>
caretオプションでカーソルの表示設定をoffにし、2文目をやや遅らせて表示させるように変更。
これにより、自然なオープニングアニメーションになった。
(スクショだと違いがわからない・・・)
ページ遷移の設定も行った。 タイトル画面のボタンをクリックするとゲームが始まる(オープニングアニメーションに遷移する)ようにした。
<body>
<div class="sea">
<img src ="title.jpg" />
<input type="submit" value="ゲームを始める" onclick="javascript:location.href = 'title.html';">
</div>
<div class="button2">
<input type="submit" value="ゲームを終了する" onClick="if (/Chrome/i.test(navigator.userAgent)) { window.close(); } else { window.open('about:blank', '_self').close();}">
</div>
<div class="button3">
<input type="submit" value="カーニハンwiki" onClick="window.open('https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%BB%E3%82%AB%E3%83%BC%E3%83%8B%E3%83%8F%E3%83%B3')">
</div>
終了ボタンの実装に苦労した。
検索して出てくる"window.close();"だけを入力しても全くウィンドウが閉じる気配がなく、対処法を検索して出てきたこのタグで対応。
一応ゲームは終了するが、空白タブに入れ替わるだけである。ここも改善の余地あり。
文字タイプに合わせてキーボード音がなるようにした。
しかし、文字の長さより効果音の再生時間のほうが長く違和感。
波形編集ソフト等で効果音のトリミングを行おうと試みるもAudacityのlinuxバージョンのインストール方法がわからず・・・。
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文目が表示されるようになった。
このアニメーションが終了したらステージ1のプレイ画面に切り替わる。（後々実装予定）
6/29
ゲームオーバー画面の制作にとりかかる。
このような画面を作りたい。
使用したカニの画像は私が大晦日に食べたものであるので著作権は問題なし。
フォントや色は仮のものである。とりあえずこのように文字や画像を配置したい。
そして全体をフェードイン表示させたい。
全体をフェードインさせる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}
}
「かにのうわさ」を考える。
カニの豆知識からいくつか引用。
とりあえず10個考える。
ランダムで文が出るようにする。
body内に以下の文を追加。
<div class="message">
<script type="text/javascript">
var msg = new Array(10);
msg[0] = 'ここに豆知識を書く';
( ( 略 ) )
msg[9] = 'ここに豆知識を書く';
var num = Math.floor(Math.random() * msg.length);
document.write(msg[num]);
</script></p>
</div>
これでランダム表示ができた。
文字や画像をセンタリングし、ほぼ理想どおりの画面ができた。あとはここにボタンをつける。
7/6
ゲームオーバー画面にボタン設置、そしてフォントの変更を行う。
タイトル画面のときと同様にボタンを設置。(「タイトルに戻る」「やりなおす」の2つ)
“GAME OVER”のフォントを変更する。
こちらのサイトより、Caveatというフォントを使用する。
HTMLに
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
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;
}
「かにのうわさ」の部分を少しいじってみたくなったのでいろいろ変えてみる。
最初はフォントを変更しようと試みたが、ピンとくる日本語フォントがなかったため断念。
最終的に、枠で囲ってみることにした。
こちらのサイトを参考にした。
26番目のタイトル付きボックスをベースに、枠線を点線に変更したものを使用。
HTMLは
<div class="box26">
<span class="box-title">
カニのうわさ
<p>
<script type="text/javascript">
var msg =new Array(10);
msg[0] = 'ここに豆知識を書く';
( ( 略 ) )
msg[9] = 'ここに豆知識を書く';
var num = Math.floor(Math.random() * msg.length);
document.write(msg[num]);
</script></p>
</div>
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;
}
となった。
これでとりあえずステージ1のGAMEOVER画面は完成。
これをコピーしてステージ2、3用のGAMEOVER画面も作成した。
タイトル画面とゲームオーバー画面にそれぞれフリー素材のBGMをつけた。
ずっと悩まされてきた「ウィンドウサイズを変えるとボタンの位置も変わってしまう問題」を解決する。
今まで作った「タイトル画面」「ストーリー画面」「ゲームオーバー画面」のCSSに追加。
body {
width: 600px;
height: 450px;
}
これで背景が固定されたのでウィンドウサイズを変えてもボタンや画像の位置がずれることがない。
別のストーリー画面を作らなきゃいけないのだが、飽きてきたのでエンドロールから作ってみることにした。
こちらのサイトを参考に、映画っぽい感じにしてみる。
HTML、CSSはとても長くなるので割愛。
背景を少し工夫してみる。
こちらのサイトを参考に、グラデーションがかかった背景に画像が透けて見えるような背景を作ってみる。
とりあえず実行できるかを確認するために、色はサイトの例のまま、画像は素材集のカニのイラストを使う。
背景部分の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;
}
いい感じのエンドロールができた。次はこれを修正していこうと思う。
7/13
エンドロールの修正から始める。
背景を海っぽい色合いにして、スクロールが終わったらエンドページ(これから作る)に遷移するようにする。
なんとなくゲームのロゴ的なものが欲しかったので作ってみた。
これをエンドロールの最初に流す。
最後は「and you!」で締める。
スクロールし切るまでに何秒かかるか計測し、ページ遷移のコードを足す。
$(function(){
setTimeout(function(){
window.location.href = 'end.html';
},52000);
});
次に、エンド画面を作成する。
さっきのロゴと「おわり」という文字をフェードイン→フェードアウト→トップページに遷移 という流れにしたい。
htmlは
<div class="box">
<div class="title"><img src="kanirogo2.png"></div>
<div class="end">おわり</div>
</div>
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);
});
これで思い通りの動作になった。
最終更新日：2018/08/02 15:33:40
