ブログ
第９章 じゃんけん
前回の乱数を利用してじゃんけんゲームを作ってみましょう。
<html>
<head>
<meta charset="utf-8">
<script>
function janken(TE){
var x = Math.floor( Math.random() * 3 );
var gcp =["グー", "パー", "チョキ"];
document.getElementById("player").innerHTML = gcp[TE];
document.getElementById("enemy").innerHTML = gcp[x];
// 判定
var res = "あなたの勝ちです！";
if(x == TE){
res = "引き分けです";
}else if((x - TE == 1) || (TE - x == 2)){
res = "あなたの負けです";
}
document.getElementById("result").innerHTML = res;
}
</script>
</head>
<body>
<button type="button" onClick="janken(0)">グー</button>
<button type="button" onClick="janken(2)">チョキ</button>
<button type="button" onClick="janken(1)">パー</button>
<br />
<br />
<table>
<tr><td>あなた</td><td>：</td><td id="player"></td></tr>
<tr><td>パソコン</td><td>：</td><td id="enemy"></td></tr>
<tr><td>結果</td><td>：</td><td id="result"></td></tr>
<table>
</body>
</html>
実行例（別窓で開きます）
まあ、ふつうのじゃんけんなんですが。
しかし、虫キングや恐竜キング、その他ゲームというゲームはグーチョキパー関係で戦略を組み立てることが常です。
水は火に強い、火は木に強い、木は水に強いという具合に、いろいろ応用することが出来ます。
で、具体的なプログラムに入ります。
ここでは、グー = 0、パー = 1、チョキ = 2 としています。
数字に置き換えています。
なので、自分と敵が同じ大きさなら引き分け。
敵が自分より 1 大きいか、自分が敵より 2 多いときは自分の負けとなります。
それ以外は自分の勝ちとしています。
他にもいろんな書き方があると思いますが、今回はひとまずこんな感じです。
────────────────────
■ 配列
────────────────────
ところでこの部分なんですが、
var gcp =["グー", "パー", "チョキ"];
これは配列といい、変数の一種です。
[ ] で囲むことによって、複数の値を格納することが出来ます。
すると、gcp[0] はグー、gcp[1] はパー、gcp[2] はチョキ、になります。
変数の後ろに背番号 [数字] を付けることによって引き出すことが出来ます。
一番最初が、1 ではなく 0 からスタートする点が注意です。
────────────────────
■ イベントハンドラと関数（かんすう）
────────────────────
次にこの部分。
onClick="janken(0)"
これは、クリックしたら function janken(TE){} の中身を実行しよ、という命令です。
あらかじめ function 名前(){処理} と書いて置くと、このように呼び出されたときに実行されます。
プログラムが上から順番に処理するときも、いったん function(){} のところは無視されます。
function(){} は言わば、自分で作った新しい命令みたいなものです。
プログラムやボタン（クリック）をトリガーとして呼び出されるまで実行されません。
この小さいプログラムの部品は、いろんなところから使い回されそうなときのために用意しておきます。
「関数」と呼ばれることが多いです。
大きさや使い方によっては「モジュール」「コンポーネント」「プラグイン」「サブルーチン」「クラス」「オブジェクト」「メソッド」「エンティティ」等々、いろんな名前で呼ばれます。
とにかく「使い回されるプログラムの部品」というくくりで、同じ仲間です。
────────────────────
■ 関数の引数
────────────────────
janken(0) の () の中と、
function janken(TE){ の () の中です。
janken(0) の 0 が関数 janken を実行させる際に、TEという変数に 0 を代入してから実行させます。
このような変数のことを「引数」（ひきすう）を呼びます。
────────────────────
■ DOM
────────────────────
最後に、この部分。
document.getElementById("player").innerHTML = gcp[TE];
これは、HTML の id="player" の場所を探して、その中に文字を書き込む命令です。
JavaScript はこのように、画面の構成要素（HTML）を書き換えることができます。
って、ちょっと文章が多くなってきましたね。
入門未満にしては少し出過ぎた真似になってきました。
これから先は専門のサイトや本で勉強してください。
このサイトでは、あくまでコピペしてみて動かせた、ヤッター！ぐらいの作業で十分です。