黃金點游戲黃金點游戲是一個數字小游戲，其游戲規則是： N個同學（N通常大於10），每人寫一個0~100之間的有理數 (不包括0或100)，交給裁判，裁判算出所有數字的平均值，然後乘以0.618（所謂黃金分割常數），得到G值。提交的數字最靠近G（取絕對值）的同學得到N分，離G最遠的同學得到－2分，其 ...

黃金點游戲

黃金點游戲是一個數字小游戲，其游戲規則是：

N個同學（N通常大於10），每人寫一個0~100之間的有理數 (不包括0或100)，交給裁判，裁判算出所有數字的平均值，然後乘以0.618（所謂黃金分割常數），得到G值。提交的數字最靠近G（取絕對值）的同學得到N分，離G最遠的同學得到－2分，其他同學得0分。玩了幾天以後，大家發現了一些很有意思的現象，比如黃金點在逐漸地往下移動。

現在請大家根據這個游戲規則，編一個可以多人一起玩的小游戲程式，要求如下：

1、本作業屬於結對編程項目，必須由二人共同完成，並分別將本次作業過程發到博客，同時將本次作業源代碼提交到codeing系統；

2、如果可能的話儘量以C/S或B/S方式實現，即利用伺服器接收和處理所有玩家提交的數字，並將結果反饋給各玩家，玩家可以通過客戶端提交的數字；

3、如果採用單機方式實現的話，需要為用戶提供便利的輸入界面；

4、該游戲每次至少可以運行10輪以上，並能夠保留各輪比賽結果。

看到題目，我決定用自己比較擅長的html+js完成這個任務。

首先，如題目所說。有N個同學，於是，第一步便是確定同學的人數。

<div class="col-lg-6 play">
            <div class="input-group">
               <input type="text" class="form-control" id="P_numa">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button" onclick="CreatBoxa()">
                     游戲人數
                  </button>
               </span>
            </div>
    </div>

這段代碼便是想客戶展示一個輸入框，輸入進行游戲的人數N。然後點擊游戲人數按鈕，便可以動態的生成N個輸入框。用戶便可以在輸入框中輸入自己的數字。進行游戲。動態生成輸入框的代碼如下所示：

function CreatBoxa() {
    document.getElementById("resulta").innerHTML="";
    document.getElementById("Box_numa").innerHTML="";
    var Pnum1=document.getElementById("P_numa").value;
    var oa = document.getElementById("Box_numa");
    for (i = 0; i < Pnum1; i++) {
        var Box_numa = document.createElement("input"); 
        Box_num.setAttribute('type', 'text');
        Box_num.setAttribute('name', 'B_numa');
        Box_num.setAttribute('class', 'form-control');
        Box_num.setAttribute('class', 'input-sm');
        oa.appendChild(Box_numa); 
    }
}

前臺代碼：

<div class="headera">
    <h1>Gold Point</h1>
  </div>
  <div class="contenta">
    <div class="col-lg-6 play">
            <div class="input-group">
               <input type="text" class="form-control" id="P_numa">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button" onclick="CreatBoxa()">
                     游戲人數
                  </button>
               </span>
            </div>
    </div>
    <button type="button" class="btn btn-default" onclick="nexta()">開始游戲</button>
    <div class="cona">
        <div id="Box_numa">
        </div>
        <div id="resulta">
        </div>
        <div id="result2a">
        </div>
    </div>
  </div>

　　如上面代碼所示，CreatBox的函數便是先清空前臺頁面div分別是result和B_num的內容。然後獲取用戶輸入的人數，存入變數Pnum1裡面。最後用for迴圈通過document.createElement("")創建輸入視窗。

緊接著，用戶輸入完成數值後，點擊開始游戲便在下方動態生成兩個文本框textarea區域。然後將每輪的分數顯示在result裡面，並將每輪的總分數顯示在result2裡面。動態生成文本框區域如下所示：

