結對編程 黃金點游戲

    一、實現功能：

    10個玩家同時游戲，系統根據規則計算出G值，並且給相應玩家分數，游戲可以進行多輪，由玩家自行控制，每一輪的分數都會累計下來除非重新開始

    二、 設計過程：

    最開始打算用b/s來做這個游戲，后台連接數據庫，一個表用來記錄玩家的用戶名密碼（登錄形式），另一個來記錄游戲信息。但是后來發現帶有數據庫

的b/s結構過於復雜，比如系統如何判定所有玩家都已經結束輸入然后開始計算。對於一個雙人項目反復登錄多個用戶在測試上也是個不小的負擔。只要有

用戶登錄，就要在filter中設置過濾選項，保證沒有登錄的游客不管訪問那個界面都會自動跳轉到登陸界面，這對於雙人項目來說也是個不小的工作量，所以

我們放棄了接入數據庫，打算將游戲數據存到內存中，后台用java處理。於是着手搭建了springMVC框架

    在WEB-INF文件夾中配置好springMVC后出現了新的問題，js的json數組不能傳到后台，我們認為是框架配置的問題，經過兩天時間沒有解決，所以也放棄了后台的java

利用前端完成了所有的功能，下圖為之前寫的后台java代碼和玩家類

 

    關於框架配置的問題我會在團隊項目之前解決的。

    最終版本

    游戲的全部功能在Input.js中實現

    三、功能展示：

    進入首頁

    點擊開始按鈕進入游戲

    規定游戲共有10名玩家，每個玩家點擊自己對應的按鈕輸入數值，所有人輸入完畢后點擊輸入結束將數據提交給后台，點擊查看結果按鈕查看本輪游戲結果和每名玩家的積分

    輸入完畢后會進行提示

 

    全部輸入完畢點擊“輸入結束”按鈕

    點擊“查看結果”按鈕

    查看玩家分數

    查看G值

    點擊繼續游戲按鈕回到游戲界面

    多輪游戲之后

    四、服務器的配置

    我們使用的服務器為tomcat6.0.44版本，單擊“window”菜單，選擇下方的“Preferences”，找到Server下方的Tomcat，

單擊右方的Add按鈕，選擇已經成功安裝的Tomcat版本，單擊Next，設置好tomcat的安裝目錄點擊ok即完成安裝

    虛擬路徑的配置

    划線部分改為workspace中項目的webroot路徑，該路徑用auto代替，至此配置完成

    啟動服務器

    

    啟動成功

    五、編寫過程

    前台模板借助bootstrap3.3.2，開始界面Start.jsp直接通過一個標簽跳轉游戲界面Input.jsp，所以不需要Start.js，

在Input.js中初始化了三個數組分別用來存儲玩家輸入的數值，輸入數值跟G相差的絕對值，玩家的分數，玩家分數全部初

始化為0。

var mynum=new Array(10)
var score=new Array(10)
var res=new Array(10)
var flag=0;
res[0]=0;
res[1]=0;
res[2]=0;
res[3]=0;
res[4]=0;
res[5]=0;
res[6]=0;
res[7]=0;
res[8]=0;
res[9]=0;

　　前台共有十個button，每一個button對應一個prom()函數，10個函數結構類似

<button type="button" class="btn btn-lg btn-primary" onClick="prom0()">Player_0</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom1()">Player_1</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom2()">Player_2</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom3()">Player_3</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom4()">Player_4</button><br><br>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom5()">Player_5</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom6()">Player_6</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom7()">Player_7</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom8()">Player_8</button>
          <button type="button" class="btn btn-lg btn-primary" onClick="prom9()">Player_9</button>

　　輸入的數如果不符合要求還會要求用戶重新輸入

function prom0() 
{ 
 var number=prompt("Please enter your num","")

 	if (number<100 && number>0)
 	{
	//alert(flag);
	mynum[0]=number;
	//document.write(mynum[flag]);
	alert("your number is :"+mynum[0]);
 	}
 	else
 	{
	alert("輸入的數不符合要求")
	prom0();
 	}
}  

　　每個玩家通過點擊按鈕將數值傳遞給后台的mynum[]數組，輸入完畢后點擊“輸入結束”按鈕，觸發send()函數，計算出G的值，以下為send()的部分代碼

第一個循環用來報錯，檢測未輸入的玩家並提示，之后算出G值

for(var i=0;i<10;i++)//報錯
		if(!(mynum[i]>0&&mynum[i]<100))
		{
			alert("player_"+i+"未輸入，請重試")
			return 0;
		}
	var ave=0;
	for(var i=0;i<10;i++)
	{
		ave=parseFloat(mynum[i])+parseFloat(ave);
		//alert(ave);
	}
	//alert(ave);
	ave=ave/i;
	G=parseFloat(ave)*0.618;

　　因為javascript是一種弱語言，定義的var變量有的時候會被當成字符串，也就是說1+2=3有時候會被算成"1"+"2"="12"，所以在計算前要將變量類型進行規定

此處用到了parseFloat()函數。否則算出的結果會顯示NaN，即代表非數字值的特殊值。

    計算完G值，用數組score[]存放mynum[]-G的絕對值，分別計算出最大值最小值，再通過一個新的for循環找出離G最遠的玩家和離G最近的玩家，進行給分，用

res[]數組存放玩家的分數。

for(var i=0;i<10;i++)
	{
		score[i]=parseFloat(mynum[i])-parseFloat(G);
		if(score[i]<0)
			score[i]=0-parseFloat(score[i]);
	}
	var max=score[0];
	var min=score[0];
	for(var i=1;i<10;i++)
	{
		if(max<score[i])
			max=score[i];
		if(min>score[i])
			min=score[i];
	}
	for(var i=0;i<10;i++)
	{
		if(score[i]==max){
			res[i]=parseInt(res[i])-2;}
		if(score[i]==min){
			res[i]=parseInt(res[i])+10;}
	}

　　前台jsp由我修改，js代碼由我和唐翔宜同學共同完成

    編寫過程中和編寫完成后出現的問題及解決方案請見唐翔宜同學的博客

    http://www.cnblogs.com/tangxiangyi/p/5357833.html

    代碼已上傳到coding