आज आपण सर्व्हलेट्स आणि जेएसपी वापरून टिक-टॅक-टो गेम लिहू.

हा प्रकल्प आधीच्या प्रकल्पांपेक्षा थोडा वेगळा असेल. यात केवळ कार्येच नाहीत तर ती कशी करायची याचे स्पष्टीकरण देखील असेल. म्हणजेच, "कसे करावे ..." मालिकेतील हा एक प्रकल्प असेल.

सूचना:

  1. रेपॉजिटरीमधून काटा: https://github.com/CodeGymCC/project-servlet.git
  2. आपल्या संगणकावर प्रकल्पाची आवृत्ती डाउनलोड करा.
  3. IDEA मध्ये ऍप्लिकेशन लॉन्च सेट करा:
    • Alt + Shift + F9 -> कॉन्फिगरेशन संपादित करा… -> Alt + insert -> tom (शोध बारमध्ये) -> Local.
    • त्यानंतर, तुम्हाला "कॉन्फिगर करा" वर क्लिक करावे लागेल आणि टॉमकॅटसह संग्रह कुठे डाउनलोड केले आणि अनपॅक केले गेले ते सूचित करा.
    • “डिप्लॉयमेंट” टॅबमध्ये: Alt + insert -> Artifact… -> tic-tac-toe:war exploded -> OK.
    • "अनुप्रयोग संदर्भ" फील्डमध्ये: फक्त "/" (स्लॅश) सोडा.
    • "लागू करा" दाबा.
    • सेटिंग्ज विंडो बंद करा.
    • सानुकूलित कॉन्फिगरेशनची पहिली चाचणी रन करा. सर्वकाही योग्यरित्या केले असल्यास, आपला डीफॉल्ट ब्राउझर उघडेल, ज्यामध्ये ते असेल:
  4. "pom.xml" फाइल उघडा . "अवलंबन" ब्लॉकमध्ये 2 अवलंबन आहेत .
    • javax.servlet-apiसर्व्हलेट्सच्या तपशीलासाठी जबाबदार आहे. विकासादरम्यान "प्रदान केलेले" स्कोप आवश्यक आहे, परंतु रनटाइमच्या वेळी आवश्यक नाही (टॉमकॅट हे lib फोल्डरमध्ये आधीपासूनच अवलंबून आहे).
    • jstl- टेम्पलेट इंजिन म्हणून मानले जाऊ शकते.
  5. "webapp" फोल्डरमध्ये 3 फाइल्स आहेत :
    • index.jsp- हे आमचे टेम्पलेट आहे (HTML पृष्ठासारखे). त्यात मार्कअप आणि स्क्रिप्ट असतील. ही "इंडेक्स" नावाची फाईल आहे जी प्रारंभिक पृष्ठ म्हणून दिली जाते, जर तेथे कोणतेही कॉन्फिगरेशन नसेल, जे आम्ही चरण 3 मध्ये पाहिले.
    • /static/main.css- शैलींसाठी फाइल. मागील प्रकल्पाप्रमाणे, येथे सर्वकाही आपल्यावर अवलंबून आहे, आपल्या इच्छेनुसार पेंट करा.
    • /static/jquery-3.6.0.min.js- फ्रंटएंड अवलंबित्व जे आमचे सर्व्हर स्थिर म्हणून वितरित करेल.
  6. "com.tictactoe" पॅकेजमध्ये सर्व Java कोड असतील. सध्या 2 वर्ग आहेत:
    • Sign- enum, जे "क्रॉस/शून्य/व्हॉइड" साठी जबाबदार आहे .
    • Fieldआमचे क्षेत्र आहे. या वर्गात "फील्ड" नकाशा आहे . डेटा स्टोरेजचे तत्त्व खालीलप्रमाणे असेल: टिक-टॅक-टो फील्डच्या पेशी शून्यातून क्रमांकित केल्या जातात. पहिल्या ओळीत 0, 1 आणि 2. दुसऱ्यामध्ये: 3, 4 आणि 5. आणि असेच. 3 पद्धती देखील आहेत. “getEmptyFieldIndex” पहिला रिक्त सेल शोधतो (होय, आमचा विरोधक फार हुशार नसेल). "चेकविन" गेम संपला आहे का ते तपासते. जर तीन क्रॉसची पंक्ती असेल, तर ती क्रॉस परत करते; जर तीन शून्यांची पंक्ती असेल, तर ती शून्य मिळवते. अन्यथा, ते रिक्त आहे. "getFieldData" - "फील्ड" नकाशाची मूल्ये चढत्या अनुक्रमणिकेच्या क्रमाने क्रमवारी लावलेली सूची म्हणून परत करते.
  7. टेम्पलेटबद्दलचे स्पष्टीकरण पूर्ण झाले आहे, आता तुम्ही कार्य सुरू करू शकता. चला 3 बाय 3 टेबल काढुन सुरुवात करूया. हे करण्यासाठी खालील कोड “index.jsp” मध्ये जोडा : 
    
