javaからMysqlにつなげたい

前提・実現したいこと

今javaでRPG風のクイズゲームを作ろうとしています
そこでユーザー名の登録画面と成績結果をデータベースに入れて
表示させたいと思っています。
しかしまだそこまでの知識は浅く詰まっています。
できれば教えてくださると助かります。
作ったコードは以下のようになります

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>野球RPG</title>
</head>
<body>
<h1>野球RPG</h1>
<hr>
<h2>問題</h2>
<div id="text_q"></div>
<h2>君の選択は果たして</h2>
<div id="text_s"></div>
<h2>解答</h2>
<div id="text_a"></div>

<script type="text/javascript">
//問題と解答
qa = new Array();
qa[0] = ["野球は1チーム最低何人必要でしょうか？","8人","9人","11人",-10,0,-10];
qa[1] = ["捕手 これはどこのポジションを指しているでしょうか？","ピッチャー","キャッチャー","センター",-10,0,-20];
qa[2] = ["日本に野球が伝わったのはいつとされてるでしょう？","1871年","1971年","1771年",0,-10,-10];
qa[3] = ["安打 これは次のうちどの言葉を指しているでしょうか？","フライ","ゴロ","ヒット",-10,-10,0];
qa[4] = ["野球を英語で表すのはどれ?","Base ball","Bose boll","base boll",0,-20,-20];
qa[5] = ["プロ野球で使われてるボールは次のうちどれ？","軟球","硬球","ソフトボール",-10,0,-10];
qa[6] = ["プロ野球は１回表から最長何回裏までやるでしょう？","9回","12回","15回",-10,0,-10];
qa[7] = ["野球はホームランで最大何点入る？","1点","5点","4点",-10,-20,0];
qa[8] = ["ピッチャーからキャッチャーまでの投げる距離はいくつでしょうか？","18.44m","18.55m","18.66m",0,-10,-10];
qa[9] = ["野球は3アウトで攻守交代ですがストライクは何個で1アウトでしょうか？","2ストライク","3ストライク","1ストライク",-10,0,-10];

//初期設定
q_sel = 3; //選択肢の数

setReady();


//初期設定
function setReady() {
	count = 0; //問題番号
	my_hp = 100; //HP
	
	//最初の問題
	quiz();
}

//問題表示
function quiz() {
	//問題
	document.getElementById("text_q").innerHTML = (count + 1) + "球目：HP" + my_hp + "<br>"+ qa[count][0];
//選択肢
	s = "";
	for (n=1;n<=q_sel;n++) {
		s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[count][n] + "</a>】";
	}
	document.getElementById("text_s").innerHTML = s;
}

//解答表示
function anser(num) {
	var s;
	s = (count + 1) + "球目<br>";
	//HPの増減
	my_hp += qa[count][num+q_sel];
	//結果表示
	s += "HP";
	if (qa[count][num+q_sel] >= 0) s += "+";
	s += qa[count][num+q_sel];
	document.getElementById("text_a").innerHTML = s;
//HPのチェック
	if (my_hp > 100) my_hp = 100; //上限を超えさせない
	if (my_hp <= 0) {
		game_over(); //ゲームオーバー
	}
	 else {
	//次の問題を表示
	count++;
	if (count < qa.length) {
	quiz();
	} else {
		//終了
	if (my_hp > 100) {
			s = "見事魔王を倒し野球国は無事平和な野球ができるようになりました。<br>";
			s += "そして魔王を倒した選手は国から讃えられ銅像も作られたとさ！！<br>";
			s += "お見事！！今すぐ野球を始めよう！！";
		} else if (my_hp > 70) {
			s = "大怪我をしながらもなんとかボールをスタンドに運び<br>";
			s += "野球国は救われた。しかしもう野球ができない体になり以後監督として再起した。<br>";
			s += "ギリギリ合格！！次は満点を目指そう！！";
		} else if (my_hp > 40) {
			s = "魔王軍の強さに押されながらもなんとか魔王と引き分けたが共に倒れ...<br>";
			s += "後に野球国を救った選手として殿堂入りした。<br>";
			s += "惜しい...これを機会に野球を勉強してみよう！！";
		} else {
			s = "なんとか抵抗をみせたが魔王軍に敗れた...<br>";
			s += "野球国の選手たちは魔王軍の打撃投手になりボコボコに打たれる日々を送った...<br>";
			s += "残念。。。もう一度挑戦し野球国を救おう！！！";
		}
		document.getElementById("text_q").innerHTML = "";
		//次の選択肢
		s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
		s += "【<a href='javascript:setReady()'>同じ問題を最初から</a>】";
		s += "【<a href=''>次の問題に進む</a>】";

		document.getElementById("text_s").innerHTML = s;
		}
	}
}
function game_over() {
	var s;
	
	s = "ゲームオーバー<br>";
	s += "魔王スタジアムに向かう途中魔王の手下のチームに負け野球国は滅んでしまった。<br>";
	s += "もう平和な日常は二度とこない<br>";
	s += "ゲームオーバーだよ...野球国をどうか救ってくれ。。。";
	document.getElementById("text_q").innerHTML = s;
	//次の選択肢
	s = "【<a href='javascript:history.back()'>前のページに戻る</a>】";
	s += "【<a href='javascript:setReady()'>同じ物語を最初から</a>】";
	document.getElementById("text_s").innerHTML = s;
}


</script>
</body>
</html>