web系统之猜数游戏——项目总结

作者：钟华

项目需求

项目雏形

基于数据查找的二分查找法开发的小游戏。

开发环境

JDK-Version:1.8

Tomcat-Version:8.0

开发工具

Eclipse Java EE IDE for Web Developers.

Version: Mars.1 Release (4.5.1)

开发需求

系统自动生成一个[1-100]的随机数。
从键盘获取用户输入的数字。
比较生成的随机数与用户输入的数字的大小。
分情况进行页面跳转：
1. 随机数 = 用户输入数 --> 成功界面
  1. 随机数 > 用户输入数 --> 重试界面1
  2. 随机数 < 用户输入数 --> 重试界面2
成功界面：输出游戏成功提示，设置再玩一次的按钮并跳转至首页。
重试界面1：输出猜数结果偏小提示，设置输入框及再试一次的按钮。
重试界面2：输出猜数结果偏大提示，设置输入框及再试一次的按钮。
以web程序为开发目标。

项目开发

开发步骤

创建工程：new project
导包：jstl-1.2.jar 和 standard-1.1.2.jar
在WebContent里面新建jsp文件并命名为inputGuess.jsp

inputGuess.jsp文件代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏首页面</title>
<script>var user = document.getElementById("d1");
</script>
<style type="text/css">
#div1 {background-image: linear-gradient(#55aaff, #45ddff);width: 100%;height: 100%;background-repeat: no-repeat;background-position: left top;position: relative;display: flex;justify-content: center;
}#div2 {background-image: linear-gradient(#e1e1e1, #c3c3c3);width: 100%;height: 100%;border-radius: 10px 40px 10px 40px;box-shadow: 5px 5px 5px #868686;position: absolute;top: 10%;left: 30%;margin: auto;height: 100%;justify-content: center;
}.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 40px;
}.button:hover {background-color: #45DDFF;
}#input {position: absolute;top: 270px;width: 300px;display: flex;justify-content: center;
}#button {position: absolute;top: 300px;width: 300px;display: flex;justify-content: center;
}.div {position: absolute;top: 0;bottom: 0;margin: auto;height: 100%;display: flex;justify-content: center;text-align: center;
}
</style>
</head>
<body><%int number = (int) (Math.random() * 100) + 1;session.setAttribute("count", new Integer(0));session.setAttribute("num", new Integer(number));%><div id="div1" style="width: 1300px; height: 700px;"><div id="div2" style="width: 300px; height: 400px;"><div class="div" style="width: 300px; top: 0;"><h1>猜数字游戏</h1></div><div class="div" style="width: 300px; top: 150px;"><div style="width: 40px;"></div><div style="width: 220px;"><a style="color: grey; font-color: blue;">游戏规则：系统随机生成1到100之间的一个数，请你猜这个数。如果猜中系统将会提示你猜测成功，如果不幸猜错，系统将会提示你猜大或猜小， 直到你猜出正确答案为止，祝你玩得开心！</a></div><div style="width: 40px;"></div></div><div class="div" style="width: 300px; top: 420px;"><h4>请输入你的数字：</h4></div><form name="inputGuess" method="post" action="GuessServlet"><div id="input"><input type="text" id="d1" name="inputGuess" required /></div><div id="button"><input class="button" type="submit" value="进行游戏" /></div></form></div></div></body>
</html>

代码详解

利用jstl驱动包在jsp页面中用java语言生成[0-100]的随机数

用session.setAttribute方法将生成的随机数num和计数器count存入session域中

创建名为inputGuess的表单，用post传输方式发送到GuessServlet的java程序中

表单内容为用户输入name为inputGuess的数据，通过submit提交数据至GuessServlet

为防止提交空数据，添加input 的 document.getElementById方法，提示“这是必填字段”

在src里面新建servlet文件并命名为GuessServlet.java

GuessServlet.java代码如下：

package com.jy.HelloWorld;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import org.apache.catalina.Session;/*** Servlet implementation class GuessServlet*/
@WebServlet("/GuessServlet")
public class GuessServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public GuessServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub//doGet(request, response);HttpSession session = request.getSession(false);String str = request.getParameter("inputGuess");int num1 = Integer.parseInt(str);//获取用户输入的数字session.setAttribute("num1", num1);String num = (request.getSession()).getAttribute("num").toString();int num2 = Integer.parseInt(num);//获取系统随机生成的数字session.setAttribute("num2", num2);String count = (request.getSession()).getAttribute("count").toString();int num3 = Integer.parseInt(count);//获取输入次数num3 ++;session.setAttribute("num3", num3);request.getSession().setAttribute("count",new Integer(num3));if(num1 == num2){response.sendRedirect("success.jsp");}else if(num1 > num2){response.sendRedirect("large.jsp");}else if(num1 < num2){response.sendRedirect("small.jsp");}  }
}

代码详解：

用request.getSession(false) 获取当前的session对象

用request.getParameter方法获取用户输入的表单信息，声明int类型变量num1，赋值

用request.getSession()方法获取当前域对象，用.getAttribute("num") 方法获取当前域中名为num的值，用.toString()方法将获取到的num值转为字符串格式，声明int类型变量num2，赋值