<table> 
	<tr> 
		<td>0</td> 
		<td>1</td> 
		<td>2</td> 
	</tr> 
	<tr> 
		<td>3</td> 
		<td>4</td> 
		<td>5</td> 
	</tr> 
	<tr> 
		<td>6</td> 
		<td>7</td> 
		<td>8</td> 
	</tr> 
</table>
    त्यानंतर आम्ही टेबलमधील संख्या काढून टाकू आणि त्यांना क्रॉस, शून्य किंवा रिकाम्या फील्डने बदलू. तसेच, “हेड” टॅगमध्ये, शैली फाइल समाविष्ट करा. हे करण्यासाठी, एक ओळ जोडा:<link href="static/main.css" rel="stylesheet">

    शैली फाइलची सामग्री आपल्यावर अवलंबून आहे. मी हे वापरले: 
    
td { 
    border: 3px solid black; 
    padding: 10px; 
    border-collapse: separate; 
    margin: 10px; 
    width: 100px; 
    height: 100px; 
    font-size: 50px; 
    text-align: center; 
    empty-cells: show; 
}
    धावल्यानंतर, माझा निकाल यासारखा दिसतो:
  8. आता खालील कार्यक्षमता जोडूया: सेलवर क्लिक केल्यावर, सर्व्हरला विनंती पाठविली जाईल, ज्यामध्ये आम्ही पॅरामीटर म्हणून क्लिक केलेल्या सेलची अनुक्रमणिका पास करू. हे कार्य दोन भागांमध्ये विभागले जाऊ शकते: समोरून एक विनंती पाठवा, सर्व्हरवर विनंती स्वीकारा. बदलासाठी आघाडीपासून सुरुवात करूया.

    प्रत्येक "d" टॅगमध्ये "ऑनक्लिक" पॅरामीटर जोडूया . मूल्यामध्ये, आम्ही वर्तमान पृष्ठाचा बदल निर्दिष्ट URL मध्ये सूचित करतो. लॉजिकसाठी जबाबदार असणार्‍या सर्व्हलेटची URL “/logic” असेल . आणि "क्लिक" नावाचे पॅरामीटर घेईल . म्हणून आपण वापरकर्त्याने क्लिक केलेल्या सेलची अनुक्रमणिका पास करू. 
    
<table> 
    <tr> 
        <td onclick="window.location='/logic?click=0'">0</td> 
        <td onclick="window.location='/logic?click=1'">1</td> 
        <td onclick="window.location='/logic?click=2'">2</td> 
    </tr> 
    <tr> 
        <td onclick="window.location='/logic?click=3'">3</td> 
        <td onclick="window.location='/logic?click=4'">4</td> 
        <td onclick="window.location='/logic?click=5'">5</td> 
    </tr> 
    <tr> 
        <td onclick="window.location='/logic?click=6'">6</td> 
        <td onclick="window.location='/logic?click=7'">7</td> 
        <td onclick="window.location='/logic?click=8'">8</td> 
    </tr> 
