【JavaScript 1-5】 ジャンケンゲームを作る

プログラム

js/app/js

// ジャンケンの手の番号を設定
var GU = 1;
var CHOKI = 2;
var PA = 3;

// ジャンケンの入力ダイアログボックスを表示
var hum = prompt('半角数字で１～３の数字を入力してください。\n\n' + GU + ':グー\n' + CHOKI + ':チョキ\n' + PA + ':パー');
hum = parseInt(hum, 10);

// 入力値をチェック
if (hum !== GU && hum !== CHOKI && hum !== PA) {
alert('入力値をうまく認識できませんでした。ブラウザを再読み込みすると、もう一度挑戦できます。');
}   else {
// コンピュータの手を決める
var com = Math.floor(Math.random() * 3) + 1;
// コンピュータの手の名前
var comHandName = '';
switch (com) {
case GU:
comHandName = 'グー';
break;
case CHOKI:
comHandName = 'チョキ';
break;
case PA:
comHandName = 'パー';
break;
}
}

// 結果の判定
var msgResult = '';
if (hum === com) {
msgResult = '結果はあいこでした。';
}   else if ((com === GU && hum === PA) || (com === CHOKI && hum === GU) || (com === PA && hum === CHOKI)) {
msgResult = '勝ちました。';
}   else {
msgResult = '負けました。';
}

// 最終的な結果の表示
msgResult = msgResult + "コンピュータの出した手は" + comHandName + 'でした';
alert(msgResult);

ポイント

定数で固定データをわかりやすく

1～4行目

var GU = 1;
var CHOKI = 2;
var PA = 3;

数字のままではわかりにくいので、GU,CHOKI,PAという変数にそれぞれ代入する。
この値は不変の値になるため「定数」と呼び、定数であることがわかるように大文字にする習慣を付ける。

数値に変換

8行目
【JavaScript 2-1】 if文を使った条件分岐で使ったparseFloat関数の応用で、parseInt関数を使い、文字列を小数点以下を切り捨てて整数に変換する。

ランダムにジャンケンの手を決める

15行目

<div class="redbox">・Math.random()・・・0以上～1未満の数値をランダムで作る<br>
・Math.floor()・・・結果を整数にするために切り捨てを行う</div>

Math.random()
// 0以上1未満の数値をランダムで作る
Math.random()*3;
// 0以上3未満の数値をランダムで作る
Math.floor(Math.random()*3);
// 0,1,2の数値をランダムに作る
Math.floor(Math.random()*3)+1;
// 1,2,3の数値をランダムに作る

switch文を使って、コンピュータの手に対応するテキストを変数に記憶する

17~28行目

var comHandName = '';
switch (com) {
case GU:
comHandName = 'グー';
break;
case CHOKI:
comHandName = 'チョキ';
break;
case PA:
comHandName = 'パー';
break;
}

結果の判定

31~39行目

var msgResult = '';
if (hum === com) {
msgResult - '結果はあいこでした。';
}  else if ((com === GU && hum === PA) || (com === CHOKI && hum === GU) || (com === PA && hum === CHOKI)) {
msgResult = '勝ちました。';
} else {
msgResult = '負けました。';
}

msgResultという変数に判定結果を代入する。
先にあいこの判定をし、次に勝ちの場合の判定、それ以外の判定は負けの判定になる。

結果を表示する

41~43行目

msgResult = msgResult + "コンピュータの出した手は" + comHandName + 'でした';
alert(msgResult);

参考にした書籍がこちら