function Creatareaa(aa) {
    document.getElementById("resulta").innerHTML="";
    var oa = document.getElementById("resulta");
    var resa = document.createElement("textarea"); 
    res.setAttribute('name', 'resa');
    res.setAttribute('class', 'resa');
    res.setAttribute('rows', '10');
    res.setAttribute('cols', '40');
    res.setAttribute('readonly', 'readonly');
    oa.appendChild(resa); 
    for (i = 0; i <a.length; i++) {
        ja=i+1;
        resa.innerHTML+="第"+ja+"個人的分數是："+aa[i]+"\n";
    }
}

總體與創建游戲人數輸入框相似。然後下麵便是計算黃金點數的函數，通過獲取用戶輸入的游戲數值，然後用數組的方式放到數組P裡面。最後返回計算出的黃金點數A。

function Get_num() {
    var A_numa= new Array();
    var Pa=document.getElementsByName("B_numa");
    for (i = 0; i <P.length; i++) {
        A_numa[i]=Pa[i].value;
    }
    var suma=0;
    for (i = 0; i <A_numa.length; i++) {
        suma=suma+parseFloat(A_numa[i]);
    }
    Sa=suma/A_numa.length;
    Aa=Sa*0.618;
    return Aa;
}

下麵是計算分數函數，通過計算得出所以游戲數和黃金點數之間的差的絕對值放到數組Pe_num中，遍歷得出的最大值max和最小值min。最後用過if語句判斷賦予分數數組P_sum分數。然後返回P_sum

function Counta(S_numa) {
    var P_suma=new Array();   
    var Pe_numa=new Array();
    var Sa=Get_numa();
    for (i = 0; i < S_numa.length; i++) {
        Pe_numa[i]=Math.abs(Sa-S_numa[i]);
    }
    var maxa=Pe_numa[0];
    for (i = 0; i <Pe_numa.length; i++) {
        if (maxa<Pe_numa[i]) {
            maxa=Pe_numa[i];
        }
    }
    var mina=Pe_numa[0];
    for (i = 0; i < Pe_numa.length; i++) {
        if (mina>Pe_numa[i]) {
            mina=Pe_numa[i];
        }
    }
    for (i = 0; i <Pe_numa.length; i++) {
        if (maxa==Pe_numa[i]) {
            P_suma[i]=10;
        }
        else if (mina==Pe_numa[i]) {
            P_suma[i]=-2;
        }
        else {
            P_suma[i]=0;
        }
    }
    var S1a = new Array();  
            S1a[0]=P_suma[0]
    return P_suma;
}

最後就是計算總分函數：

var qa=0;
var dataa=new Array();
function nexta() {
    var Snuma=new Array();
    var numa=document.getElementsByName("B_numa");
    for (i = 0; i <numa.length; i++) {
        Snuma[i]=numa[i].value;
    }
    qa++;
    var Aa=Counta(Snum);
    Creatareaa(A);
    var Ba=new Array();
    if (qa==1) {
        for (i = 0; i < Aa.length; i++) {
            dataa[i]=parseInt(Aa[i]);
        }
    }else {
        for (i = 0; i <Aa.length; i++) {
        var aa=parseInt(Aa[i]);
        dataa[i]=dataa[i]+aa;
    }
    }
    Creatarea2a(dataa);
}

　　首先，在函數外創建兩個全局變數q和數組data。將Count函數得出的分數數組傳入數組A中。然後用Creatarea（）函數顯示在頁面中。當全局變數q為1的時候，表示此時的next函數運行了一次。此時總分便是數組A的值，將A的值通過整形數強制轉換傳入data數組（為了方便後面數組內數的運算）。當q不等於1的時候，說明函數運行了一次以上，便用for迴圈計算data。沒執行一次函數，A內的數值便能累加當全局變數數組B中。便實現了總分的計算，然後通過Creatarea2（）函數顯示在div的id為result2盒子內。這邊是整個程式設計的思路。

結伴照片：