成语接龙 servlet+jsp+Tomcat_jsp实现成语接龙-CSDN博客

本文链接：https://blog.csdn.net/weixin_75174766/article/details/143190178

今天分享一下成语接龙的小游戏,用到的技术栈servlet+jsp+一点点json

感兴趣的老铁可以看看

效果视频: 成语接龙演示-CSDN直播可以先看看

效果图:

一、前期准备

1.tomcat下载(我这里就不说tomcat的配置了)

2.maven的下载,(我这里也不说maven的配置了)

3.成语接龙的词库

成语词库点击进去(打开速度可能比较慢,耐心等待) 点右下方的 Download ZIP 下载保存之后

找到里面的 idiom.json 就是我们要用的成语词库

词库准备好了,那就和我一起开始吧

二、idea配置

先建立一个Maven模块生成器选 Maven 然后右边那个Archetype 选后缀是webapp 的(Maven一定要提前弄好,csdn有教程,我就不细说了)

在pom.xml引入这两个配置,主要是操作json(刚才的那个词库) 导入后一定要刷新

引入tomcat

点+号选 tomcatEE 本地服务器然后右边我电脑是edge浏览器自己选自己电脑的

然后点部署 ,点+号,选择工件导入下面的这个然后 apply OK

OK,tomcat就部署好了那个框里看见tomcat就好了

运行看一下,OK显示了就好了,这个是我们 index.jsp打开的(配置Maven自带的)

在到下载的tomcat里面找到lib目录的servlet-api.jar复制

在WEB-INF里面建立lib包然后把刚才那个粘贴过来(名字和位置一定要和我一样)

右键添加为库就好了

目录自己建(推荐和我保持一致) 把刚才那个idiom.json 复制粘贴过来

三、核心代码部分

建立和我一样的目录就好了推荐和我保持一致 (最好和我一样) 不然里面的你还得改

index.jsp里面的

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<body>
<h2>Hello World!</h2>
<a href="begin.jsp">成语接龙.小游戏</a>
</body>
</html>

