黄金点游戏

黄金点游戏

      黄金点游戏是一个数字小游戏，其游戏规则是：

      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盒子内。这边是整个程序设计的思路。

结伴照片：

队员评价：

我的队友是李思雨，她习惯用C语言编程，这次我们经过讨论后决定用JS完成，所以我主编，我队友帮我检查错误和提供界面设计的想法，队友大二参加一年ACM,编程还是很给力的，我们一个下午就完成了任务，两个人比一个人工作轻松，气氛愉快，工作效率高。

相对于一个人的编程，两个人的编程更加的有了效率，而且气氛活跃。交流也更加有助于难点的攻克！

运行效果如下所示：

主页：

第一步输入人数，点击游戏人数：

第二步输入数值，点击开始游戏：

第三步输入第二轮数值，输入完点击开始游戏：

如上图所示，基本完成任务。上一局是想查询上次一的数值和分数，但还没有完成。现在整个程序还有几点没有完成：1、限制人数  2、限制数值大小   3、页面显示效果不佳   4、查询前面的游戏内容   5、限制游戏次数。