</table>
    तुम्ही ब्राउझरमधील डेव्हलपर पॅनलद्वारे सर्वकाही योग्यरित्या केले आहे हे तपासू शकता. उदाहरणार्थ, Chrome मध्ये, ते F12 बटणाने उघडते . इंडेक्स 4 असलेल्या सेलवर क्लिक केल्यामुळे, चित्र खालीलप्रमाणे असेल: आम्हाला एक त्रुटी आली कारण आम्ही अद्याप सर्व्हलेट तयार केलेला नाही जो सर्व्हरला "लॉजिक" पत्त्यावर पाठवू शकेल .

  9. पॅकेज "com.tictactoe" मध्ये "LogicServlet" वर्ग तयार करा जो "javax.servlet.http.HttpServlet" या वर्गातून घेतला गेला पाहिजे . वर्गात, "doGet" पद्धत ओव्हरराइड करा .

    आणि क्लिक केलेल्या सेलची अनुक्रमणिका मिळेल अशी पद्धत जोडूया. तुम्हाला मॅपिंग देखील जोडण्याची आवश्यकता आहे (ज्या पत्त्यावर हे सर्व्हलेट विनंती रोखेल). मी हे भाष्याद्वारे करण्याचा सल्ला देतो (परंतु तुम्हाला अडचणी येत असल्यास, तुम्ही web.xml देखील वापरू शकता). सामान्य सर्व्हलेट कोड: 
    package com.tictactoe;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


@WebServlet(name = "LogicServlet", value = "/logic")
public class LogicServlet extends HttpServlet {
    @Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int index = getSelectedIndex(req);
        resp.sendRedirect("/index.jsp");
    }


    private int getSelectedIndex(HttpServletRequest request) {
        String click = request.getParameter("click");
        boolean isNumeric = click.chars().allMatch(Character::isDigit);
        return isNumeric ? Integer.parseInt(click) : 0;
    }

}
    आता, कोणत्याही सेलवर क्लिक केल्यावर, आम्हाला सर्व्हरवर या सेलची अनुक्रमणिका मिळेल (आपण डीबगमध्ये सर्व्हर चालवून खात्री करू शकता). आणि ज्या पृष्ठावरून क्लिक केले होते त्याच पृष्ठावर पुनर्निर्देशन केले जाईल.

  10. आता आम्ही क्लिक करू शकतो, परंतु अद्याप हा गेम नाही. गेममध्ये तर्कशास्त्र असण्यासाठी, तुम्हाला विनंती दरम्यान गेमची स्थिती (जेथे क्रॉस आहेत, जेथे शून्य आहेत) जतन करणे आवश्यक आहे. हे करण्याचा सर्वात सोपा मार्ग म्हणजे हा डेटा सत्रामध्ये संग्रहित करणे. या दृष्टिकोनासह, सत्र सर्व्हरवर संग्रहित केले जाईल आणि क्लायंटला "JSESSIONID" नावाच्या कुकीमध्ये सत्र आयडी प्राप्त होईल . परंतु प्रत्येक वेळी सत्र तयार करणे आवश्यक नाही, परंतु केवळ गेमच्या सुरूवातीस. यासाठी आणखी एक सर्व्हलेट सुरू करू, ज्याला आपण "InitServlet" म्हणू . आम्ही त्यात "doGet" पद्धत ओव्हरराइड करू, ज्यामध्ये आम्ही एक नवीन सत्र तयार करू, एक खेळण्याचे मैदान तयार करू, हे खेळण्याचे क्षेत्र आणि साइन इन प्रकारची सूची सत्र विशेषतांमध्ये ठेवू आणि index.jsp वर " फॉरवर्ड" पाठवू. पृष्ठ कोड: 
    package com.tictactoe;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;
import java.util.Map;