iniom.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>成语接龙游戏</title>
    <style>
        body {
            /* 设置背景铺满 */
            background-image: url(../img/1.png);
            background-size: cover;
            background-repeat: no-repeat;
            display: flex;
            /*justify-content: center;*/
            /*align-items: center;*/
            min-height: 100vh;
            margin: 0;
        }

        .idiom-form {
            width: 400px;
            /* 设置表单宽度为 400 像素 */
            height: 350px;
            /* 设置表单高度为 250 像素 */
            background-color: rgba(225, 233, 239, 0);
            /* 设置表单背景颜色为半透明的淡蓝色 */
            border-radius: 10px;
            /* 设置表单边框为 10 像素的圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 设置表单的阴影效果 */
            /* 去除居中对齐 */
            text-align: center;
            /* 如果想设置表单在页面中的特定位置，可以使用定位属性 */
            position: absolute;
            top: 250px;
            left: 150px;
        }
        .idiom-form p {
            font-size: 18px;
            margin-top: 20px;
            /* 添加字体样式 */
            font-family: 楷体, sans-serif;
            color: rebeccapurple;
            font-weight: bold;
        }

        .textinput {
            height: 40px;
            width: 300px;
            padding: 0 35px;
            border: none;
            background: #F8F9F9;
            font-size: 15px;
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
            border-radius: 5px;
            color: saddlebrown;
        }


        input[type="submit"] {
            width: 110px;
            height: 40px;
            text-align: center;
            border-radius: 5px;
            font: 16px "宋体";
            background-color: #ffaa99;
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<form action="idiom" method="post" class="idiom-form">
    <br><p>开始成语：<%=session.getAttribute("firstWord")%></p>
    <p>接龙词语: <%=session.getAttribute("lastWord")%></p>
    <input type="text" name="answer" class="textinput">
    <input type="submit" value="确定"/>
    <p>提示:${help}</p>
    <div>意思: ${yisi}</div>
</form>

<form action="help" method="post" >
    <button type="submit">提示</button>
</form>

</body>
</html>

begin.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>开始</title>
    <style>
        body {
            /* 设置背景铺满 */
            background-image: url(../img/1.png);
            background-size: cover;
            background-repeat: no-repeat;
            display: flex;
            /*justify-content: center;*/
            /*align-items: center;*/
            min-height: 100vh;
            margin: 0;
        }

        form {
            width: 400px;
            /* 设置表单宽度为 400 像素 */
            height: 350px;
            /* 设置表单高度为 250 像素 */
            background-color: rgba(225, 233, 239, 0);
            /* 设置表单背景颜色为半透明的淡蓝色 */
            border-radius: 10px;
            /* 设置表单边框为 10 像素的圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 设置表单的阴影效果 */
            /* 去除居中对齐 */
            text-align: center;
            /* 如果想设置表单在页面中的特定位置，可以使用定位属性 */
            position: absolute;
            top: 250px;
            left: 150px;
        }
        .idiom-form p {
            font-size: 18px;
            margin-top: 20px;
            /* 添加字体样式 */
            font-family: 楷体, sans-serif;
            color: rebeccapurple;
            font-weight: bold;
        }

        .text_input {
            height: 40px;
            width: 300px;
            padding: 0 35px;
            border: none;
            background: #F8F9F9;
            font-size: 15px;
            box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px rgba(170, 170, 170, 0.14);
            border-radius: 5px;
            color: saddlebrown;
        }


        input[type="submit"] {
            width: 110px;
            height: 40px;
            text-align: center;
            border-radius: 5px;
            font: 16px "宋体";
            background-color: #ffaa99;
            margin-top: 20px;
            font-weight: bold;
        }
        /* 第一个 p 标签样式 */
        p:first-of-type {
            font-size: 30px;
            margin-top: 20px;
            /* 添加字体样式 */
            font-family: 楷体, sans-serif;
            color: rebeccapurple;
            font-weight: bold;
        }

        /* 第二个 p 标签样式 */
        p:last-of-type {
            font-size: 30px;
            margin-top: 20px;
            /* 添加字体样式 */
            font-family: 楷体, sans-serif;
            color: darkblue;
        }

    </style>
</head>
<body>
<form action="begin" method="post">
    <p>成语接龙</p><br>
    <p>ℍ ♬ ♩ ♡ ♪♭ ♫ ♡ ⚗︎·̫⚗︎</p>
    <p>请输入一个开始成语</p>
    <input type="text" name="begin" class="text_input">
    <input type="submit" value="进入游戏">
</form>

</body>
</html>

JsonIdiom:

package com.lyc;


import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;

@WebServlet("/idiom")
public class JsonIdiom extends HttpServlet {
    static ArrayList<String> pinyin = new ArrayList<>();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession session = req.getSession();
        String answer = req.getParameter("answer");
        StringBuilder content = new StringBuilder();

        try (BufferedReader br = new BufferedReader(new FileReader("D:/JAVAHOME/java/servletdemo01/maven003/src/main/java/com/lyc/idiom/idiom.json"))) {
            String line;
            while ((line = br.readLine()) != null) {
                content.append(line);
            }
            String jsonStr = content.toString();
            JSONArray jsonArray = new JSONArray(jsonStr);
            String lastWord = (String) session.getAttribute("lastWord");
            lookup(jsonArray, lastWord);
            if (!lookup(jsonArray, answer)) {
                resp.sendRedirect("idiom/idiom.jsp");
            } else if (pinyin.get(1).equals(pinyin.get(2))) {
                session.setAttribute("lastWord", answer);
                resp.sendRedirect("idiom.jsp");
            } else resp.sendRedirect("idiom.jsp");
        } catch (IOException | JSONException e) {
            e.printStackTrace();
        }
    }

    private static Boolean lookup(JSONArray arr, String word) throws JSONException {
        for (int i = 0; i < arr.length(); i++) {
            JSONObject jsonObject = arr.getJSONObject(i);
            if (jsonObject.getString("word").equals(word)) {
                String last = jsonObject.getString("last");
                String first = jsonObject.getString("first");
                pinyin.add(first);
                pinyin.add(last);
                return true;
            }
        }
        return false;
    }
}

helpIdiom:

package com.lyc;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;

