软工课设-第11-12周工作内容总结

最新推荐文章于 2021-07-27 08:42:56 发布

原创最新推荐文章于 2021-07-27 08:42:56 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

一、开发工具及实现方法

选择Myeclipse2019进行开发，配置：jdk1.8、tomcat8.5
实现方法：html+css+js

二、项目进展及描述

1、前几周的开发使用python完成了ui界面
2、应课设要求拓展该项目（使用Java开发）：
（1）编写一个页面实现黄金点游戏
（2）利用Echarts对G值进行可视化
（3）改变游戏规则
（4）建立一个响应式登录界面
（5）如果可以，在登录上再加入微信扫码功能或者开发微信平台进行开发
PS：因为游戏本身没有太大的可变性和延展性，所以我们决定把登录界面做的高大上一点。

三、前端游戏页面的简单实现

下面展示 界面（html+css）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<title>黄金点游戏</title>
</head>
<body background="1.jpg">

<div>
<font color="black" size="+2">
黄金点游戏规则：N个同学（N通常大于10），每人写一个0-100之间的有理数 (不包括0或100)，交给裁判，裁判算出所有数字的平均值，然后乘以0.618（所谓黄金分割常数），得到G值。提交的数字最靠近G（取绝对值）的同学得到N分，离G最远的同学得到－2分，其他同学得0分
</font>
<font color="red" size="+2">(刷新以重新开始游戏)</font>
<br/>
<br/>
<table width="500" border="0" align="center">
  <tr>
    <td>
<font color="black" size="+2">
输入人数：<input type="text" id="mans" value=" " /><br/>
输入轮数：<input type="text" id="times" value=" " />
<button onclick="numClick()">开始游戏</button>
<button onclick="getHis()">历史输入</button>
<button onclick="getChart()">柱状图</button>
<button onclick="getChart1()">折线图</button>
</font>
 <br/><br/>
 <font color="black" size="+1.8">
<div id="Champion"></div>
 <br/>
<div id="box1"></div>
<br/>
<div id="long"></div>
<br/>
<div id="close"></div>
<br/>
<div id="final"></div>
<br/>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</font>
</td>
  </tr>
</table>
</div>
</body>
</html>

下面展示 游戏功能（js）

var his=[];//历史输入
var gb= new Array();//存放G值

function numClick()
{
    myVal=parseInt(document.getElementById("times").value);
    name=parseInt(document.getElementById("mans").value);
    var save=[];
    var sum=0;
    var num=0;
    var reg = new RegExp("^[0-9]*$");//验证数字的正则表达
    if(myVal==''||!reg.test(myVal)||name==''||!reg.test(name)){
    	document.getElementById('Champion').innerHTML="输入错误，请检查输入是否为正整数！";
    }
    else{
    	document.getElementById('Champion').innerHTML="";
    	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"));
            	while(num==''||!isNumber(num))
            	{
            		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/><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]+=parseInt(name);
                    document.getElementById('close').innerHTML +="玩家"+i+"   .";
                    
                }
            }
            document.getElementById('box1').innerHTML +="第"+s+"轮G值："+sum+"<br/>";
            gb[s-1]=sum;
            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+"获胜！   .";
        	}
    	}
    }
}
function getHis()
{
	if(his[0]!=[])
	{
		document.getElementById('Champion').innerHTML="";
		document.getElementById('box1').innerHTML="";
		document.getElementById('long').innerHTML="";
		document.getElementById('close').innerHTML="";
		document.getElementById('final').innerHTML="";
		document.getElementById('Champion').innerHTML=his[0];
	}
	else
	{
		document.getElementById('Champion').innerHTML="无历史输入记录";
	}
	
}
function isNumber(val){//判断是否为非负浮点数

    var regPos = /^\d+(\.\d+)?$/; //非负浮点数
    //var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
    if(regPos.test(val)){
        return true;
    }else{
        return false;
    }

}

开始游戏

历史输入

下面展示 柱状图和折线图（Echarts）

function getChart()
{
	var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '柱状图'
            },
            tooltip: {},
            legend: {
                data:['G值']
            },
            xAxis: {
                data: ["第1轮","第2轮","第3轮","第4轮","第5轮","第6轮","第7轮","第8轮","第9轮","第10轮"]
            },
            yAxis: {},
            series: [{
                name: 'G值',
                type: 'bar',
                data: [gb[0], gb[1], gb[2], gb[3], gb[4], gb[5], gb[6], gb[7], gb[8], gb[9]]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
}
function getChart1()
{
	 var option = {
        title:{
            text:'折线图'
        },
        tooltip:{},
        legend:{
            data:['G值']
        },
        xAxis:{
            data:["第1轮","第2轮","第3轮","第4轮","第5轮","第6轮","第7轮","第8轮","第9轮","第10轮"]
        },
        yAxis:{
        },
        series:[{
            name:'G值',
            type:'line',
            areaStyle: {
                normal: {}
            },
            data:[gb[0], gb[1], gb[2], gb[3], gb[4], gb[5], gb[6], gb[7], gb[8], gb[9]]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
}