@WebServlet(name = "InitServlet", value = "/start")
public class InitServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Create a new session
        HttpSession currentSession = req.getSession(true);

        // Create a playing field
        Field field = new Field();
        Map<Integer, Sign> fieldData = field.getField();

        // Get a list of field values
        List<Sign> data = field.getFieldData();

        // Adding field parameters to the session (needed to store state between requests)
        currentSession.setAttribute("field", field);
        // and field values ​​sorted by index (required for drawing crosses and zeroes)
        currentSession.setAttribute("data", data);

        // Redirect request to index.jsp page via server
        getServletContext().getRequestDispatcher("/index.jsp").forward(req, resp);
    }
}
    आणि विसरू नका, सर्व्हर सुरू केल्यानंतर ब्राउझरमध्ये उघडणारे स्टार्ट पेज बदलूया “/start” : आता सर्व्हर रीस्टार्ट केल्यानंतर आणि “Request Headers” विभागातील ब्राउझर डेव्हलपर मेनूमधील फील्डच्या कोणत्याही सेलवर क्लिक केल्यानंतर. , सत्र ID असलेली एक कुकी असेल:
  11. जेव्हा आमच्याकडे रिपॉजिटरी असते ज्यामध्ये आम्ही क्लायंट (ब्राउझर) च्या विनंत्या दरम्यान स्टेट स्टोअर करू शकतो, तेव्हा आम्ही गेम लॉजिक लिहिणे सुरू करू शकतो. आमच्याकडे असलेले तर्क "LogicServlet" मध्ये आहे . आम्हाला "doGet" पद्धतीसह कार्य करण्याची आवश्यकता आहे . चला हे वर्तन पद्धतीमध्ये जोडूया:
    • आम्हाला सेशनमधून फील्ड प्रकाराचा "फील्ड" ऑब्जेक्ट मिळेल (आम्ही ते "extractField" पद्धतीवर नेऊ ).
    • वापरकर्त्याने जिथे क्लिक केले तिथे क्रॉस ठेवा (आतापर्यंत कोणत्याही तपासण्याशिवाय).
    @Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    // Get the current session
    HttpSession currentSession = req.getSession();

    // Get the playfield object from the session
    Field field = extractField(currentSession);

    // get the index of the cell that was clicked
    int index = getSelectedIndex(req);

    // put a cross in the cell that the user clicked on
    field.getField().put(index, Sign.CROSS);

    // Read the list of icons
    List<Sign> data = field.getFieldData();

    // Update field object and icon list in session
    currentSession.setAttribute("data", data);
    currentSession.setAttribute("field", field);

    resp.sendRedirect("/index.jsp");
}



private Field extractField(HttpSession currentSession) {
    Object fieldAttribute = currentSession.getAttribute("field");
    if (Field.class != fieldAttribute.getClass()) {
        currentSession.invalidate();
        throw new RuntimeException("Session is broken, try one more time");
    }
    return (Field) fieldAttribute;
}
    वर्तन अद्याप बदललेले नाही, परंतु आपण डीबगमध्ये सर्व्हर सुरू केल्यास आणि पुनर्निर्देशन पाठविलेल्या ओळीवर ब्रेकपॉईंट सेट केल्यास, आपण "डेटा" ऑब्जेक्टचे "इनर्ड्स" पाहू शकता . तेथे, खरंच, क्लिक केलेल्या निर्देशांकाखाली “CROSS” दिसते .

  12. आता फ्रंटएंडवर क्रॉस प्रदर्शित करण्याची वेळ आली आहे. हे करण्यासाठी, आम्ही "index.jsp" फाइल आणि "JSTL" तंत्रज्ञानासह कार्य करू .
    • <head> विभागात जोडा:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    • प्रत्येक <td> ब्लॉकमधील तक्त्यामध्ये, इंडेक्स एका रचनामध्ये बदला जे तुम्हाला मूल्यांची गणना करण्यास अनुमती देते. उदाहरणार्थ, अनुक्रमणिका शून्यासाठी: <td onclick="window.location='/logic?click=0'">${data.get(0).getSign()}</td> आता, जेव्हा तुम्ही सेलवर क्लिक कराल, तेव्हा तेथे एक क्रॉस दिसेल:
  13. आम्ही आमची हालचाल केली आहे, आता "शून्य" ची पाळी आहे. आणि येथे दोन तपासण्या जोडूया, जेणेकरून आधीच व्यापलेल्या पेशींमध्ये चिन्हे ठेवली जाणार नाहीत.
    • क्लिक केलेला सेल रिकामा आहे हे तपासणे आवश्यक आहे. अन्यथा, आम्ही काहीही करत नाही आणि सत्र पॅरामीटर्स न बदलता वापरकर्त्यास त्याच पृष्ठावर पाठवतो.
    • फील्डवरील पेशींची संख्या विषम असल्याने, क्रॉस ठेवण्याची शक्यता आहे, परंतु शून्यासाठी जागा नाही. म्हणून, आम्ही क्रॉस ठेवल्यानंतर, आम्ही बिनव्याप्त सेलची अनुक्रमणिका मिळवण्याचा प्रयत्न करतो (फील्ड वर्गाची getEmptyFieldIndex पद्धत). जर निर्देशांक ऋणात्मक नसेल तर तेथे शून्य ठेवा. कोड: 
      package com.tictactoe;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "LogicServlet", value = "/logic")
