画面に必要な要素を考える
まずは画面に、どのような要素が必要か考えます。
例えば以下のようになります。
- 自分の体力
- 相手の体力
- 状況表示
- 行動メニュー
HTMLを書く
以上を踏まえてHTMLを書きます。
文字コードは「utf-8」にしておきます。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><title>Ajax Game</title><style type="text/css"><!--* { font-family: sans-serif; }table { border-collapse: collapse; }td { padding: 5px; }table,td { border: 1px solid black; }.btn { width: 6em; }--></style></head><body><table><tr><td>自分 : ||||||||||||||||||||||||||||||||||||||||||||||||||</td></tr><tr><td>相手 : ||||||||||||||||||||||||||||||||||||||||</td></tr><tr><td><textarea id="txtText" cols="60" rows="8" readonly="readonly">あなたの攻撃。敵に17ポイントのダメージを与えた。</textarea></td></tr><tr><td><span id="pnlMenu"><input type="button" class="btn" value="攻撃" /><input type="button" class="btn" value="お昼寝" /></span></td></tr></table></body></html>
動作を確認する
実際の動作は以下の通りです。
新規ウィンドウで実行