【Java】ジャンケンゲーム作成-3。手を出す。

2020年6月21日2024年8月7日

2回目の続きとなります。
まだ読んでいない方は是非どうぞ。

相手(PC)が出来上がったので、次はこちらからも手を出していきます。
「グー」「チョキ」「パー」のリンクを作成し、そのリンクを選ぶことでPCと勝負できるようにします。

JavaScriptを使って、どのリンクが押されたか制御します。
下記記事とほぼ同じことをしますが、こちらも参考として読んでみて下さい。

JavaScriptのメソッド作成

まずはメソッドJavaScriptのを作成します。

「WebContent」を右クリックしてjs用のファイルを作成します。

フォルダ名を「js」とします。
「WebContent」の直下に保存することを確認し「完了」を押下して下さい。

さらに、今作成した「js」フォルダの中にjsファイルを作成します。
右クリックで「新規」→「ファイル」を選択します。

ファイル名を「method.js」とします。
「js」直下に作成します。

そのまま「method.js」を編集します。
イメージはこんな感じです。

function select(handNumber) {
	var selectHand = document.getElementsByName('hand');
	selectHand[0].value = handNumber;
	document.janken.submit();
}

次はデータを受け取るための準備をしたいと思います。

JankenServlet.javaの編集

追記するのは3行だけです。

//ユーザの手の番号を受け取る
int userHandNumber =　Integer.parseInt(request.getParameter("hand"));
//ユーザ側の手を決定
String userHand = hands[userHandNumber];
//画面側へデータ受け渡し
request.setAttribute("userHand", userHand);

request.getParameter(“name”)で受け取ることができます。
受け取りは文字列なのでIngeger.parsIntでint形にキャスト（変換）してます。

Janken.jspの編集

先ほど作成したmethod.jsの読み込みと、リンクの作成、そして、データをJankenServlet.javaに送信します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
	<%
		//JankenServletで生成したデータを受け取る
		String pcHand = (String)request.getAttribute("pcHand");
		String userHand = (String)request.getAttribute("userHand");
	%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="./js/method.js"></script>
		<title>ジャンケンゲーム</title>
	</head>
	<body>
		<form name="janken" action="JankenServlet" method="get">
			<p>HelloJanken</p>
			<p>PCの手は<%= pcHand%></p>
			<p>PCの手は<%= userHand%></p>
	
			<input type="hidden" name="hand" value="" />
			<a href="javaScript:select('0')">グー</a>
			<a href="javaScript:select('1')">チョキ</a>
			<a href="javaScript:select('2')">パー</a>
		</form>
	
	</body>	
</html>

少し解説すると、

method.jsで作成したselect(handNumber)メソッド内にある、document.janken.submit();の「janken」と、jsp側のform name=”janken”が紐づいています。
form action=“JankenServlet” method=“get”で、JankenSservlet.javaのdoGetで受け取ることができます。

では、実行しましょう。