黄金点游戏

黄金点游戏

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

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、限制游戏次数。