黄金点游戏(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) 编辑 收藏 举报