public class LogicServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Get the current session
        HttpSession currentSession = req.getSession();

        // Get the playfield object from the session
        Field field = extractField(currentSession);

        // get the index of the cell that was clicked
        int index = getSelectedIndex(req);
        Sign currentSign = field.getField().get(index);

        // Check if the clicked cell is empty.
        // Otherwise, we do nothing and send the user to the same page without changes
        // parameters in the session
        if (Sign.EMPTY != currentSign) {
            RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/index.jsp");
            dispatcher.forward(req, resp);
            return;
        }

        // put a cross in the cell that the user clicked on
        field.getField().put(index, Sign.CROSS);

        // Get an empty field cell
        int emptyFieldIndex = field.getEmptyFieldIndex();

        if (emptyFieldIndex >= 0) {
            field.getField().put(emptyFieldIndex, Sign.NOUGHT);
        }

        // Read the list of icons
        List<Sign> data = field.getFieldData();

        // Update field object and icon list in session
        currentSession.setAttribute("data", data);
        currentSession.setAttribute("field", field);

        resp.sendRedirect("/index.jsp");
    }

    private int getSelectedIndex(HttpServletRequest request) {
        String click = request.getParameter("click");
        boolean isNumeric = click.chars().allMatch(Character::isDigit);
        return isNumeric ? Integer.parseInt(click) : 0;
    }

    private Field extractField(HttpSession currentSession) {
        Object fieldAttribute = currentSession.getAttribute("field");
        if (Field.class != fieldAttribute.getClass()) {
            currentSession.invalidate();
            throw new RuntimeException("Session is broken, try one more time");
        }
        return (Field) fieldAttribute;
    }
}
  14. या टप्प्यावर, तुम्ही क्रॉस, AI उत्तरे शून्यासह लावू शकता. पण खेळ कधी थांबवायचा याचा काही पत्ता नाही. हे तीन प्रकरणांमध्ये असू शकते:
    • क्रॉसच्या पुढील हालचालीनंतर, तीन क्रॉसची एक ओळ तयार झाली;
    • शून्यासह पुढील परतीच्या हालचालीनंतर, तीन शून्यांची एक ओळ तयार झाली;
    • क्रॉसच्या पुढील हालचालीनंतर, रिक्त पेशी संपल्या.
    एका ओळीत तीन क्रॉस/शून्य आहेत की नाही हे तपासणारी पद्धत जोडूया: 
    /**
 * The method checks if there are three X/O's in a row.
 * returns true/false
 */
private boolean checkWin(HttpServletResponse response, HttpSession currentSession, Field field) throws IOException {
    Sign winner = field.checkWin();
    if (Sign.CROSS == winner || Sign.NOUGHT == winner) {
        // Add a flag to indicate that someone has won
        currentSession.setAttribute("winner", winner);

        // Read the list of icons
        List<Sign> data = field.getFieldData();

        // Update this list in session
        currentSession.setAttribute("data", data);

        // helmet redirect
        response.sendRedirect("/index.jsp");
        return true;
    }
    return false;
}
    या पद्धतीचे वैशिष्ठ्य म्हणजे विजेता सापडल्यास, आम्ही सत्रामध्ये दुसरे पॅरामीटर जोडतो, ज्याचा वापर करून आम्ही पुढील परिच्छेदांमध्ये “index.jsp” मध्ये डिस्प्ले बदलू.

  15. चला “doGet” पद्धतीमध्ये “checkWin ” पद्धतीला दोनदा कॉल जोडू या . क्रॉस सेट केल्यानंतर प्रथमच, दुसरी - शून्य सेट केल्यानंतर. 
    // Check if the cross won after adding the user's last click
