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

徐亚宁的博客:

时间: 2024-10-14 03:48:59

黄金点游戏(js+css)的相关文章

JavaScript之打飞机小游戏 js css

先引入    jquery-1.12.4.min.js 和    lodash.min.js css .container{ width: 320px; height: 568px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; } .start-page{ width: 320px; height: 568px; background: url('../images/start_bg.png'

Python Web实战 - 基于Flask实现的黄金点游戏

一.简介 团队成员: 领航者:张旭 驾驶员:张国庆 项目简介: 项目名称:基于B/S模式的黄金点游戏 采用技术: 后端:Python + Sqlite3 前端:HTML + CSS + JS + BootStrap 项目源码:https://git.coding.net/netcon/gold-dot.git 项目地址:http://gd.conw.net/(点击试玩) 服务器环境:Ubuntu Server 14.04 + Nginx 1.4.6 + uWSGI 2.0.14 二.使用 游戏介

结对编程-黄金点游戏之旅[一]

黄金点游戏 游戏描述:黄金点游戏是一个数字小游戏,其游戏规则是N个同学(N通常大于10),每人写一个0-100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值.提交的数字最靠近G(取绝对值)的同学得到N分,离G最远的同学得到-2分,其他同学得0分.玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动. 游戏机制设计:采用B/S模式,由客户端发起请求参加游戏,服务端接收请求处理,当满足游戏结算条件的时候向客户

结对编程-黄金点游戏之旅[四]

(游戏已上线,更多信息请戳底部链接▼) <--戳这个链接也会跳的哦, 了解游戏规则戳这里-->游戏规则 我的队友: 张波(进入博客请戳底部链接) 性格开朗,人很随和,不想写代码的时候都是他主动拉着我去写的,工作认真负责,有分歧的地方或者逻辑不顺的地方我们都会仔细讨论 主要负责写后台的业务逻辑,登陆.注册.开始游戏等小功能的后台代码 遵照代码规范.每次他写完后我都会做Code Review,虽然没有自动化测试,没有性能分析,但是我会单步调试,分析每一行代码的逻辑和作用 我: 李洋洋 主要负责前端

2048小游戏-JS实现(BUG调试中)

刚刚学习JS的菜鸟,游戏没有实现滑动效果.希望有前辈能指点一下······ 定义的主要方法: 1.fuzhi()生成一对随机数,然后根据这对随机数取得一个随机单元格,先判断其是否为空,不为空,对其进行赋值为2的操作:为空,则再次调用fuzhi(). 2.secai()遍历表格,根据单元格的数值改变单元格的背景颜色. 3.score()遍历单元格,计算实时总得分. 4.keyDown()主要方法,根据用户按上下左右键来进行不同的数值相加.消除动作.这一段代码写得很冗余····· 1 <!DOCTY

消除类游戏(js版)

原文:消除类游戏(js版) 最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码总共456行,未经过严格测试 1 <html lang="zh-CN"> 2 <head> 3 <meta charset="utf-8"> 4 <meta http-equiv="X-UA-Compatible&qu

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t

springmvc如何访问到静态的文件,如jpg,js,css

如何你的DispatcherServlet拦截"*.do"这样的有后缀的URL,就不存在访问不到静态资源的问题. 如果你的DispatcherServlet拦截"/",为了实现REST风格,拦截了所有的请求,那么同时对*.js,*.jpg等静态文件的访问也就被拦截了. 要解决这个问题. 目的:可以正常访问静态文件,不可以找不到静态文件报404. 方案一:激活Tomcat的defaultServlet来处理静态文件 <servlet-mapping> &l

平台建设-JS/CSS

学的几个JS/CSS: 生成html时注入变量 $.formatString('<button type="button" onClick="clickEdit(\'{0}\')" class="btn btn-success">修改</button>',val.id) $.formatString = function(str) { for ( var i = 0; i < arguments.length - 1