同上原理获取计数器count，声明int类型变量num3，赋值

用request.getSession(false)获取到的session对象，使用session.setAttribute方法将num1、num2、num3存入session域中

比较num1和num2的值，如果相等则重定向至success.jsp，如果num1>num2则重定向至large.jsp，如果num1<num2则重定向至small.jsp

5.在WebContent中新建jsp文件并命名为large.jsp和small.jsp

large.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏重试界面</title>
<style type="text/css">
#div1 {background-image: linear-gradient(#55aaff, #45ddff);width: 100%;height: 100%;background-repeat: no-repeat;background-position: left top;position: relative;display: flex;justify-content: center;
}#div2 {background-image: linear-gradient(#e1e1e1, #c3c3c3);width: 100%;height: 100%;border-radius: 10px 40px 10px 40px;box-shadow: 5px 5px 5px #868686;position: absolute;top: 10%;left: 30%;margin: auto;height: 100%;justify-content: center;
}.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 40px;
}.button:hover {background-color: #45DDFF;
}#input {position: absolute;top: 270px;width: 300px;display: flex;justify-content: center;
}#button {position: absolute;top: 300px;width: 300px;display: flex;justify-content: center;
}.div {position: absolute;top: 0;bottom: 0;margin: auto;height: 100%;display: flex;justify-content: center;text-align: center;
}
</style>
<script>var user = document.getElementById("di");
</script>
</head>
<body><div id="div1" style="width: 1300px; height: 700px;"><div id="div2" style="width: 300px; height: 400px;"><div class="div" style="width: 300px; top: 0;"><h1>猜错啦~</h1></div><div class="div" style="width: 300px; top: 250px;"><div style="width: 40px;"></div><div style="width: 220px;"><a style="color: grey; font-color: blue;"> 您输入的数字${num1}太大了！<br />您已输入${num3}次~ <br /> 请重新输入~ </a></div><div style="width: 40px;"></div></div><div class="div" style="width: 300px; top: 420px;"><h4>请输入你的数字：</h4></div><form action="GuessServlet" method="post" name="large"><div id="input"><input type="text" id="d1" name="inputGuess"  required /></div><div id="button"><input class="button" type="submit" value="再次尝试" /></div></form></div></div>
</body>
</html>

small.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏重试界面</title>
<style type="text/css">
#div1 {background-image: linear-gradient(#55aaff, #45ddff);width: 100%;height: 100%;background-repeat: no-repeat;background-position: left top;position: relative;display: flex;justify-content: center;
}#div2 {background-image: linear-gradient(#e1e1e1, #c3c3c3);width: 100%;height: 100%;border-radius: 10px 40px 10px 40px;box-shadow: 5px 5px 5px #868686;position: absolute;top: 10%;left: 30%;margin: auto;height: 100%;justify-content: center;
}.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 40px;
}.button:hover {background-color: #45DDFF;
}#input {position: absolute;top: 270px;width: 300px;display: flex;justify-content: center;
}#button {position: absolute;top: 300px;width: 300px;display: flex;justify-content: center;
}.div {position: absolute;top: 0;bottom: 0;margin: auto;height: 100%;display: flex;justify-content: center;text-align: center;
}
</style>
<script>var user = document.getElementById("di");
</script>
</head>
<body><div id="div1" style="width: 1300px; height: 700px;"><div id="div2" style="width: 300px; height: 400px;"><div class="div" style="width: 300px; top: 0;"><h1>猜错啦~</h1></div><div class="div" style="width: 300px; top: 250px;"><div style="width: 40px;"></div><div style="width: 220px;"><a style="color: grey; font-color: blue;"> 您输入的数字${num1}太小了！<br />您已输入${num3}次~ <br /> 请重新输入~ </a></div><div style="width: 40px;"></div></div><div class="div" style="width: 300px; top: 420px;"><h4>请输入你的数字：</h4></div><form action="GuessServlet" method="post" name="large"><div id="input"><input type="text" id="d1" name="inputGuess"  required /></div><div id="button"><input class="button" type="submit" value="再次尝试" /></div></form></div></div>
</body>
</html>

代码详解：

form表单提交再次输入的数据至GuessServlet

为防止提交空数据，添加input 的 document.getElementById方法，提示“这是必填字段”

用EL表达式获取session域的数据，前提是添加依赖<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

在WebContent中新建jsp文件并命名为success.jsp

