首页 > 代码库 > 黄金点游戏(js+css)

黄金点游戏(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写,期待以后再用。

 

徐亚宁的博客:

 

黄金点游戏(js+css)