[Labyrinthe Noir]>[Top]>[Computer
Forum]>[実用JavaScript集]>[こども工作教室]>
じゃんけんのソースと解説
<html>
<head>
<title>じゃんけん</title>
</head>
<body>
<h3>じゃんけん</h3>
<hr>
</body>
</html>
|
【保存ファイルの準備】
じゃんけん用に「janken.html」を作成して、保存します。 |
<html>
<head>
<title>じゃんけん</title>
</head>
<body>
<h3>じゃんけん</h3>
<hr>
<table border="0" align="center">
<tr>
<th><div id="ahand"></div></th>
<th>VS</th>
<th><div id="bhand"></div></th>
</tr>
<tr>
<th>相手</th>
<td> </td>
<th>自分</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
<tr>
<th colspan="3"></th>
</tr>
</table>
</body>
</html>
|
【表示場所の作成】
まずは表示用のテーブルを作成します。
テーブルは全体の枠を表示しないように「border="0"」にして、画面の中央に置くために「align="center"」と指示します。
表示用テーブルは、次のように4段で作っておきます。
マス（列）は<td>を使わず、全て<th>にしています。
1段目は手の画像を表示する部分になります。
横に3マスあり、<div>タグを使って相手の手を表示する「ahand」、「VS」の文字、<div>タグで自分の手を表示する「bhand」となっています。
2段目は説明用の言葉を入れます。「相手」、空欄、「自分」となっています。
空欄には「 」という文字が入っています。これは半角のスペースを意味しています。なくても実害はありませんが、ソースを見たときにこれがあることで空白があるということが判りやすくなります。
今回はテーブル枠が消えているので判りませんが、枠の中が本当の空欄だと枠線が消える現象が起こります。ただ、ブラウザによって表現が違いますので、自分は見えていても、他の人は見えないということが起こりますので、それを統一する意味でも、「 」をしておくと間違いはありません。 |
3段目は全て空欄です。これは下のテーブルとの距離を開けるためで、デザイン的な調節の役割を果たしています。
3つにマスを分ける必要がないので、「colspan」を使って１つにまとめています。
4段目には操作ボタンなどが入る予定なので、空欄にしてあります。
|
【テーブル】
テーブルは、全体を表す<table>タグ、行を表す<tr>タグ、マス（列）を表す<td>または<th>の３つが揃わないと正しく表示できません。
<table></table>・・・テーブル全体を表すタグ。オプションには、border、cellspacing、cellpadding、bgcolor、bordercolor、width、height、alignがあります。
<tr></tr>・・・テーブルの行を表すタグ。<table>タグの中に書きます。オプションには、bgcolor、bordercolor、width、height、align、valign、nowrapがあります。
<td></td>・・・テーブルの１マスを表すタグ。<tr>タグの中に書きます。オプションには、colspan、rowspan、bgcolor、bordercolor、width、height、align、valign、nowrapがあります。
<th></th>・・・テーブルの１マスで、ヘッダを表すタグ。<tr>タグの中に書きます。この中では、文字は太字になり、中央寄せが行われます。オプションには、colspan、rowspan、bgcolor、bordercolor、width、height、align、valignがあります。
<caption></caption>・・・テーブルのタイトルを付けられます。<table>タグの中に書きます。オプションには、align、valignがあります。
オプションには共通のものもあります。各タグで同じオプションを使った場合、優先順位は<td>と<th>、<tr>、<table>の順です。しかし、幅や高さを％で示した場合は、逆順に外側から適用されます。また、画面の大きさや画像・文字の大きさと量に応じて、幅や高さが広がることがあります。
【主なオプションの意味と書き方】
基本的な書式は、<tag option="xxx">という形です。optionにオプション名が入ります。値は「=」の後に「""」で囲んで書きます。値がない場合もあります。
border・・・テーブル枠の幅です。数値で指定します。デフォルト（標準値）は「0」または「2」で、ブラウザによって異なります。
bgcolor・・・枠線の色です。色番号で指定します。例：赤なら#FF0000、緑なら#00FF00、青なら#0000FF。
width・・・テーブルまたは列の幅です。値はドット数または％で指定します。％とは、テーブルの場合、ウインドウに対する割合で、列の場合、テーブルに対する割合となります。例：半分に幅にしたいときは、width="50%"。
height・・・テーブルまたは行の幅です。値はドット数または％で指定します。％の対応はwidthと同様です。
align・・・テーブルまたは内容の水平位置です。「center」なら中央、「left」なら左、「right」なら右に寄せられます。テーブルの場合、「left」「right」を指定すると、続く文字などに回り込みが発生します。回り込みというのは、文章のある１つまたは複数の行に画像やテーブルが挿入された状態になり、文章が画像やテーブルを避けて回り込むようにレイアウトされます。
valign・・・内容の垂直位置です。「middle」なら中央、「top」なら上、「bottom」なら下に寄せられます。
colspan・・・<td><th>内で使用し、複数の枠を横に繋ぎます。繋ぎたい枠の個数を値に指定します。例：colspan="3"の場合、３つの枠が１つになります。他の行と比べると３つ分の幅に１つの枠があることになります。1枠にした分、同じ行内に2枠分のタグがなくなることに注意が必要です。
rowspan・・・<td><th>内で使用し、複数の枠を縦に繋ぎます。繋ぎたい枠の個数を値に指定します。例：rowspan="3"の場合、下の2行にまたがった１つの枠ができます。その分、下の2行から１つ枠ずつのタグがなくなります。
【使用例】
<table width="100" border="2" align="center" cellpadding="5" cellspacing="2" bgcolor="#FFFF99">
<tr><th colspan="2">A</th><th bgcolor="#FFCCFF">1</th></tr>
<tr bgcolor="#CCFFFF"><td align="right">2</td><td rowspan="2" valign="bottom">B</td><td height="50" bgcolor="#FFCCFF">3</td></tr>
<tr><td>4</td><td bgcolor="#FFCCFF">5</td></tr>
</table>
上をコピーして、どんなテーブルができるか試してみてください。青の部分が値なので、色々と書き換えて試してみるとオプションの意味が判りやすくなります。
<html>
<head>
<title>じゃんけん</title>
</head>
<body>
<h3>じゃんけん</h3>
<hr>
<table border="0" align="center">
<tr>
<th><div id="ahand"></div></th>
<th>VS</th>
<th><div id="bhand"></div></th>
</tr>
<tr>
<th>相手</th>
<td> </td>
<th>自分</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
<tr>
<th colspan="3"><form name="janken">
<table border="0" align="center">
<tr>
<td colspan="3">なにをだそうかな？</td>
</tr>
<tr>
<th><input type="button" value="グー"></th>
<th><input type="button" value="チョキ"></th>
<th><input type="button" value="パー"></th>
</tr>
</table>
</form></th>
</tr>
</table>
</body>
</html>
|
【操作用ボタンの作成】
操作用ボタンをテーブルを使ってレイアウトします。
<form>タグには「janken」という名前を付けておきましょう。
テーブルにはメッセージ用と、ボタンを並べる部分と、２つの行があります。
テーブルは単に表を作るというだけでなく、透明にすることで物の配置を決めるレイアウト作りに活用できます。
マスの大きさや、余白の分量、上下左右の位置指定などを使い、細やかにレイアウトを指定することができます。 |
|
<html>
<head>
<title>じゃんけん</title>
</head>
<body>
<h3>じゃんけん</h3>
<hr>
<table border="0" align="center">
<tr>
<th><div id="ahand"></div></th>
<th>VS</th>
<th><div id="bhand"></div></th>
</tr>
<tr>
<th>相手</th>
<td> </td>
<th>自分</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
<tr>
<th colspan="3"><form name="janken">
<table border="0" align="center">
<tr>
<td colspan="3">なにをだそうかな？</td>
</tr>
<tr>
<th><input type="button" onClick="getbhand(0)" value="グー"></th>
<th><input type="button" onClick="getbhand(1)" value="チョキ"></th>
<th><input type="button" onClick="getbhand(2)" value="パー"></th>
</tr>
</table>
</form></th>
</tr>
</table>
</body>
</html>
|
【イベント処理の準備】
ボタンを押したらじゃんけんをしますので、ボタンからユーザー関数を呼び出せるようにしておきます。
ユーザー関数「getbhand()」に対して、どの手を出したか判るように、３つのボタンそれぞれに異なる数値を送り出すようにしておきます。
じゃんけんの手を数値で判定するために、「グー」は「0」、「チョキ」は「1」、「パー」は「2」と統一することも決めておきます。こうしておけば、勝った負けたを調べるときにも、数値で比較することができます。 |
（省略）
<script language="JavaScript">
hand = new Array("グー","チョキ","パー");
function getbhand(btn) {
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = hand[r];
document.getElementById("bhand").innerHTML = hand[btn];
}
</script>
（省略）
|
【じゃんけんの実行プログラム】
スクリプトでは、ボタンを押したら自分の手を表示するだけでなく、相手の手も表示することになります。
まずは初期設定として、配列変数handを使って3つの手を用意しておきす。これは表示用なので、後で画像に置き換えます。
次に、ボタンが押されたときの処理となるgetbhand()を作りましょう。
「//」の部分はコメントアウトという注釈部分です。注意書きや覚え書きで、あとで見直すときのために書いておきます。
スクリプトは3行です。
1行目は乱数を発生させて０〜２の３つの数字を取り出して、変数ｒに入れています。
2行目は、そのまま変数rを配列変数handのr番目の文字列を取ってきて、ahandに表示している。これが相手の出した手となります。
3行目は、押したボタンから引き継いだ変数btnを要素にして、配列変数のbtn番目の文字列を取り出して、bhandに表示しています。これは自分の手ですね。
これでじゃんけんゲームの原型ができました。
【この時点の janken.html を別枠で表示】
|
【画像を用意する】
手の画像を３つ用意します。検索をしてみると、上のフリー素材が見つかりました。こちらから取ってきます。
保存は画像の上で、右クリックしてショートカットメニューを出し、「名前を付けて画像を保存」を選びます。
デジカメで自分の手を撮影して使っても面白いと思います。もちろん、絵や顔や足で表現しても良いですよ。
（省略）
<script language="JavaScript">
hand = new Array("gu.png","ch.png","pa.png");
function getbhand(btn) {
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = "<img src='" + hand[r] + "'>";
document.getElementById( "bhand").innerHTML = "<img src='" + hand[btn] + "'>";
}
</script>
（省略）
|
【改良点：手の画像を表示する】
出した手の表示部分を文字から画像に変更しましょう。
配列変数handの設定にファイル名を入れます。
表示の箇所でファイル名をタグの中に入れて出力させます。
配列変数を使わずに表記することも出来ます。
ファイル名をグーは「hand0.png」、チョキは「hand1.png」、パーは「hand2.png」と番号がついた共通の名前にしておきます。
document.getElementById("ahand").innerHTML ="<img src='hand" + btn + ".png'>";
そうすると上のように番号を使ってファイル名を作って表示させることができるのです。
ただし、画像を入れ換えたいときには、ファイル名をプログラムに合わせるか、プログラムをファイル名に合わせて変更する必要があります。
|
|
（省略）
<table border="0" align="center">
<tr>
<th width="200" height="200"><div id="ahand"></div></th>
<th>VS</th>
<th width="200" height="200"><div id="bhand"></div></th>
</tr>
<tr>
<th>相手</th>
<td> </td>
<th>自分</th>
</tr>
<tr>
<th colspan="3"> </th>
</tr>
（省略） |
【問題点：画像の枠を調節】
3つの手の画像の大きさが違うため、画像が切り替わる度にテーブルが画像のサイズに応じて動いてしまいます。
この見難い現象を止めるために、画像を表示する枠の大きさを画像より大きめに指定します。
【この時点の janken.html を別枠で表示】 |
（省略）
<table border="0" align="center">
<tr>
<td colspan="3">なにをだそうかな？</td>
</tr>
<tr>
<th><input type="button" onClick="getbhand(0)" value="グー"></th>
<th><input type="button" onClick="getbhand(1)" value="チョキ"></th>
<th><input type="button" onClick="getbhand(2)" value="パー"></th>
</tr>
<tr>
<th colspan="3"><input type="button" onClick="handreset()" value="リセット"></th>
</tr>
</table>
（省略）
|
【改良点：動きを付ける(1)】
スロットのように3つの手を順番に表示して、何が出るのか？という期待感を表したいと思います。
表示を動かすため、止める操作と、再び動かす操作も考えます。
自分が手を出したときに止まって相手の手が出ます。
次に再び動かすためには１つアクションが必要です。新しいボタンを１つ増やしましょう。
フォームに新しくリセットボタンを追加しました。
リセットボタンからユーザー関数「handreset()」を呼び出すことにします。 |
（省略）
<script language="JavaScript">
hand = new Array("gu.png","ch.png","pa.png");
timer = 0;
count = 0;
getahand();
function getbhand(btn) {
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = "<img src='" + hand[r] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[btn] + "'>";
}
function getahand() {
//手を順番に表示
document.getElementById("ahand").innerHTML = "<img src='" + hand[count] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[count] + "'>";
count++;
if (count > 2) count = 0;
timer = setTimeout("getahand()",500);
}
</script>
（省略） |
【改良点：動きを付ける(2)】
手の絵がスロットのように入れ替わり表示される部分を作ります。
まず、２つの変数を用意します。
１つは、タイマーの制御用の変数timerです。タイマーを起動したときにそのID番号を記録しておけば、タイマーを止めることができます。
変数countはどの手が出ているのか記録するものです。順番に手が切り替わるようにするために使います。
for文を使って繰り返し処理をするときは、その中で変数を指定します。
しかし、今回はタイマーを使いますので、１つのユーザー関数の中で処理が終わらず、次へと継続して同じ関数を使う必要があります。
そのために、スクリプト全体でどこでも使える変数を用意しておくのです。 |
ユーザー関数「getahand()」を繰り返し呼び出すことで、絵が順次切り替わります。
getahand()では、相手と自分と同じ手を表示しています。
最初は「count = 0」なので「グー」が表示されます。
表示した後で変数countに「1」を足しています。これで「count = 1」になって、次に「チョキ」を出す準備ができました。
しかし、繰り返したその後のことも考えなくてはいけません。次に「count = 2」になって「パー」が出るところまではいいのですが、その次は「count = 3」になってしまいます。これでは、hand[3]がないためエラーが発生します。
そこで、if文を使って変数countが2を超えたとき（3になったとき）、「count = 0」に戻しているのです。
そして、最後のところが繰り返しのためのタイマーです。0．5秒（500/1000秒）後にgetahand()を呼び出しています。
これで3つの手が回転するように次々と現れます。 |
（省略）
<script language="JavaScript">
hand = new Array("gu.png","ch.png","pa.png");
timer = 0;
count = 0;
getahand();
function getbhand(btn) {
//タイマーを止める
clearTimeout(timer);
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = "<img src='" + hand[r] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[btn] + "'>";
}
function handreset() {
//初期状態に戻す
getahand();
}
function getahand() {
//手を順番に表示
document.getElementById("ahand").innerHTML = "<img src='" + hand[count] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[count] + "'>";
count++;
if (count > 2) count = 0;
timer = setTimeout("getahand()",500);
}
</script>
（省略） |
【改良点：動きを付ける(3)】
次に、手の回転を止める必要があります。
getbhand()でお互いの手を出す直前に「clearTimeout()」を使ってタイマーを止めます。
setTimeoutを使った時点で変数timerに制御用のID番号が入っている。 |
止まった手を動かすのは、リセットボタンが押された後です。
リセットボタンから呼び出されるユーザー関数「handreset()」を作ります。
handreset()の中からgetahand()を呼び出して、手の回転がまたスタートします。
リセットボタンから直接getahand()を呼び出しても良いように見えますが、もう１つhandreset()でやりたいことがあるので、繰り返しの部分だけ分けてあるのです。 |
【この時点の janken.html を別枠で表示】 |
（省略）
function getbhand(btn) {
//タイマーを止める
clearTimeout(timer);
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = "<img src='" + hand[r] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[btn] + "'>";
//ボタンを使えなくする
document.janken.elements[0].disabled = true;
document.janken.elements[1].disabled = true;
document.janken.elements[2].disabled = true;
}
function handreset() {
//初期状態に戻す
document.janken.elements[0].disabled = false;
document.janken.elements[1].disabled = false;
document.janken.elements[2].disabled = false;
getahand();
}
（省略）
|
【改良点：ボタンを消す】
現在は連続でじゃんけんできる状態です。
これでは、手が回転する意味がなくなってしまいます。
そこで、リセットボタンを使ってもらうために、じゃんけんをするとボタンを使えなくしてしまいます。
リセットボタンを押すとまたボタンが使えるようにします。
getbhand()にボタンを使えなくするプログラムを追加します。
handreset()には、ボタンを使える状態に戻すプログラムを書きます。 |
（省略）
<table border="0" align="center">
<tr>
<td colspan="3"><div id="message"></div></td>
</tr>
<tr>
<th><input type="button" onClick="getbhand(0)" value="グー"></th>
<th><input type="button" onClick="getbhand(1)" value="チョキ"></th>
<th><input type="button" onClick="getbhand(2)" value="パー"></th>
</tr>
<tr>
<th colspan="3"><input type="button" onClick="handreset()" value="リセット"></th>
</tr>
</table>
（省略） |
【改良点：メッセージを切り換える(1)】
じゃんけんの結果を判りやすくするためにメッセージを表示しましょう。
まずはテーブルの「なにをだそうかな？」と書かれた部分を<div>タグで置き換え、メッセージを表示できるようにしておきます。 |
（省略）
<script language="JavaScript">
hand = new Array("gu.png","ch.png","pa.png");
msg = new Array("なにをだそうかな？","かった〜！！","まけちゃったよ","あいこだよ");
timer = 0;
count = 0;
handreset();
function getbhand(btn) {
//タイマーを止める
clearTimeout(timer);
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = "<img src='" + hand[r] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[btn] + "'>";
//ボタンを使えなくする
document.janken.elements[0].disabled = true;
document.janken.elements[1].disabled = true;
document.janken.elements[2].disabled = true;
}
function handreset() {
//初期状態に戻す
document.janken.elements[0].disabled = false;
document.janken.elements[1].disabled = false;
document.janken.elements[2].disabled = false;
document.getElementById("message").innerHTML = msg[0];
getahand();
}
（省略） |
【改良点：メッセージを切り換える(2)】
初期設定に配列変数msgを追加して、そこに４つのメッセージを準備しておきます。
文章は自由に考えても良いのですが、順番は変えないようにして、似た意味の言葉を使いましょう。
順番に、最初の言葉、勝ったときの言葉、負けたときの言葉、あいこのときの言葉、とします。
初期設定後の流れを少し変えます。
getahand()を呼び出して、手を回転させていましたが、これをhandreset()に変更します。
そして、handreset()の中で、最初の言葉を表示させます。
これにより、初期設定後と、リセット後に同じ言葉が表示されることになります。
「message」という場所に、配列変数msgの0番目の文字列を出力しています。
|
（省略）
function getbhand(btn) {
//タイマーを止める
clearTimeout(timer);
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = "<img src='" + hand[r] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[btn] + "'>";
//ボタンを使えなくする
document.janken.elements[0].disabled = true;
document.janken.elements[1].disabled = true;
document.janken.elements[2].disabled = true;
//グー
if (btn == 0 && r == 1) num = 1;
if (btn == 0 && r == 2) num = 2;
//チョキ
if (btn == 1 && r == 0) num = 2;
if (btn == 1 && r == 2) num = 1;
//パー
if (btn == 2 && r == 0) num = 1;
if (btn == 2 && r == 1) num = 2;
//あいこ
if (btn == r) num = 3;
document.getElementById("message").innerHTML = msg[num];
}
（省略） |
【改良点：メッセージを切り換える(2)】
次にgetbhand()で、勝ったとき、負けたとき、あいこの時の３つのパターンでメッセージ表示しましょう。
勝った場合は「1」、負けた場合は「2」、あいこの場合は「3」を変数numに入れることにします。
勝負の結果は３つですが、そうなるための組み合わせは９つあります。
if文を使って、１つずつ自分の手と相手の手を比べます。
改めて確認すると、「グー」は「0」、「チョキ」は「1」、「パー」は「2」でした。
変数btnには自分の手、変数ｒには相手の手が入っています。
自分の手がグーの場合で、勝ったとき（num = 1）と負けたとき（num = 2）の２パターンになるように、それぞれif文で判断させています。
これに続いてチョキの場合の２パターンとグーの場合の２パターンがあります。
じゃんけんのような三つどもえの場合、数値の大小だけで勝ち負けを判断することができません。
そのため、１つ１つの組み合わせをif文で書くことになります。 |
最後に「あいこ」の場合をまとめてあります。あいこには３つの組み合わせあります。しかし、どの組み合わせであっても、相手と自分が同じ手なので、「btn == r」という１つの条件式で判断しているのです。
「あいこ」については、実はif文を使わなくても判断できます。
左のソースを見ても判るとおり、勝ち負けの６つのパターンのどれかに当てはまるときはあいこになりません。
逆に言うと、勝ち負け以外の場合は必ずあいこということになります。
そこで、まずあいこかもしれない、ということで最初に「num = 3」にしてしまいます。初期設定と同じことです。
//あいこ
num = 3;
//グー
if (btn == 0 && r == 1) num = 1;
if (btn == 0 && r == 2) num = 2;
//チョキ
if (btn == 1 && r == 0) num = 2;
if (btn == 1 && r == 2) num = 1;
//パー
if (btn == 2 && r == 0) num = 1;
if (btn == 2 && r == 1) num = 2;
if文で勝ち負けが決まらなければ、変数numは「3」のままなので、あいこで良かったということになります。
ソースのように、最後にあいこの判定を持ってくるときは、if文がないと、勝ち負けを判断したのに、変数numが入れ替わってしまいます。 |
勝負の結果が分かれば、最後にメッセージを表示します。
ここでは変数numに勝負の結果が入っているので、これを配列変数msgの要素にしています。
【この時点の janken.html を別枠で表示】 |
（省略）
function getbhand(btn) {
//タイマーを止める
clearTimeout(timer);
//手を出す
r = Math.floor(Math.random() * 3);
document.getElementById("ahand").innerHTML = "<img src='" + hand[r] + "'>";
document.getElementById("bhand").innerHTML = "<img src='" + hand[btn] + "'>";
//ボタンを使えなくする
document.janken.elements[0].disabled = true;
document.janken.elements[1].disabled = true;
document.janken.elements[2].disabled = true;
//リセットボタンを元に戻す
document.janken.elements[3].disabled = false;
//グー
if (btn == 0 && r == 1) num = 1;
if (btn == 0 && r == 2) num = 2;
//チョキ
if (btn == 1 && r == 0) num = 2;
if (btn == 1 && r == 2) num = 1;
//パー
if (btn == 2 && r == 0) num = 1;
if (btn == 2 && r == 1) num = 2;
//あいこ
if (btn == r) num = 3;
document.getElementById("message").innerHTML = msg[num];
}
function handreset() {
//初期状態に戻す
document.janken.elements[0].disabled = false;
document.janken.elements[1].disabled = false;
document.janken.elements[2].disabled = false;
//リセットボタンを使えなくする
document.janken.elements[3].disabled = true;
document.getElementById("message").innerHTML = msg[0];
getahand();
}
（省略） |
【問題点：リセットボタンを消す】
さて、普通に使っていると気づかない問題点があります。
実は、リセットボタンを何度も続けて押すと、新しいタイマーがいくつも起動してしまい、いつまで経っても手の回転が止まらなくなってしまうのです。
そこで今度は、回転が止まったときだけリセットボタンを使えるようにします。
初期状態はリセットボタンが使えないようになります。 |
（省略）
<table border="0" align="center" cellpadding="5" cellspacing="5">
<tr bgcolor="#000000">
<td colspan="3" align="center"><font color="#FFFFFF"><div id="message"></div></font></td>
</tr>
<tr>
<th><input type="button" onClick="getbhand(0)" value="グー"></th>
<th><input type="button" onClick="getbhand(1)" value="チョキ"></th>
<th><input type="button" onClick="getbhand(2)" value="パー"></th>
</tr>
<tr>
<th colspan="3"><input type="button" onClick="handreset()" value="リセット"></th>
</tr>
</table>
（省略）
|
【改良点：デザインの修正】
メッセージ部分を見やすいようにデザインを変更してみましょう。
まず、背景を黒くして、文字を白くします。
<tr>に「bgcolor」オプションを使い背景色を付けます。これは<td>に書いても同じです。
次の<td>内に「align」オプションで、メッセージがマスの中央に寄るようにしています。
<td>を<th>に変更しても、文字は中央に寄せられますが、同時に太文字になってしまいます。 |
<div>タグを囲うように<font>タグを使って文字に色が着くようにします。
このままだと、メッセージやボタンが余裕なくひっついています。
デザインのバランスを考えると、それぞれの部分を離して余裕をもたせる方が落ち着いて見えます。
<table>タグに「cellpadding」と「cellspacing」の２つのオプションを付けてマス内の余白とマス同士の隙間を作ります。
「cellpadding」と「cellspacing」の違いはテーブル枠を表示して数値を変更してみると判ります。
borderやこれらのオプションにはデフォルト（標準）の数値があって、ブラウザによって若干の違いがあります。そのような違いをなくすためには、使わないとしても何か数値をしていしておけば、どのブラウザで見ても同じ幅に揃えることができます。
|
【この時点の janken.html を別枠で表示】 |
【完成】
とりあえず、これで完成です。
この後も改良をするとすれば、履歴を残したり、勝敗を「○勝○敗」と表示したり、名前を入力できるようにしたり、手の画像を自分で描くか、自分の手を写真に撮って使うことなど考えられます。
なにかやってみてください。
戻る