if (checkWin(resp, currentSession, field)) {
    return;
}
    if (emptyFieldIndex >= 0) {
    field.getField().put(emptyFieldIndex, Sign.NOUGHT);
    // Check if the zero won after adding the last zero
    if (checkWin(resp, currentSession, field)) {
        return;
    }
}

  16. वर्तनाच्या बाबतीत, जवळजवळ काहीही बदलले नाही (त्याशिवाय चिन्हांपैकी एक जिंकल्यास, शून्य यापुढे ठेवले जाणार नाही. चला “index.jsp” मध्ये “विजेता” पॅरामीटर वापरू आणि विजेता प्रदर्शित करू. आम्ही टेबल c:setनंतर निर्देश वापरतो:c:if 
    
<hr> 
<c:set var="CROSSES" value="<%=Sign.CROSS%>"/> 
<c:set var="NOUGHTS" value="<%=Sign.NOUGHT%>"/> 
 
<c:if test="${winner == CROSSES}"> 
    <h1>CROSSES WIN!</h1> 
</c:if> 
<c:if test="${winner == NOUGHTS}"> 
    <h1>NOUGHTS WIN!</h1> 
</c:if>
    क्रॉस जिंकल्यास, संदेश "क्रॉस जिंकतो!" , जर शून्य असतील तर "NOUGHTS WIN!" . परिणामी, आम्ही दोन शिलालेखांपैकी एक मिळवू शकतो:
  17. एखादा विजेता असल्यास, आपण बदला घेण्यास सक्षम असणे आवश्यक आहे. हे करण्यासाठी, आपल्याला एक बटण आवश्यक आहे जे सर्व्हरला विनंती पाठवेल. आणि सर्व्हर वर्तमान सत्र अवैध करेल आणि विनंती परत “/start” वर पुनर्निर्देशित करेल .
    • “हेड” विभागात “index.jsp” मध्ये , “jquery” स्क्रिप्ट लिहा . या लायब्ररीचा वापर करून, आम्ही सर्व्हरला विनंती पाठवू. 
      
<script src="<c:url value="/static/jquery-3.6.0.min.js"/>"></script>
    • "स्क्रिप्ट" विभागातील "index.jsp" मध्ये , सर्व्हरला POST विनंती पाठवू शकणारे फंक्शन जोडा. आम्ही फंक्शन सिंक्रोनस करू, आणि सर्व्हरकडून प्रतिसाद आल्यावर ते वर्तमान पृष्ठ रीलोड करेल. 
      
<script> 
    function restart() { 
        $.ajax({ 
            url: '/restart', 
            type: 'POST', 
            contentType: 'application/json;charset=UTF-8', 
            async: false, 
            success: function () { 
                location.reload(); 
            } 
        }); 
    } 
</script>
    • "c:if" ब्लॉक्सच्या आत , एक बटण जोडा जे क्लिक केल्यावर, आम्ही नुकतेच लिहिलेले फंक्शन कॉल करते: 
      
<c:if test="${winner == CROSSES}"> 
    <h1>CROSSES WIN!</h1> 
    <button onclick="restart()">Start again</button> 
</c:if> 
<c:if test="${winner == NOUGHTS}"> 
    <h1>NOUGHTS WIN!</h1> 
    <button onclick="restart()">Start again</button> 
</c:if>
    • चला एक नवीन सर्व्हलेट तयार करू जे "/restart" URL सर्व्ह करेल . 
      package com.tictactoe;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "RestartServlet", value = "/restart")