@WebServlet("/help")
public class helpIdiom extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession session = req.getSession();

        StringBuilder content = new StringBuilder();
        try (BufferedReader br = new BufferedReader(new FileReader("D:/JAVAHOME/java/game/src/main/java/com/lyc/idiom.json"))) {
            String line;
            while ((line = br.readLine()) != null) {
                content.append(line);
            }
            String last = null;
            String jsonStr = content.toString();
            JSONArray jsonArray = new JSONArray(jsonStr);
            for (int i = 0; i < jsonArray.length(); i++) {
                JSONObject jsonObject = jsonArray.getJSONObject(i);
                String word = jsonObject.getString("word");
                if(word.equals(session.getAttribute("lastWord"))){
                 last = jsonObject.getString("last");
                   break;
                }
            }
            for (int i = 0; i < jsonArray.length(); i++) {
                JSONObject jsonObject = jsonArray.getJSONObject(i);
                String word = jsonObject.getString("first");
                if(word.equals(last)){
                    session.setAttribute("help",jsonArray.getJSONObject(i+(int)session.getAttribute("number")).getString("word"));
                    session.setAttribute("number",1+(int)session.getAttribute("number"));
                    session.setAttribute("yisi",jsonArray.getJSONObject(i+(int)session.getAttribute("number")).getString("explanation"));
                    break;
                }
            }
            resp.sendRedirect("idiom.jsp");
        } catch (IOException | JSONException e) {
            e.printStackTrace();
        }
    }
}

begin:

package com.lyc;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;

@WebServlet("/begin")
public class begin extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession session = req.getSession();
        //变化词语
        session.setAttribute("number", 0);

        String begin = req.getParameter("begin");
        StringBuilder content = new StringBuilder();
        try (BufferedReader br = new BufferedReader(new FileReader("D:/JAVAHOME/java/servletdemo01/maven003/src/main/java/com/lyc/idiom/idiom.json"))) {
            String line;
            while ((line = br.readLine()) != null) {
                content.append(line);
            }
            String jsonStr = content.toString();
            JSONArray jsonArray = new JSONArray(jsonStr);
            for (int i = 0; i < jsonArray.length(); i++) {
                JSONObject jsonObject = jsonArray.getJSONObject(i);
                String word = jsonObject.getString("word");
                if (word.equals(begin)) {
                    session.setAttribute("firstWord", word);
                    session.setAttribute("lastWord", word);
                    resp.sendRedirect("idiom.jsp");
                    return;
                }
            }
            resp.sendRedirect("idiom/begin.jsp");
        } catch (IOException | JSONException e) {
            e.printStackTrace();
        }
    }
}

四、强调

1.helpIdiom里面的文件路径,就是现在idiom.jsp的绝对目录,(是复制过来的路径,不是刚才下载那个路径)

2. 你自己找一个png的帅照当背景在webapp下面建立一个img目录然后在里面复制一个照片名字就叫1.png

3.把刚才idiom.jsp里面和begin.jsp里面的的url的 ../ 删掉变成下面这个

background-image: url(img/1.png);

成语接龙 servlet+jsp+Tomcat

效果图:

一、前期准备

二、idea配置

引入tomcat

OK,tomcat就部署好了那个框里看见tomcat就好了

在到下载的tomcat里面找到lib目录的servlet-api.jar复制

目录自己建(推荐和我保持一致) 把刚才那个idiom.json 复制粘贴过来

三、核心代码部分

begin.jsp

JsonIdiom:

helpIdiom:

begin:

四、强调

五:完成了

（看到这儿，老铁不来个一键三连，支持支持）

相信今天你会完成吧！！！

成语接龙 servlet+jsp+Tomcat

效果图:

一、前期准备

二、idea配置

引入tomcat

OK,tomcat就部署好了 那个框里看见tomcat就好了

在到下载的tomcat里面找到lib目录的servlet-api.jar复制

目录自己建(推荐和我保持一致) 把刚才那个idiom.json 复制粘贴 过来

三、核心代码部分

begin.jsp

JsonIdiom:

helpIdiom:

begin:

四、强调

五:完成了

（ 看到这儿，老铁不来个 一键三连，支持支持）

相信今天你会完成吧！！！

OK,tomcat就部署好了那个框里看见tomcat就好了

目录自己建(推荐和我保持一致) 把刚才那个idiom.json 复制粘贴过来

（看到这儿，老铁不来个一键三连，支持支持）