2019上期第四周学习

最新推荐文章于 2024-03-29 16:25:46 发布

hallodyc

最新推荐文章于 2024-03-29 16:25:46 发布

阅读量457

点赞数

本文链接：https://blog.csdn.net/hollp_to/article/details/101199227

版权

通过上课的学习我们实现了猜数字的小游戏。这个是通过Tomcat上面的实现效果，自己做的一个web网页小游戏。通过这个小游戏，我们知道了如何将JSP转化成JS
最后的代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Number Guess Game</title>
</head>
<body>
<p id="prompt"></p>
<span id="tt">I'm thinking of a number between 1 and 100.</span><br/>
<form id="frmNumGuess" method="get">
    What's your guess?
    <input type="text" name="num">
    <input type="submit" value="submit">
</form>
<%
    // 猜测目标
    int target = 0;
    if (session.getAttribute("target") == null) {
        // 产生[1, 100]之间随机整数作为猜测目标
        target = (int)(Math.random() * 100) + 1;
        // 将猜测目标随机整数存放到session里
        session.setAttribute("target", target);
    } else {
        // 从session里获取猜测目标随机整数
        target = (int) session.getAttribute("target");
    }

    // 猜测次数
    int count = 0;
    if (session.getAttribute("count") == null) {
        // 在session里创建count属性
        session.setAttribute("count", 0);
    } else {
        // 从session里取出count属性值
        count = (int) session.getAttribute("count");
    }

    // 提示信息
    String message = "";
    try {
        // 获取用户猜的数字
        int num = Integer.parseInt(request.getParameter("num"));
        // 将用户猜测的数字与猜测目标进行比较
        if (num > target) {
            count++;
            // 将猜测次数写入session
            session.setAttribute("count", count);
            if (count > 1) {
                message = "Good guess, but nope. Try <b>lower</b>. You have made " + count + " guesses.";
            } else {
                message = "Good guess, but nope. Try <b>lower</b>. You have made " + count + " guess.";
            }
        } else if (num < target) {
            count++;
            // 将猜测次数写入session
            session.setAttribute("count", count);
            if (count > 1) {
                message = "Good guess, but nope. Try <b>higher</b>. You have made " + count + " guesses.";
            } else {
                message = "Good guess, but nope. Try <b>higher</b>. You have made " + count + " guess.";
            }
        } else {
            count++;
            message = "Congratulations! You got it. And after just " + count + " tries.<br/>" +
                    "Care to <a href='numguess.jsp'>try again</a>?";
            // 删除session里的猜测目标与猜测次数
            session.removeAttribute("target");
            session.removeAttribute("count");
        }
    } catch (NumberFormatException e) {
        System.err.println("error: " +e.getMessage());
    }
%>
<script>
    var message = "<%= message %>";
    var prompt = document.getElementById("prompt");
    if (message.charAt(0) == "C") {
        document.getElementById("tt").hidden = true;
        document.getElementById("frmNumGuess").hidden = true;
    }
    prompt.innerHTML = message;
</script>
</body>
</html>

实现的效果如下在这里插入图片描述