3連休なので初投稿です。すともです。
思ったよりもやることなかった、というかこっちのモチベと他のモチベが削りあって何もしてない。
ぽけいもん来月やるなら今月はこっちかの気持ち。
今日の議題は文字の載せ方考えて～やる気次第。
実装はありません。
編集がしにくいんじゃい！
嘘、別ページでした。
目次
文字載せ
1. Canvas上に文字
前回の画像作成にはCanvasを使用した。
Canvasをレイアウトに見立てて気合で書く寸法ならこれ。
追加部分少なかったので直書き
ctx.font = "48px serif";
ctx.fillText(nameText.value,10,50);
をdrawメソッドに入れただけ。
水平線からsnpiの顔が浮かんでくる。
serifがフォントっぽいから調べて実際そうだった。
font-familyって言われたのにfamilyだけで別のものが思い浮かんでしまって重症。
2. CSSで画像上に文字を重ねる
Q. CSSって何ですか？
A. 分かりません。
htmlがタグでページの内容を作って、CSSで中身を装飾するみたいなのは聞いたことある。
よく分からない時は使って確かめて手札を増やすべし。
CSSってやつは別口で作るものらしい。
ctrlクリックでリンク先に行けて存在しないから作るって言われた。
VS Code君が優秀過ぎて機械に使われる男になってる。
pngの方もリンクだったからそれっぽい場所作って画像を入れておいた。
肝心のcssと出力
画像の上に書いて枠も設定できるっぽい。
一応headにぶち込めば一つのファイルでもできるけど分けた方が他で使えてお勧めらしい。
画像読み込むのブログで扱うのは厳しいのでは？
調べてないから分からんけど。
3. 文字枠を付ける
わざわざ画像とか使わなくても枠だけ区切ったらダメ？
というわけで探す。
種類あるし行けなくはなさそう。
画面小さくしたら追従してた。
paddingの影響。
canvasに上乗せ出来たらもうちょい強そう。
まぁ枠ごと書けば問題無いとも言える。
辞書を作る
130-102しか答えられない僕みたいなのはまずい。
dicsionary?とか辞書とかリストとかそんな感じの名前で出てこんか？
連想配列(Dictionary)らしい。おしい（英語力）
とりあえずコピー忍者をキメて確認。
クリックしたら山田が取れた。
複数でも検索した感じでは行けそうである。
毎回key（今回のだとfirstNameとか）を書かないといけないのが面倒。
どうせコピペなんだけども。
リストボックス
選択肢から選ぶ奴。
全ポケモン実装するにしても遥かミライ。
少ないうちは50音順で対応したい。
実物を見てみる。
流石に例題は選んだほうが良かったと思うわけ。
最終的にはこれから選んで連想配列から数値抜いて、努力値ぶっこんでcanvasで描いたらレベル1って感じな気がする。
0.5までは頑張ってみる。
実践
今回は
1. 名前をリストボックスに出す
2. 選択したら特性が出る
くらいを目標に作成する。
気づいたらやってない内容も含んでいるのはいつもの事なので気合で書く。
馬鹿なコード割愛
100行しかなくても貼ると長い
このぐらいで勘弁してやる（疲労困憊）（作成4時間）
