サービス概要

コロナの影響で気軽にバーに飲みに行けなくなったので
バーの雰囲気のあるサイトを作りたくて制作しました。

以前Pythonで制作したアルコール度数計算機を
Webサイト用にJava scriptで書き直しました。
Unityで2Dゲームを制作し、Servlet&JSPで
データベースと接続しランキング表示出来るようにしました。

セールスポイント

• グラス、ボタンなど後からアニメーションをつけるためCSSで構築しました。
• 電飾、泡、波、テレビ画面などをCSS＆JavaScriptでアニメーションをつけました。
• 2Dゲームはアセットを使わずUnityで制作しました。
• Servlet&JSPでDBにアクセスしJSONでかえしUnityでランキング表示する機能をつけました。

使用技術

• JavaServlet/JSP
• MySQL
• Unity
• JavaScript
• HTML5
• CSS3

使用例

1. コップをクリックし計算

トップ画面から下にスクロールしコップをクリック。
するとアルコール度数計算機が表示されます。
数値を入力するとコップの液体の色が変化します。
計算ボタンを押すとアルコール度数と水割りの量が表示されます。
クリアを押し、コップを押すと計算機が非表示になります。

2. ゲーム機をクリックしDrunk Game

ゲーム機をクリックするとゲームのスタート画面が表示されます。
画面にカーソルをあわせクリックするとゲームスタート
矢印キーの←と→で移動して落下するお酒をゲットします
制限時間が終わるとポイントとランキングが表示されます
画面右上の×ボタンで画面を閉じます。

3. 赤いボタンをクリックしBAC計算

ページ下部にある赤いボタンをクリックすると映像が流れます
エンドロール風に流れるアルコール血中濃度計算機です。
数値を入力し計算ボタンを押すと計算結果が表示されます

力を入れた点

1. 液体の色を変化させる

アルコール度数計算機の割った度合いによって液体の色が変化するようにしました。
Java Scriptで入力された数値をもとに計算しその値を１６進数に変換しコップのstyleにあてます。

Java Script

function alcoholCalc(){
	alcohol=parseFloat(entry1.value);
	degree=parseFloat(entry2.value);
	water=parseFloat(entry3.value);
	degree/=100;
	degree2=(degree*alcohol)/(alcohol+water)*100;
	degree2=degree2.toFixed(1);
	colorChange();
	mizuwari=alcohol+water;
}
function hex(num){
	let hex=num.toString(16);
	if(num<16){
		hex='0'+hex;
	}
	return hex;
}
function colorChange(){
	let num=degree2*10;
	g=230-num; 
	b=160-num;
	cCode="#"+hex(r)+hex(g)+hex(b);
	waterColor.style.borderTopColor=cCode;
}
entry1.addEventListener("input",function(){
	alcoholCalc();
});
entry2.addEventListener("input",function(){
	alcoholCalc();
});
entry3.addEventListener("input",function(){
	alcoholCalc();
});

<div class="alcoholImgA"></div>
<div class="alcoholImgB"></div>
<div class="alcoholImgC"></div>
<div class="alcoholImgI"></div>
<div class="alcoholImgE"></div>
<div class="alcoholImgG"></div>
<div class="alcoholImgH"></div>
<div class="alcoholImgD"></div>

 CSS

.alcoholImgA{
	position: absolute;
	margin-top:10px;
	width: 60px;
	border-top: 84px solid #a9d8e6;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	border-radius:0 0 30px 30px;
}
.alcoholImgB{
	box-shadow: 0 0 5px #a9d8e6, 0 0 15px #a9d8e6, 0 0 20px #a9d8e6, 0 0 40px #a9d8e6, 0 0 60px #a9d8e6;
	position: absolute;
	margin-left:8.8px;
	margin-top:76px;
	background-color:#a9d8e6;
	width:58px;
	height:20px;
	border-radius: 50%;
}
.alcoholImgC{
	position: absolute;
	margin-top:10px;
	margin-left:1.5px;
	width: 57px;
	border-top: 84px solid #a9d8e6;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	border-radius:0 0 30px 30px;
}
.alcoholImgD{
	position: absolute;
	margin-top:7px;
	width:79px;
	height: 6px;
	background-color: #a9d8e6;
	border-radius: 50%;
}
.alcoholImgE{
	position: absolute;
	margin-top:54px;
	margin-left:40px;
	background-color: white;
	width: 20px;
	height:20px;
	border-radius: 15%;
	transform: rotate(-23deg);
	opacity:0.4;
}
.alcoholImgG{
	position: absolute;
	margin-top:44px;
	margin-left:20px;
	background-color: white;
	width: 20px;
	height:20px;
	border-radius: 15%;
	transform: rotate(23deg);
	opacity:0.4;
}
.alcoholImgH{
	position: absolute;
	margin-top:24px;
	margin-left:30px;
	background-color: white;
	width: 20px;
	height:20px;
	border-radius: 15%;
	transform: rotate(-28deg);
	opacity:0.4;
}
.alcoholImgF{
	position: absolute;
	margin-top:30px;
	margin-left:7px;
	width: 50px;
	border-top: 55px solid #f2e6a0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	height: 0;
	border-radius:10px 10px 27px 27px;
	/*opacity:0.9;*/
}

• ２．2DゲームのランキングをWebAPIのJSONで取得

Unityで制作した2Dゲームをウェブでプレイ出来るようWebGLで書き出し
サーバーにアップしました。すると「モバイルだとサポートされてないから動作しない」
という旨の表示が下記のようにされます。

表示されないようにするためWebGLで書き出したUnityLoader.js内の下記の部分を

[UnityLoader.SystemInfo.hasWebGL?UnityLoader.SystemInfo.mobile?e.popup("Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.",[{text:"OK",callback:t}]):["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.",[{text:"OK",callback:t}]):t():e.popup("Your browser does not support WebGL",[{text:"OK",callback:r}])

下記のように書き換えます。

t();

続いてGCEにアップしたJSONのWebAPIからランキングデータを取得します。

しかし、サーバ上に置いたWebGLでランキングデータを取得できません。

コンソールを見てみると下記のように表示されます。

Access to XMLHttpRequest at 'http://35.200.18.221/ScoreAPI/GetRanking' from origin 'http://chita-hp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

調べてみるとリクエストする側とレスポンスする側が違うドメインなので拒否されています。

なのでWebGL内のindex.htmlをエクリプスでindex.jspに書き換えGCEのWebAPIと同サーバーに配置しました。

するとランキングが表示されるようになりました。

改善点

1. 計算機改善

コップをクリックして計算機が表示されたときに
Java Scriptで画面を自動スクロールし
計算機の表示が分かりやすいようにしたいです。

2. 2Dゲーム改善

BAC(アルコール血中濃度)の値が0.48%以上になると
ゲームオーバーになるようにしたいです。

3. アルコール血中濃度計算機改善

値を入力するまでは文字を静止し判定ボタンをクリックしたら
エンドロールが流れるようにしたいです。