阶段开发概述
本阶段开发完成了以下功能：
1、进行游戏：玩家输入名字（设有默认值）数字（数字隐藏显示为•，并强制要求输入），并通过计算得出黄金点和赢家，然后可进行下一局（可无限进行）
2、游戏存档：每一局完成后将每位玩家的数字和每局的黄金点和赢家存入数据库
3、查看游戏记录：可以分别查看每位玩家在每一局游戏输入的数字和每局的黄金点和赢家，并且可以按照制定的分类标准（场次或玩家）进行查看
4、继续游戏：在重新启动应用后，可以从数据库中获取以前游戏的信息，并自动给出相应数量的输入框
5、新游戏：提示用户输入玩家数量（必填，玩家数量理论上可覆盖整个int范围），从数据库中删除原有信息，并在游戏界面显示相应数量的输入框
开发成果展示
测试实例1：继续游戏
（在之前已经进行过两位玩家的游戏并关闭应用，此时重新打开应用）
首页，点击继续
介绍游戏规则，点击继续游戏
从数据库中获取到上一次是两位玩家进行游戏的，于是显示两组输入框，玩家名默认
如果未输入就点击完成，则提示必须填写
玩家输入数字，数字被屏蔽，输入完后点击完成
完成此局游戏，显示黄金点和赢家，点击下一回合
进行下一次游戏（理论上可无限次进行），点击历史记录
查看历史记录，可选择查看每位玩家在每一局游戏输入的数字或每局的黄金点和赢家
查看每局游戏的结果
查看详细的输入记录（可按玩家或场次分类）
测试实例2：新游戏
游戏首页和规则介绍功能同上
提示输入玩家数量（理论上可覆盖整个int的范围），点击确定之后之前的游戏记录将会被删除
根据输入的玩家数量给出相应的输入框
其他功能同上
技术介绍及核心代码
首页
在上一篇博客中已介绍，这里不赘述
游戏规则
在上一篇博客中已介绍，这里不赘述
新游戏
new_game.jsp
通过form表单向后传递参数玩家数量uer_num
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<h1 align="center">黄金点游戏</h1>
<div align="center">
<form id="add_user_num" name="add_user_num" action="gaming.jsp">
请输入玩家数量： <input type="number" id="user_num" name="user_num" value="" required>
<input type="submit" value="确定" onclick="window.location.href='gaming.jsp'" />
</form>
</div>
<div align="right">
<input type="button" value="返回" onclick="window.location.href='instruction.jsp'"/>
</div>
</body>
</html>
进行游戏
gaming.jsp
首先链接数据库，并通过request.getParameter()获取uer_num参数，如果获取的user_num不等于null，则说明从前面的jsp传来了玩家数量参数，是“新游戏”，则通过sql语句删除之前记录的详细信息表gaming和结果表outcome中的记录；如果获取的user_num等于null，则说明从前面的jsp没有传来玩家数量参数，即为“继续游戏”，则从数据库gaming表中通过sql语句计算玩家数量。然后根据两个分支得到的玩家数量，通过循环显示出相应数量的输入框。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page
import="java.sql.*,java.io.*,java.util.ArrayList,java.lang.Math,java.lang.Integer"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>黄金点游戏</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
int user_num = 0;
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException classnotfoundexception) {
classnotfoundexception.printStackTrace();
}
//out.println("加载了JDBC驱动");
System.out.println("加载了JDBC驱动");
//然后链接数据库，开始操作数据表
try {
Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/mydb?user=DataUser&password=1q2w3e&useUnicode=true&characterEncoding=UTF-8");
System.out.println("准备statement。");
Statement statement = conn.createStatement();
System.out.println("已经链接上数据库！");
//out.println("Connect Database Ok！！！<br>");
String user1 = request.getParameter("user_num");
if (user1 != null) {
statement.executeUpdate("delete from game");
statement.executeUpdate("delete from outcome");
Integer users = Integer.parseInt(user1);
user_num = users.intValue();
System.out.println(user1);
System.out.println("操作数据完毕，关闭了数据库！user=" + user_num);
} else {
ResultSet rs = statement.executeQuery("select count(*) from game group by term");
rs.next();
user_num = rs.getInt("count(*)");
statement.close();
conn.close();
//out.println("Database Closed！！！<br>");
System.out.println("操作数据完毕，关闭了数据库！user=" + user_num);
}
} catch (SQLException sqlexception) {
sqlexception.printStackTrace();
}
//out.println("页面执行完毕！");
System.out.println("页面执行完毕！");
%>
<h1 align="center">黄金点游戏</h1>
<br>
<div align="center" style="margin:50px;border:2px solid;">
<form id="add_num" name="add_num" action="add_ok.jsp">
<table>
<thead>
<tr>
<th>玩家</th>
<th>数字</th>
</tr>
</thead>
<%
for (int i = 0; i < user_num; i++) {
out.print(
"<tr><td><input type='text' id='user' name='user' value='玩家"+i+"' required ></td><td><input type='password' id='num' name='num' value='' required></td></tr>");
}
%>
<tr>
<td><input type="button" name="record" value="历史记录"
onclick="window.location='history.jsp'">
<td><input type="submit" name="submit_btn" value="完成"></td>
</tr>
</table>
</form>
</div>
<div align="right">
<input type="button" value="结束游戏" onclick="window.location.href='index.jsp'"/>
</div>
</body>
</html>
历史记录入口
在上一篇博客中已介绍，这里不赘述
结果记录
record_list2.jsp
显示界面框架和调用javascript
<%@page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<meta charset="utf-8" />
<title>记录</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 align="center">黄金点游戏</h1>
<div align="center" style="margin:50px;border:2px solid;">
<table class="table table-striped table-bordered table-hover datatable" id="record_list">
<thead>
<tr>
<th>场次</th>
<th>黄金点数</th>
<th>赢家</th>
</tr>
</thead>
</table>
</div>
<div style="margin:50px;"><input type="button" name="listBtn" value="返回游戏" onclick="window.location='gaming.jsp'"></div>
</body>
</html>
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.uniform.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script src="record_list2.js" type="text/javascript"></script>
record_list2.js
jQuery(document).ready(function() {
Record.init();
});
/* ================================================================================ */
var MyPage = function() {
var initPageStyle = function() {
$(".page-content-single").css("background-color","#fff");
$(".page-content-single").css("margin-left","0px");
$(".page-content-single").css("margin-top","0px");
$(".page-content-single").css("min-height","600px");
$(".page-content-single").css("padding","25px 20px 10px 20px");
}
return {
init: function() {
initPageStyle();
initLeftMenu("gis");
}
};
}();
var Record = function() {
var html="";
var initRecordStyle = function() {
};
var initRecordList=function(){
$('.datatable').dataTable( {
"paging":true,
"searching":false,
"oLanguage": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"sProcessing": "处理中...",
"sLengthMenu": "_MENU_ 记录/页",
"sZeroRecords": "没有匹配的记录",
"sInfo": "显示第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项记录，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项记录过滤)",
"sInfoPostFix": "",
"sSearch": "过滤:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
}
},
"aoColumns": [{},{},{}],
"aLengthMenu": [[5,10,15,20,25,40,50,-1],[5,10,15,20,25,40,50,"所有记录"]],
"fnDrawCallback": function(){$(".checkboxes").uniform();$(".group-checkable").uniform();},
//"sAjaxSource": "get_record.jsp"
"sAjaxSource": "get_record2.jsp?device_id=001"
});
$('.datatable').find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
$('.datatable').on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
}
return {
init: function() {
initRecordList();
initRecordStyle();
}
};
}();
get_record2.jsp
链接数据库，通过sql语句从数据表中查询，然后再将查询结果通过json返回
<%@page contentType="text/html; charset=UTF-8" language="java"
import="java.text.*,org.json.JSONObject,java.util.ArrayList,java.io.PrintWriter"
import="java.util.HashMap,java.util.List,java.sql.*,java.util.Map,java.io.IOException"%>
<%
String action=request.getParameter("action");
String deviceId=request.getParameter("device_id");
System.out.println("获得的参数是：action="+action+",device_id="+deviceId);
//开始查询数据库
List jsonList = new ArrayList();
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException classnotfoundexception) {
classnotfoundexception.printStackTrace();
}
try {
//注意：数据表确保在mydb数据库下面，如果没有就导入进去，或者放在自己建的数据库，下面的mydb相应要修改
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb?user=DataUser&password=1q2w3e&useUnicode=true&characterEncoding=UTF-8");
Statement statement = conn.createStatement();
System.out.println("连接数据库Ok！！！");
String sql="select * from outcome order by term";
System.out.println("构造出来的sql语句是：??? "+sql);
ResultSet rs = statement.executeQuery(sql);
while (rs.next()) {
List list = new ArrayList();
list.add(Integer.toString(rs.getInt("term")));
list.add(Double.toString(rs.getDouble("goldpoint")));
list.add(rs.getString("winner"));
jsonList.add(list);
}
statement.close();
conn.close();
System.out.println("数据库关闭了！！！");
} catch (SQLException sqlexception) {
sqlexception.printStackTrace();
}
//数据库查询完毕，得到了json数组jsonList//
//jsonList.clear();
//下面开始构建返回的json
JSONObject jsonObj=new JSONObject();
jsonObj.put("aaData",jsonList);
jsonObj.put("action",action);
jsonObj.put("result_msg","ok"); //如果发生错误就设置成"error"等
jsonObj.put("result_code",0); //返回0表示正常，不等于0就表示有错误产生，错误代码
System.out.println("最后构造得到的json是："+jsonObj.toString());
response.setContentType("text/html; charset=UTF-8");
try {
response.getWriter().print(jsonObj);
response.getWriter().flush();
response.getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
System.out.println("返回结果给调用页面了。");
%>
详细记录
代码与“结果记录”差不多
record_list.jsp
显示界面框架和调用javascript
<%@page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<meta charset="utf-8" />
<title>记录</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 align="center">黄金点游戏</h1>
<div align="center" style="margin:50px;border:2px solid;">
<table class="table table-striped table-bordered table-hover datatable" id="record_list">
<thead>
<tr>
<th>场次</th>
<th>玩家</th>
<th>数字</th>
</tr>
</thead>
</table>
</div>
<div style="margin:50px;"><input type="button" name="listBtn" value="返回游戏" onclick="window.location='gaming.jsp'"></div>
</body>
</html>
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.uniform.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script src="record_list.js" type="text/javascript"></script>
record_list.js
jQuery(document).ready(function() {
Record.init();
});
/* ================================================================================ */
var MyPage = function() {
var initPageStyle = function() {
$(".page-content-single").css("background-color","#fff");
$(".page-content-single").css("margin-left","0px");
$(".page-content-single").css("margin-top","0px");
$(".page-content-single").css("min-height","600px");
$(".page-content-single").css("padding","25px 20px 10px 20px");
}
return {
init: function() {
initPageStyle();
initLeftMenu("gis");
}
};
}();
var Record = function() {
var html="";
var initRecordStyle = function() {
};
var initRecordList=function(){
$('.datatable').dataTable( {
"paging":true,
"searching":false,
"oLanguage": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"sProcessing": "处理中...",
"sLengthMenu": "_MENU_ 记录/页",
"sZeroRecords": "没有匹配的记录",
"sInfo": "显示第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项记录，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项记录过滤)",
"sInfoPostFix": "",
"sSearch": "过滤:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
}
},
"aoColumns": [{},{},{}],
"aLengthMenu": [[5,10,15,20,25,40,50,-1],[5,10,15,20,25,40,50,"所有记录"]],
"fnDrawCallback": function(){$(".checkboxes").uniform();$(".group-checkable").uniform();},
//"sAjaxSource": "get_record.jsp"
"sAjaxSource": "get_record.jsp?device_id=001"
});
$('.datatable').find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).attr("checked", false);
$(this).parents('tr').removeClass("active");
}
});
jQuery.uniform.update(set);
});
$('.datatable').on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
}
return {
init: function() {
initRecordList();
initRecordStyle();
}
};
}();
get_record.jsp
链接数据库，通过sql语句从数据表中查询，然后再将查询结果通过json返回
<%@page contentType="text/html; charset=UTF-8" language="java"
import="java.text.*,org.json.JSONObject,java.util.ArrayList,java.io.PrintWriter"
import="java.util.HashMap,java.util.List,java.sql.*,java.util.Map,java.io.IOException"%>
<%
String action=request.getParameter("action");
String deviceId=request.getParameter("device_id");
System.out.println("获得的参数是：action="+action+",device_id="+deviceId);
//开始查询数据库
List jsonList = new ArrayList();
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException classnotfoundexception) {
classnotfoundexception.printStackTrace();
}
try {
//注意：数据表确保在mydb数据库下面，如果没有就导入进去，或者放在自己建的数据库，下面的mydb相应要修改
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb?user=DataUser&password=1q2w3e&useUnicode=true&characterEncoding=UTF-8");
Statement statement = conn.createStatement();
System.out.println("连接数据库Ok！！！");
String sql="select * from game order by term";
System.out.println("构造出来的sql语句是：??? "+sql);
ResultSet rs = statement.executeQuery(sql);
while (rs.next()) {
List list = new ArrayList();
list.add(Integer.toString(rs.getInt("term")));
list.add(rs.getString("user"));
list.add(Double.toString(rs.getDouble("num")));
jsonList.add(list);
}
statement.close();
conn.close();
System.out.println("数据库关闭了！！！");
} catch (SQLException sqlexception) {
sqlexception.printStackTrace();
}
//数据库查询完毕，得到了json数组jsonList//
//jsonList.clear();
//下面开始构建返回的json
JSONObject jsonObj=new JSONObject();
jsonObj.put("aaData",jsonList);
jsonObj.put("action",action);
jsonObj.put("result_msg","ok"); //如果发生错误就设置成"error"等
jsonObj.put("result_code",0); //返回0表示正常，不等于0就表示有错误产生，错误代码
System.out.println("最后构造得到的json是："+jsonObj.toString());
response.setContentType("text/html; charset=UTF-8");
try {
response.getWriter().print(jsonObj);
response.getWriter().flush();
response.getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
System.out.println("返回结果给调用页面了。");
%>
阶段计划
下一阶段开发内容：
1、对输入进行检查，比如要求输入玩家数量时只能输入正整数，玩家给出的数字只能是0~100的浮点数等
2、对异常事件的处理，比如当数据库链接失败，跳转到专门的提示页面
3、界面的美化与多媒体的嵌入
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
