黄金点游戏（js+css)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了黄金点游戏（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)的主要内容，如果未能解决你的问题，请参考以下文章