黄金点游戏(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制作界面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function numClick()
{
myVal=parseInt(document.getElementById("times").value);
var save=[];
var sum=0;
var num=0;
var name=parseFloat(prompt("请输入玩家的个数:","0"));
for(var i=1;i<=name;i++)
{
save[i]=new Array();
save[i][1]=0;
}
var his=[];
his[0]="";
for(var s=1;s<=myVal;s++)
{
alert("第"+s+"轮开始,玩家准备输入数")
document.getElementById('long').innerHTML +="第"+s+"轮的结果:";
document.getElementById('close').innerHTML +="第"+s+"轮的结果:";
document.getElementById('final').innerHTML="";
document.getElementById('Champion').innerHTML="";
his[0]+="第"+s+"轮:<br/>"
var sum=0;
var num=0;
for(var i=1;i<=name;i++)
{
num=parseFloat(prompt("输入第"+i+"个数","0"));
his[0]=his[0]+"玩家"+i+"输入:"+num+";<br/>";
sum+=num;
save[i][0]=num;
}
sum=sum/name;
sum=sum*0.618;
his[0]=his[0]+"G值为:"+sum+"<br/>";
var k=0;
k=save[1][0]-sum;
save[1][0]=Math.abs(k);
var max=Math.abs(k);
var min=Math.abs(k);
for(var j=2;j<=name;j++)
{
k=save[j][0]-sum;
save[j][0]=Math.abs(k);
if(save[j][0]>max)
{
max=save[j][0]; }
if(save[j][0]<min)
{
min=save[j][0];
}
}
for(var i=1;i<=name;i++)
{
if(save[i][0]===max)
{
save[i][1]+=-2;
document.getElementById('long').innerHTML +="玩家"+i+" .";
}
if(save[i][0]===min)
{
save[i][1]+=name;
document.getElementById('close').innerHTML +="玩家"+i+" .";
}
}
document.getElementById('box1').innerHTML +="第"+s+"轮:"+sum+"<br/>";
if(s!=myVal)
{
alert("第"+s+"轮结束,玩家准备下轮输入数");
}
else{
alert("本局已结束!!");
}
document.getElementById('long').innerHTML +="<br/>";
document.getElementById('close').innerHTML +="<br/>"; }
var ma=save[1][1];
var count=1;
for(var i=1;i<=name;i++)
{
document.getElementById('final').innerHTML +="玩家"+i+"得分为:"+save[i][1]+" ."+"<br/>";
if(save[i][1]>ma)
{
ma=save[i][1];
count=i;
}
}
for(var i=1;i<=name;i++)
{
if(save[i][1]===ma)
{
document.getElementById('Champion').innerHTML+="玩家"+i+" .";
}
} document.getElementById('his').innerHTML=his[0];
}
</script>
</head>
<body background="4.jpg">
<div>
<font color="#999999" size="+2">
N个同学(N通常大于10),每人写一个0-100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值。提交的数字最靠近G(取绝对值)的同学得到N分,离G最远的同学得到-2分,其他同学得0分
</font>
<br/>
<br/>
<table width="400" border="0" align="center">
<tr>
<td>
<font color="#999999" size="+2">
轮数:<input type="text" id="times" value=" " />
<button onclick="numClick()">开始游戏</button>
<br/><br/>
黄金分割的G值:<div id="box1"></div>
<br/>
最远的玩家:<div id="long"></div>
<br/>
最近的玩家:<div id="close"></div>
<br/>
每位玩家的总分如下:<div id="final"></div>
<br/>
冠军是:<div id="Champion"></div>
<br/>
历史输入:<div id="his"></div>
</font>
</td>
</tr>
</table>
</div>
</body>
</htm
Coding.net:https://coding.net/u/zhaoyao666
由于现在正好在自学js,所以我写了js部分,徐亚宁写了css部分,毕竟她做得界面还是比较好看的。
结对编程的图:
现在还不会用B/S写,期待以后再用。
徐亚宁的博客:http://www.cnblogs.com/Xuxiaochou/p/5966636.html
黄金点游戏(js+css)的更多相关文章
- Python Web实战 - 基于Flask实现的黄金点游戏
一.简介 团队成员: 领航者:张旭 驾驶员:张国庆 项目简介: 项目名称:基于B/S模式的黄金点游戏 采用技术: 后端:Python + Sqlite3 前端:HTML + CSS + JS + Bo ...
- JS/CSS 在屏幕底部弹出消息
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- JS/CSS缓存杀手——VS插件
背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)! 一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- 配置springMVC之后,引入js,css等资源处理
配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...
- springmvc js/css路径问题
①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- springMVC下jsp引用外部js,css等静态资源的解决方法
直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...
随机推荐
- Oculus安装问题
1.必须FQ,可采用蓝灯,或其他vpn 2.Your computer doesn't meet Rift's recommended specifications 如果某些硬件达不到推荐配置(比如我 ...
- linux下tomcat的shutdown命令杀不死进程
tomcat在windows下可以直接关闭,但是貌似在Linux下有时候shutdown.sh 没有关闭tomcat进程:国庆前最后一天没事,解决你~~~~ 现象: 在Linux下shutdown.s ...
- 20169212《Linux内核原理与分析》第五周作业
关于linux内核源码 两个很关键的目录,一个是arch(architecture),支持不同cpu体系架构的源代码,其中最重要的就是x86(一般把x86留下,其他的目录删掉),另一个是init(其中 ...
- web.config 修改数据库连接
<connectionstrings> </database=数据库名字 ;uid = 登录数据库的名字;Password = 登录数据库的密码;/> </connect ...
- Oracle 数据库特殊查询总结
1. 查询本节点及本节点以下的所有节点: select * from table1 c start with c.p_id='0000000' connect by prior c.id=c.p_id ...
- CentOS5.4 搭建Hadoop2.5.2伪分布式环境
简介: Hadoop是处理大数据的主要工具,其核心部分是HDFS.MapReduce.为了学习的方便,我在虚拟机上搭建了一个伪分布式环境,来进行开发学习. 一.安装前准备: 1)linux服务器:Vm ...
- 关于KINECT2 和ROS接口安装的问题
具体安装过程见此博客 http://www.itdadao.com/articles/c15a450477p0.html 感谢博主. 注意,在我自己的电脑上,最后测试的两条代码执行不了,即:1)ros ...
- 利用WPS 2012/2013 0day针对中国政府部门的定向攻击
今天早上,我们捕获到一个利用wps 2012/2013 0day针对中国政府部门的钓鱼邮件定向攻击事件. 邮件发件人以2014中国经济形势解析高层报告组委会 标题发出,附件为包含wps2012 0da ...
- Android中View的基础知识
View的界限 View就是我们看到的界面,有四个界限范围分别是, Top/Left, Bottom/Right,坐标系从左上到右下.这四个值可以通过任何View的子类调用getTop()/get.. ...
- uva 489 Hangman Judge
大意:电脑想个单词,玩家来猜.玩家输入一个个字母,若答案里有这个字母,则显示该单词中所有该字母.最终目标是显示答案所有字母.猜错7次,死: 注意特殊条件:1.玩家不断重复错误的字母,只算一次猜错.2. ...