作业4 猜数字游戏jsp

实验类型:验证性

实验目的:掌握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文档,其中要包含源程序文件。


界面:

作业4 猜数字游戏jsp_第1张图片

作业4 猜数字游戏jsp_第2张图片

作业4 猜数字游戏jsp_第3张图片

运用到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


你可能感兴趣的:(作业4 猜数字游戏jsp)