public class RestartServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.getSession().invalidate();
        resp.sendRedirect("/start");
    }
}
      विजयानंतर, "पुन्हा प्रारंभ करा" बटण दिसेल . त्यावर क्लिक केल्यानंतर, फील्ड पूर्णपणे साफ होईल आणि गेम पुन्हा सुरू होईल.
  18. शेवटच्या परिस्थितीचा विचार करणे बाकी आहे. जर वापरकर्त्याने क्रॉस लावला, विजय मिळाला नाही आणि शून्यासाठी जागा नसेल तर? मग हा ड्रॉ आहे आणि आम्ही आता त्यावर प्रक्रिया करू:
    • "लॉजिकसर्व्हलेट" सत्रात , दुसरे पॅरामीटर "ड्रॉ" जोडा, "डेटा" फील्ड अद्यतनित करा आणि "index.jsp" वर पुनर्निर्देशन पाठवा : 
      // If such a cell exists
if (emptyFieldIndex >= 0) {
    …
}
// If there is no empty cell and no one wins, then it's a draw
else {
    // Add a flag to the session that signals that a draw has occurred
    currentSession.setAttribute("draw", true);

    // Read the list of icons
    List<Sign> data = field.getFieldData();

    // Update this list in session
    currentSession.setAttribute("data", data);

    // helmet redirect
    response.sendRedirect("/index.jsp");
    return;
}
    • "index.jsp" मध्ये आम्ही या पॅरामीटरवर प्रक्रिया करू: 
      <c:if test="${draw}">
    <h1>IT'S A DRAW</h1>
    <br>
    <button onclick="restart()">Start again</button>
</c:if>
      ड्रॉच्या परिणामी, आम्हाला संबंधित संदेश आणि पुन्हा सुरू करण्याची ऑफर प्राप्त होईल:
Java webinar

हे गेमचे लेखन पूर्ण करते.

वर्ग आणि फायलींचा कोड ज्यासह त्यांनी काम केले

InitServlet

package com.tictactoe;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;
import java.util.Map;

@WebServlet(name = "InitServlet", value = "/start")
public class InitServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Create a new session
        HttpSession currentSession = req.getSession(true);

        // Create a playing field
        Field field = new Field();
        Map<Integer, Sign> fieldData = field.getField();

        // Get a list of field values
        List<Sign> data = field.getFieldData();

        // Adding field parameters to the session (needed to store state between requests)
        currentSession.setAttribute("field", field);
        // and field values ​​sorted by index (required for drawing crosses and zeroes)
        currentSession.setAttribute("data", data);

        // Redirect request to index.jsp page via server
        getServletContext().getRequestDispatcher("/index.jsp").forward(req, resp);
    }
}

LogicServlet

