モック用に作って頂いた画像を配置する作業とコメントを吹き出しで出すというプログラムを作る作業をしました。
画像の配置はアバターの入れ替え、ライフのバー画像配置、footerのメニューアイコンの画像貼り付けなどです。
アバターの入れ替えは画像を違う物にするだけで、位置の微調節をするだけでした。ライフバーの配置はライフ用のdivを作り、borderを作って
、その幅や高さ、backgroundの色を変えてライフバーっぽく見せました。
footerのメニューアイコンでは、５つの画像が用意されていたため、＜ul＞＜li＞を使い、ブロックにしてそれぞれ配置しました。
画像を貼り付けてみると見た目だけですが、だんだんゲームらしくなってきたのが分かります。
コメントの吹き出しとは、よくオンラインゲームなどのチャットで、コメントをするとキャラクターの上に吹き出しみたいなのが出てくる
ものがあるのですが、今回の釣りゲームではコミュニケーションを重視するゲームみたいなので、その要素を取り入れるみたいです。
inputのtextで文字を入力し、その文字を吹き出しのように出すんだろうなぁ？と思いつつ、inputで吹き出しの出し方を調べてみることに。
あるサイトに参考になる物がありました。inputタグで文字を入力すると、その文字が吹き出しになって
でてくるという物です。下記のinputタグの中に文字を入れて、送信を押してみてください。
吹き出しが出てきたかと思います。消すときはダブルクリックで消えるようにしてあります。
という感じで吹き出しがでます。時間も時間だったので、ソースは明日解析することにします。
12月11日 宮本 勇