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

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

あわせて読みたい
【Java】ジャンケンゲーム作成-2。ランダムでPCが出す手を生成する 前回の続きとなります。 まだ読んでいない方は是非どうぞ。 https://kazunaka.com/java-janken-1/ 本記事の手順としては、 ①JankenServlet.javaでランダムの手を生成す...

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

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

あわせて読みたい
JavaScriptを使って複数のbuttonで違う値を送信する 調べても意外とやり方なかったので、簡単なサンプルコードを書きます。参考に是非。 html側 <body>の中に書いてください <body>  <form name="fruit" a...
目次

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で受け取ることができます。

では、実行しましょう。

実行

今回の実行は訳あって「Janken.jsp」ファイル上で行います。

結果は「null」となっていますが、今は気にしないでください。
あとで直します。
下図のようになってればOKです。

リンク上の手を選んでPCの手と、あなたの手が変われば本記事としてはゴールです。

ちゃんとお互い手を出すことはできたでしょうか?
次は勝負の判定をしたいと思います。

あわせて読みたい
【Java】ジャンケンゲーム作成-4。勝敗の判定 3回目の続きとなります。まだ読んでいない方は是非どうぞ。 https://kazunaka.com/java-janken-3/ お互い「手」を出し合ったので、勝敗を決したいと思います。ジャンケ...

うまく表示できない!!と言う方向けにデバッグについての記事も簡単に書いてみましたので是非参考にしてみて下さい。
実行の流れを追うことで原因を突き止めることができます。

あわせて読みたい
【JavaScript】デバッグのやり方 動作確認レベルの簡単な説明になります。触っていけば慣れますので初学者の方は是非参考にしてみて下さい。 下記記事での番外編となっています。まだ読んでない方は是非...
あわせて読みたい
【Java】デバッグのやり方 動作確認レベルの簡単な説明になります。触っていけば慣れますので初学者の方は是非参考にしてみて下さい。 下記記事での番外編となっています。まだ読んでない方は是非...

本記事最後までご覧いただきありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次