package com.tictactoe;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "LogicServlet", value = "/logic")
public class LogicServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Get the current session
        HttpSession currentSession = req.getSession();

        // Get the playfield object from the session
        Field field = extractField(currentSession);

        // get the index of the cell that was clicked
        int index = getSelectedIndex(req);
        Sign currentSign = field.getField().get(index);

        // Check if the clicked cell is empty.
        // Otherwise, we do nothing and send the user to the same page without changes
        // parameters in the session
        if (Sign.EMPTY != currentSign) {
            RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/index.jsp");
            dispatcher.forward(req, resp);
            return;
        }

        // put a cross in the cell that the user clicked on
        field.getField().put(index, Sign.CROSS);

        // Check if the cross has won after adding the user's last click
        if (checkWin(resp, currentSession, field)) {
            return;
        }

        // Get an empty field cell
        int emptyFieldIndex = field.getEmptyFieldIndex();

        if (emptyFieldIndex >= 0) {
            field.getField().put(emptyFieldIndex, Sign.NOUGHT);
            // Check if the zero won after adding the last zero
            if (checkWin(resp, currentSession, field)) {
                return;
            }
        }
        // If there is no empty cell and no one wins, then it's a draw
        else {
            // Add a flag to the session that signals that a draw has occurred
            currentSession.setAttribute("draw", true);

            // Read the list of icons
            List<Sign> data = field.getFieldData();

            // Update this list in session
            currentSession.setAttribute("data", data);

            // helmet redirect
            resp.sendRedirect("/index.jsp");
            return;
        }

        // Read the list of icons
        List<Sign> data = field.getFieldData();

        // Update field object and icon list in session
        currentSession.setAttribute("data", data);
        currentSession.setAttribute("field", field);

        resp.sendRedirect("/index.jsp");
    }

    /**
     * The method checks if there are three X/O's in a row.
     * returns true/false
     */
    private boolean checkWin(HttpServletResponse response, HttpSession currentSession, Field field) throws IOException {
        Sign winner = field.checkWin();
        if (Sign.CROSS == winner || Sign.NOUGHT == winner) {
            // Add a flag to indicate that someone has won
            currentSession.setAttribute("winner", winner);

            // Read the list of icons
            List<Sign> data = field.getFieldData();

            // Update this list in session
            currentSession.setAttribute("data", data);

            // helmet redirect
            response.sendRedirect("/index.jsp");
            return true;
        }
        return false;
    }

    private int getSelectedIndex(HttpServletRequest request) {
        String click = request.getParameter("click");
        boolean isNumeric = click.chars().allMatch(Character::isDigit);
        return isNumeric ? Integer.parseInt(click) : 0;
    }

    private Field extractField(HttpSession currentSession) {
        Object fieldAttribute = currentSession.getAttribute("field");
        if (Field.class != fieldAttribute.getClass()) {
            currentSession.invalidate();
            throw new RuntimeException("Session is broken, try one more time");
        }
        return (Field) fieldAttribute;
    }
}

रीस्टार्ट सर्व्हलेट

package com.tictactoe;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "RestartServlet", value = "/restart")
public class RestartServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.getSession().invalidate();
        resp.sendRedirect("/start");
    }
}

index.jsp _

<%@ page import="com.tictactoe.Sign" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <link href="static/main.css" rel="stylesheet">
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <script src="<c:url value="/static/jquery-3.6.0.min.js"/>"></script>
    <title>Tic-Tac-Toe</title>
</head>
<body>
<h1>Tic-Tac-Toe</h1>

<table>
    <tr>
        <td onclick="window.location='/logic?click=0'">${data.get(0).getSign()}</td>
        <td onclick="window.location='/logic?click=1'">${data.get(1).getSign()}</td>
        <td onclick="window.location='/logic?click=2'">${data.get(2).getSign()}</td>
    </tr>
    <tr>
        <td onclick="window.location='/logic?click=3'">${data.get(3).getSign()}</td>
        <td onclick="window.location='/logic?click=4'">${data.get(4).getSign()}</td>
        <td onclick="window.location='/logic?click=5'">${data.get(5).getSign()}</td>
    </tr>
    <tr>
        <td onclick="window.location='/logic?click=6'">${data.get(6).getSign()}</td>
        <td onclick="window.location='/logic?click=7'">${data.get(7).getSign()}</td>
        <td onclick="window.location='/logic?click=8'">${data.get(8).getSign()}</td>
    </tr>
</table>

<hr>
<c:set var="CROSSES" value="<%=Sign.CROSS%>"/>
<c:set var="NOUGHTS" value="<%=Sign.NOUGHT%>"/>

<c:if test="${winner == CROSSES}">
    <h1>CROSSES WIN!</h1>
    <button onclick="restart()">Start again</button>
</c:if>
<c:if test="${winner == NOUGHTS}">
    <h1>NOUGHTS WIN!</h1>
    <button onclick="restart()">Start again</button>
</c:if>
<c:if test="${draw}">
    <h1>IT'S A DRAW</h1>
    <button onclick="restart()">Start again</button>
</c:if>

<script>
    function restart() {
        $.ajax({
            url: '/restart',
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            async: false,
            success: function () {
                location.reload();
            }
        });
    }
</script>

</body>
</html>

main.css _

td {
    border: 3px solid black;
    padding: 10px;
    border-collapse: separate;
    margin: 10px;
    width: 100px;
    height: 100px;
    font-size: 50px;
    text-align: center;
    empty-cells: show;
   }