web系统之猜数游戏系统之猜数游戏——项目总结项目总结
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
随机数 重试界面2
成功界面 :输出游戏成功提示,设置再玩一次的按钮并跳转至首页。
重试界面1:输出猜数结果偏小提示,设置输入框及再试一次的按钮。
重试界面2:输出猜数结果偏大提示,设置输入框及再试一次的按钮。
以web程序为开发目标。
项目开发项目开发
开发步骤开发步骤
创建工程:new project
导包:jstl-1.2.jar 和 standard-1.1.2.jar
在WebContent里面新建jsp文件并命名为inputGuess.jsp
inputGuess.jsp文件代码如下:
var user = document.getElementById("d1");
#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;