【JavaScript】じゃんけんプログラム

JavaScript

じゃんけんプログラム

ボタンをクリックすると、じゃんけんをするプログラムを作成してみます。
「judgment.js」にじゃんけんの勝敗を判定するJavaScriptを記述します。


＜対戦条件＞

  • 対戦相手はコンピューターです。
  • じゃんけんの出し手は、「グー」、「チョキ」、「パー」とします。
  • グー = 0、チョキ = 1、パー = 2の数字を割り当てます。


＜勝敗条件＞
勝敗の条件を考えてみます。

あいこです：
ユーザー = コンピューター
ex) 0 = 0、1 = 1、2 = 2
あなたの勝ちです：
ユーザー = コンピューター
ex) 0 = 1、1 = 2、2 = 0
あなたの負けです：
それ以外の場合

条件式を考える

勝利条件をどのように計算しているかを解説します。
ユーザーの出し手に対して、コンピューターが1つ上手（うわて）の数字を出せばユーザーの勝ちとなります。
これを式に表すと、以下のようになります。

(jankenComp + 1) % 3 == jankenUser


ユーザーの出し手が、

グーの場合：
jankenComp = (0 + 1) % 3 = 1 % 3 = 1（余りは1なので、「チョキ」）
（ユーザー） v.s （コンピューター）＝◯（グー）　X（チョキ）
チョキの場合：
jankenComp = (1 + 1) % 3 = 2 % 3 = 2（余りは2なので、「パー」）
（ユーザー） v.s （コンピューター）＝◯（チョキ）　X（パー）
パーの場合：
jankenComp = (2 + 1) % 3 = 3 % 3 = 0（余りは0なので、「グー」）
（ユーザー） v.s （コンピューター）＝◯（パー）　X（グー）


それでは、実際にJavaScriptを組んでみます。

//変数を宣言します
var strMsg1 = "あいこです";
var strMsg2 = "あなたの勝ちです";
var strMsg3 = "あなたの負けです";

//じゃんけんの結果を導きだす関数
function myResult(jankenUser){
	//0から2の乱数を発生させます
	var jankenComp = Math.floor(Math.random() * 3);
	if (jankenComp == jankenUser)
		return strMsg1;
	else if((jankenComp +1) % 3 == jankenUser)
		return strMsg2;
	else
		return strMsg3;
}


HTMLにJavaScriptを組み込んで「じゃんけんプログラム」を動作させてみます。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="JS/app/judgment.js"></script>
<script type="text/javascript">
	//じゃんけんの結果を表示する関数
	function myChoise(jankenUser){
		var strLocal = myResult(jankenUser);
		alert(strLocal);
	}
</script>
<title>じゃんけんプログラム</title>
</head>

<body>
	<form>
		<input type="button" id="btnG" onclick="myChoise(0)" value="グー">
		<input type="button" id="btnC" onclick="myChoise(1)" value="チョキ">
		<input type="button" id="btnP" onclick="myChoise(2)" value="パー">
	</form>	
</body>

</html>