您的位置：首页 > Web前端 > JavaScript

作业4 猜数字游戏jsp

2014-04-14 23:48 465 查看

实验类型：验证性

实验目的：掌握JSP语法、JSP内置对象

实验内容：

编写JSP程序，完成以下功能：
1. 编写login.jsp，登录时只输入一个昵称。但要检查昵称是否已经被其他用户使用。
2. 编写game.jsp, 每次游戏程序随机产生一个0-9之间的整数，要求玩家输入自己猜的数字，并对用户输入数字进行检查，进行如下提示：
(1)如果用户猜对了，则提示：恭喜你，猜对了。结束本次游戏。
(2)如果用户猜错了，则提示：你猜的数字太（大或小）了。要求用户继续猜。
如果连续3次没有猜对，则提示：游戏失败。
一次游戏结束时，将用户本次猜数字情况记入“排行榜”。
然后询问用户是否继续新的游戏，果用户选择继续，则开始新一次游戏，
3. 排行榜页面，显示所有参加游戏的用户的游戏情况。
昵称游戏次数成功次数
ABC 10 8
XYX 11 7
.......
4. 必须登录后才能进入游戏页面，而进入登录页面和排行榜页面，无须登录。
5. 提示，排行榜数据结构应该放在application中，用户登录状态放在session中。
提交要求：打包为学号-job4.war文档，其中要包含源程序文件。

界面：

运用到js、application、session，localStorage，界面用到部分css3的，Ajax的得学。

记录下一些比较有用的：

1：实现登录处理，看看用户昵称是否使用过：

<%

request.setCharacterEncoding("UTF-8"); //设置编码

String username = request.getParameter("username"); //获取用户名

int flag=0;

//判断用户是否登录过

//application.removeAttribute("LOGINED_USER");

List loginedUsers = new ArrayList();

if (application.getAttribute("LOGINED_USER") != null) {

loginedUsers = (List) application.getAttribute("LOGINED_USER");

for (int i = 0; i < loginedUsers.size(); i++) {

User loginedUser = (User) loginedUsers.get(i);

if (loginedUser.getUsername().equals(username))//存在过，

{

flag=1;

out.print("<script>alert('此昵称已有人使用过！请重新输入');location.href='login.jsp';</script>");

// response.sendRedirect("login.jsp");

}

}

if(flag==0){

User newUser = new User(username, 0, 0);

loginedUsers.add(newUser);

newUser.add(newUser);

session.setAttribute("LOGINED_USER", newUser);

session.setAttribute("username", username);//存储用户名，方便检测

application.setAttribute("LOGINED_USER", loginedUsers);

response.sendRedirect("game.jsp");

}

}

if (application.getAttribute("LOGINED_USER") == null) {

User newUser = new User(username, 0, 0);

loginedUsers.add(newUser);

newUser.add(newUser);

session.setAttribute("LOGINED_USER", newUser);

session.setAttribute("username", username);//存储用户名，方便检测

application.setAttribute("LOGINED_USER", loginedUsers);

response.sendRedirect("game.jsp");

}

%>

2：在登录页面、游戏页面和排行榜页面，检测下用户是否登录，若无登录，则跳转到登录界面，为了减少代码的冗余性，可将此部分抽离到一个jsp文件中，然后在不同的文件中include下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.wgh.User"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>降低代码冗余，修改共性内容</title>
</head>
<body>
<%
User user=(User) session.getAttribute("LOGINED_USER");
if(user==null)
response.sendRedirect("login.jsp");
String username=(String)session.getAttribute("username");
if(username==null)
response.sendRedirect("login.jsp");
%>
</body>
</html>

3：localStorage存储本地用户名，并检测不重复（虽然实验这个是多余的，但此功能可以保留以后有用途），此处也涉及到怎么用js创建新元素li：

window.onload = init;
function showUser() {
}
function save(item) {
var userArray = getStoreArray("username");
userArray.push(item);
localStorage.setItem("username", JSON.stringify(userArray));
}
function load(item) {
var getKey = localStorage.key(localStorage.length - 1);
var user = localStorage.getItem(getKey);
return user;
}
function localUserlist() {
var userArray = getSavedNames();
var ul = document.getElementById("userAlready");
if (userArray != null) {
for (var i = 0; i < userArray.length; i++) {
var li = document.createElement("li");
li.innerHTML = userArray[i];
ul.appendChild(li);
}
}
}
function getSavedNames() {
return getStoreArray("username");
}
function getStoreArray(key) {
var userArray = localStorage.getItem(key);
if (userArray == null || userArray == "") {
userArray = new Array();
} else {
userArray = JSON.parse(userArray);
}
return userArray;
}
function init() {
// localStorage.clear(); //清除本地存储的全部数据
var loginButton = document.getElementById("login-button");
loginButton.onclick = handleButtonClick;
localUserlist();
}
/*
* 这是ranklist.jsp的初始显示页面的内容，意在显示所有用户的排行榜情况
*/
function initRanklist() {
// localStorage.clear(); //清除本地存储的全部数据
var gameplayer = document.getElementById("username").innerHTML;
document.getElementById("userNum").innerHTML = parseInt(localStorage
.getItem("username").length - 1);
localUserlist();
}
/*
* handleButtonClick()函数用于在初始登录界面中的昵称判断 若昵称已存在，则提醒用户重新输入；
* 若昵称是新使用的，则调用save()函数将其存入本地，并跳转页面至游戏界面
*/
function handleButtonClick() {
var textInput = document.getElementById("username");
var names = textInput.value;
var flag = 1;
var ul = document.getElementById("userAlready");
var liArray = ul.getElementsByTagName("li");
var lis = liArray.length;
var li = document.createElement("li");
li.innerHTML = names;
ul.appendChild(li);
save(names);
}

Author:June

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航