zhaoyao1203

黄金点游戏（js+css)

一、项目描述：黄金点游戏

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

      N个同学（N通常大于10），每人写一个0-100之间的有理数 (不包括0或100)，交给裁判，裁判算出所有数字的平均值，然后乘以0.618（所谓黄金分割常数），得到G值。提交的数字最靠近G（取绝对值）的同学得到N分，离G最远的同学得到－2分，其他同学得0分。玩了几天以后，大家发现了一些很有意思的现象，比如黄金点在逐渐地往下移动。

现在请大家根据这个游戏规则，编一个可以多人一起玩的小游戏程序，要求如下：

   1、本作业属于结对编程项目，必须由二人共同完成，并分别将本次作业过程发到博客，同时将本次作业源代码提交到coding系统；

   2、如果可能的话尽量以C/S或B/S方式实现，即利用服务器接收和处理所有玩家提交的数字，并将结果反馈给各玩家，玩家可以通过客户端提交数字；

   3、如果采用单机方式实现的话，需要为用户提供便利的输入界面；

   4、该游戏每次至少可以运行10轮以上，并能够保留各轮比赛结果。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    这个休闲小游戏我们选择用网页的形式来展现。 使用的语言为js，HTML和css。

js处理从页面输入的数据，然后将结果展示在页面上，css制作界面。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Insert title here</title>
  6 <script type="text/javascript">
  7 function numClick()
  8 {
  9     myVal=parseInt(document.getElementById("times").value);
 10     var save=[];
 11     var sum=0;
 12     var num=0;
 13     var name=parseFloat(prompt("请输入玩家的个数：","0"));
 14     for(var i=1;i<=name;i++)
 15         {
 16             save[i]=new Array();
 17             save[i][1]=0;
 18         }
 19     var his=[];
 20     his[0]="";
 21     for(var s=1;s<=myVal;s++)
 22         {
 23             alert("第"+s+"轮开始，玩家准备输入数")
 24             document.getElementById('long').innerHTML +="第"+s+"轮的结果：";
 25             document.getElementById('close').innerHTML +="第"+s+"轮的结果：";
 26             document.getElementById('final').innerHTML="";
 27             document.getElementById('Champion').innerHTML="";
 28             his[0]+="第"+s+"轮：<br/>"
 29             var sum=0;
 30             var num=0;
 31              for(var i=1;i<=name;i++)
 32                 {
 33                     num=parseFloat(prompt("输入第"+i+"个数","0"));
 34                     his[0]=his[0]+"玩家"+i+"输入："+num+";<br/>";
 35                     sum+=num;
 36                     save[i][0]=num;
 37                  }
 38             sum=sum/name;
 39             sum=sum*0.618;
 40             his[0]=his[0]+"G值为："+sum+"<br/>";
 41             var k=0;
 42             k=save[1][0]-sum;
 43             save[1][0]=Math.abs(k);
 44             var max=Math.abs(k);
 45             var min=Math.abs(k);
 46             for(var j=2;j<=name;j++)
 47             {
 48                 k=save[j][0]-sum;
 49                 save[j][0]=Math.abs(k);
 50                 if(save[j][0]>max)
 51                 {
 52                     max=save[j][0];    
 53                     
 54                 }
 55                 if(save[j][0]<min)
 56                 {
 57                     min=save[j][0];
 58                 }
 59             }
 60             for(var i=1;i<=name;i++)
 61             {
 62                 if(save[i][0]===max)
 63                 {
 64                     save[i][1]+=-2;
 65                     document.getElementById('long').innerHTML +="玩家"+i+"     .";
 66                 }
 67                 if(save[i][0]===min)
 68                 {
 69                     save[i][1]+=name;
 70                     document.getElementById('close').innerHTML +="玩家"+i+"     .";
 71                 }
 72             } 
 73             document.getElementById('box1').innerHTML +="第"+s+"轮："+sum+"<br/>";
 74             if(s!=myVal)
 75                     {
 76                         alert("第"+s+"轮结束，玩家准备下轮输入数");
 77                     }
 78             else{
 79                     alert("本局已结束！！");
 80                 }
 81             document.getElementById('long').innerHTML +="<br/>";
 82             document.getElementById('close').innerHTML +="<br/>";
 83 
 84         }
 85     var ma=save[1][1];
 86     var count=1;
 87      for(var i=1;i<=name;i++)
 88         {
 89          document.getElementById('final').innerHTML +="玩家"+i+"得分为:"+save[i][1]+"     ."+"<br/>";
 90          if(save[i][1]>ma)
 91          {
 92              ma=save[i][1];
 93              count=i;
 94          }
 95         }
 96      for(var i=1;i<=name;i++)
 97     {
 98         if(save[i][1]===ma)
 99         {
100             document.getElementById('Champion').innerHTML+="玩家"+i+"     .";
101         }
102     }
103 
104      document.getElementById('his').innerHTML=his[0];
105 }
106 </script>
107 </head>
108 <body background="4.jpg">
109 <div>
110 <font color="#999999" size="+2">
111 N个同学（N通常大于10），每人写一个0-100之间的有理数 (不包括0或100)，交给裁判，裁判算出所有数字的平均值，然后乘以0.618（所谓黄金分割常数），得到G值。提交的数字最靠近G（取绝对值）的同学得到N分，离G最远的同学得到－2分，其他同学得0分
112 </font>
113 <br/>
114 <br/>
115 <table width="400" border="0" align="center">
116   <tr>
117     <td>
118 <font color="#999999" size="+2">
119 轮数：<input type="text" id="times" value=" " />
120 <button onclick="numClick()">开始游戏</button>
121  <br/><br/>
122 黄金分割的G值：<div id="box1"></div>
123 <br/>
124 最远的玩家:<div id="long"></div>
125 <br/>
126 最近的玩家：<div id="close"></div>
127 <br/>
128 每位玩家的总分如下：<div id="final"></div>
129 <br/>
130 冠军是：<div id="Champion"></div>
131 <br/>
132 历史输入:<div id="his"></div>
133 </font>
134 </td>
135   </tr>
136 </table>
137 </div>
138 </body>
139 </htm

 Coding.net:https://coding.net/u/zhaoyao666

由于现在正好在自学js，所以我写了js部分，徐亚宁写了css部分，毕竟她做得界面还是比较好看的。

结对编程的图:

现在还不会用B/S写，期待以后再用。

 

徐亚宁的博客：http://www.cnblogs.com/Xuxiaochou/p/5966636.html

 

posted on 2016-10-15 21:49  zhaoyao1203  阅读(379)  评论(4)  编辑  收藏  举报