success.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏成功界面</title>
</head>
<style type="text/css">
#div1 {background-image: linear-gradient(#55aaff, #45ddff);width: 100%;height: 100%;background-repeat: no-repeat;background-position: left top;position: relative;display: flex;justify-content: center;
}#div2 {background-image: linear-gradient(#e1e1e1, #c3c3c3);width: 100%;height: 100%;border-radius: 10px 40px 10px 40px;box-shadow: 5px 5px 5px #868686;position: absolute;top: 10%;left: 30%;margin: auto;height: 100%;justify-content: center;
}.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 40px;
}.button:hover {background-color: #45DDFF;
}#input {position: absolute;top: 270px;width: 300px;display: flex;justify-content: center;
}#button {position: absolute;top: 300px;width: 300px;display: flex;justify-content: center;
}.div {position: absolute;top: 0;bottom: 0;margin: auto;height: 100%;display: flex;justify-content: center;text-align: center;
}
</style>
</head>
<body><div id="div1" style="width: 1300px; height: 700px;"><div id="div2" style="width: 300px; height: 400px;"><div class="div" style="width: 300px; top: 0;"><h1>恭喜您！</h1></div><div class="div" style="width: 300px; top: 250px;"><div style="width: 40px;"></div><div style="width: 220px;"><a style="color: grey; font-color: blue;"> 您猜测完全正确！<br />您用了${num3}次猜测正确~<br /> 真棒呢~ </div><div style="width: 40px;"></div></div><div id="button"><a href="inputGuess.jsp"><input class="button" type="submit" value="再玩一次" /></a></div></div></div>
</body>
</html>

代码详解:

用href定向按钮“再玩一次”至首页

用EL表达式获取session域的数据，前提是添加依赖<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

项目总结

改进方式

用css文件将样式归总，减少代码冗余量

项目难点

数据没有存入session域中，导致跨页面无法请求

解决方案：在servlet文件中通过request.getSession(false) 方法获取当前的session对象，通过session.setAttribute方法将所需要数据存入session域中。
用户输入空值时报500错误

解决方案：用document.getElementById方法检验input输入框中的数据是否合格并加以提示，在input标签中添加required属性。
用EL表达式时需要提前添加依赖<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

web系统之猜数游戏——项目总结相关推荐

利用Python语言编程，完成猜数游戏，系统随机产生一个1到100的数字num1，用户输入一个数字guess，如果没有猜对，根据系统给出的提示重新猜数，直到才对为止。
利用Python语言编程,完成猜数游戏,系统随机产生一个1到100的数字num1,用户输入一个数字guess,如果没有猜对,根据系统给出的提示重新猜数,直到才对为止. 要求:(1)系统每次都要给出新的 ...
十四、Java练习：一个猜数游戏
@Author:Runsen @Date:2020/5/23 本专栏是付费学Java专栏,今天我做一个猜数游戏.将前面,我写的全部复习下. 其实,这个猜数游戏,也是我学Java中的学过的. 文章目录 ...
【免费毕设】ASP.NET猜数游戏的设计与开发(源代码+lunwen)
5系统测试 5.1运行情况 1．游戏欢迎界面用户进入游戏系统首先看到的界面,在此界面中可对游戏音乐播放的整曲音乐选择.音量大小等功能进行选择.点击此欢迎界面便能进入到下一个游戏设置界面系统. 3．游 ...
Java猜数游戏怎么验证_Java实现猜数游戏
利用Math.random()方法产生1~100的随机整数,利用JOptionPane.showInputDialog()方法产生一个输入对话框,用户可以输入所猜的数.若所猜的数比随机生成的数大,则显 ...
猜数游戏（实现）后附源码
亲爱的玩家,在初学C语言的阶段,您有没有预想过用C语言来实现一个猜数游戏呢? 如果有,请允许我来打开您的思路. 思路: 1.系统随机生成一个1--100的随机数,并在本轮游戏中不改变大小. 2.您可以 ...
猜数游戏（GAMBLER）
解题: 1.电脑要拿到一个用户不知道的数字 2.用户猜数,电脑告知数字大了,小了并在用户猜对后结束循环告知猜的次数(switch语句针对不同次数做出不同态度) 算法部分: 首先给电脑赋一个随机且有范围 ...
教你用python制作猜数游戏
大家好!我又回来了!今天我教大家怎样用python制作猜数游戏.在此之前我们先了解一下什么是python版猜数游戏. 了解 python版猜数游戏是指您先输入下限值与上限值,然后系统随机生成一个在此范 ...
李子的猜数游戏！！！！！epsilon1.0！
哈喽兄弟们!这里又是我的猜数游戏! 在经历了上一次的代码丢失之后,我痛定思痛,把猜数游戏用两年做了出来(痛,太痛了!) 那么,今天我们就来更新!不多比比,上代码!! #include<iostr ...
「C++小游戏教程」猜数游戏
0. 引言本章主要讲解如何做一个简易的猜数游戏,分为用户猜数和系统猜数. 前置芝士: 「C++小游戏教程」基本技巧(1)--随机化 1. 用户猜数系统想好一个在 [1,100][1,100][1, ...
C语言实现双人猜数游戏
C语言实现双人猜数游戏程序说明: 编写一个程序实现猜数字大小的游戏.由程序随机生成一个数字.玩家不断程序的提示下输入猜测的数字,然后游戏者在猜数,程序可实现连续猜数,直到游戏者退出. 程序输出要求: ...

web系统之猜数游戏——项目总结

web系统之猜数游戏——项目总结

作者：钟华

项目需求

项目雏形

开发环境

开发工具

开发需求

项目开发

开发步骤

项目总结

改进方式

项目难点

web系统之猜数游戏——项目总结相关推荐

最新文章

热门文章