Tutorial – Jogo da Velha WEB

Criação do Projeto

1- Inicie o Eclipse 2- Crie um novo projeto Web dinâmico

.

3- Na tela seguinte, digite o nome do projeto e caso no campo “Target Runtime” não estiver aparecendo nada, vá no botão New e localize o diretório raiz do seu TomCat.

. 4- Clique em Finish para terminar a criação do projeto.

Criando a estrutura de pacotes

1- Clique com o botão direito no nome do seu projeto e escolha a opção New Package

. 2- Crie o pacote com o nome br.santacruz.jogodavelhaweb2.model.vo

. 3- Repita o procedimento anterior e crie os pacotes::

� br.santacruz.jogodavelhaweb2.model.dao, � br.santacruz.jogodavelhaweb2.control, � br.santacruz.jogodavelhaweb2.control.servlets,

Criando o VO

1- Com os pacotes já criados, crie uma nova classe dentro do pacote Vo

. 2- Coloque o nome da classe como JogoVo

3- Insira o código abaixo na Classe JogoVo

package br.santacruz.jogodavelhaweb2.model.vo; import java.util.Vector; public class JogoVo { private Vector<String> tabuleiro = new Vector<String>(9); private String simboloJogador1 = "X"; private String simboloJogador2 = "O"; private int nJogadasJogador1 = 0; private int nJogadasJogador2 = 0; private int vez = 1; private int fimJogo = 0; private int vencedor = 0; private String msg = "Nenhuma Mensagem!"; private String pos1; private String pos2; private String pos3; private String pos4; private String pos5; private String pos6; private String pos7; private String pos8; private String pos9; public JogoVo() { getTabuleiro().add(" "); getTabuleiro().add(" "); getTabuleiro().add(" "); getTabuleiro().add(" "); getTabuleiro().add(" "); getTabuleiro().add(" "); getTabuleiro().add(" "); getTabuleiro().add(" "); getTabuleiro().add(" "); } public Vector<String> getTabuleiro() { return tabuleiro; } public void setTabuleiro(Vector<String> tabuleiro) { this.tabuleiro = tabuleiro; } public String getSimboloJogador1() { return simboloJogador1; } public void setSimboloJogador1(String simboloJogador1) { this.simboloJogador1 = simboloJogador1; } public String getSimboloJogador2() { return simboloJogador2; } public void setSimboloJogador2(String simboloJogador2) { this.simboloJogador2 = simboloJogador2; } public int getNJogadasJogador1() { return nJogadasJogador1; } public void setNJogadasJogador1(int jogadasJogador1) { nJogadasJogador1 = jogadasJogador1; } public int getNJogadasJogador2() { return nJogadasJogador2; } nJogadasJogador2 = jogadasJogador2; } public int getVez() { return vez; }

public void setVez(int vez) { this.vez = vez; } public int getFimJogo() { return fimJogo; } public void setFimJogo(int fimJogo) { this.fimJogo = fimJogo; } public int getVencedor() { return vencedor; } public void setVencedor(int vencedor) { this.vencedor = vencedor; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public String getPos1() { return this.tabuleiro.get(0); } public void setPos1(String pos1) { this.pos1 = pos1; } public String getPos2() { return this.tabuleiro.get(1); } public void setPos2(String pos2) { this.pos2 = pos2; } public String getPos3() { return this.tabuleiro.get(2); } public void setPos3(String pos3) { this.pos3 = pos3; } public String getPos4() { return this.tabuleiro.get(3); } public void setPos4(String pos4) { this.pos4 = pos4; } public String getPos5() { return this.tabuleiro.get(4); } public void setPos5(String pos5) { this.pos5 = pos5; } public String getPos6() { return this.tabuleiro.get(5); } public void setPos6(String pos6) { this.pos6 = pos6; } public String getPos7() { return this.tabuleiro.get(6); } public void setPos7(String pos7) { this.pos7 = pos7; } public String getPos8() { return this.tabuleiro.get(7); } public void setPos8(String pos8) { this.pos8 = pos8; } public String getPos9() { return this.tabuleiro.get(8);

}

Criando a classe de controle do Jogo

1- Crie uma nova classe no pacote de controle. De o nome de JogoControl

public void setPos9(String pos9) { this.pos9 = pos9; } }

2- Coque o código abaixo no corpo desta classe

package br.santacruz.jogodavelhaweb2.control; import br.santacruz.jogodavelhaweb2.model.vo.JogoVo; public class JogoControl { public int verificaJogada(int jogada, JogoVo jogoVo) { if (jogada > 0 && jogada < 10) { if (jogoVo.getTabuleiro().get(jogada -1).equals(" ")) return 1; else return 0; } else return 0; } public JogoVo realizaJogada(int jogada, JogoVo jogoVo) { String simbolo = ""; if (jogoVo.getVez() == 1) simbolo = jogoVo.getSimboloJogador1(); else simbolo = jogoVo.getSimboloJogador2(); jogoVo.getTabuleiro().set(jogada-1,simbolo); //Iverte a Vez if (jogoVo.getVez() == 1) { jogoVo.setVez(2); jogoVo.setNJogadasJogador1(jogoVo.getNJogadasJogador1()+1); } else { jogoVo.setVez(1); jogoVo.setNJogadasJogador2(jogoVo.getNJogadasJogador2()+1); } return jogoVo; } public int verificaVencedor(JogoVo jogoVo) { if ( (jogoVo.getTabuleiro().get(0).equals("X")) && (jogoVo.getTabuleiro().get(1).equals("X")) && (jogoVo.getTabuleiro().get(2).equals("X"))) return 1; else if ( (jogoVo.getTabuleiro().get(3).equals("X")) && (jogoVo.getTabuleiro().get(4).equals("X")) && (jogoVo.getTabuleiro().get(5).equals("X"))) return 1; else if ( (jogoVo.getTabuleiro().get(6).equals("X")) && (jogoVo.getTabuleiro().get(7).equals("X")) && (jogoVo.getTabuleiro().get(8).equals("X"))) return 1; else if ( (jogoVo.getTabuleiro().get(0).equals("X")) && (jogoVo.getTabuleiro().get(3).equals("X")) && (jogoVo.getTabuleiro().get(6).equals("X"))) return 1; else if ( (jogoVo.getTabuleiro().get(1).equals("X")) && (jogoVo.getTabuleiro().get(4).equals("X")) && (jogoVo.getTabuleiro().get(7).equals("X"))) return 1; else if ( (jogoVo.getTabuleiro().get(2).equals("X")) && (jogoVo.getTabuleiro().get(5).equals("X")) && (jogoVo.getTabuleiro().get(8).equals("X"))) return 1; else if ( (jogoVo.getTabuleiro().get(0).equals("X")) && (jogoVo.getTabuleiro().get(4).equals("X")) && (jogoVo.getTabuleiro().get(8).equals("X"))) return 1; else if ( (jogoVo.getTabuleiro().get(2).equals("X")) && (jogoVo.getTabuleiro().get(4).equals("X")) && (jogoVo.getTabuleiro().get(6).equals("X"))) return 1;

else if ( (jogoVo.getTabuleiro().get(0).equals("O")) && (jogoVo.getTabuleiro().get(1).equals("O")) && (jogoVo.getTabuleiro().get(2).equals("O"))) return 2; else if ( (jogoVo.getTabuleiro().get(3).equals("O")) && (jogoVo.getTabuleiro().get(4).equals("O")) && (jogoVo.getTabuleiro().get(5).equals("O"))) return 2; else if ( (jogoVo.getTabuleiro().get(6).equals("O")) && (jogoVo.getTabuleiro().get(7).equals("O")) && (jogoVo.getTabuleiro().get(8).equals("O"))) return 2; else if ( (jogoVo.getTabuleiro().get(0).equals("O")) && (jogoVo.getTabuleiro().get(3).equals("O")) && (jogoVo.getTabuleiro().get(6).equals("O"))) return 2; else if ( (jogoVo.getTabuleiro().get(1).equals("O")) && (jogoVo.getTabuleiro().get(4).equals("O")) && (jogoVo.getTabuleiro().get(7).equals("O"))) return 2; else if ( (jogoVo.getTabuleiro().get(2).equals("O")) && (jogoVo.getTabuleiro().get(5).equals("O")) && (jogoVo.getTabuleiro().get(8).equals("O"))) return 2; else if ( (jogoVo.getTabuleiro().get(0).equals("O")) && (jogoVo.getTabuleiro().get(4).equals("O")) && (jogoVo.getTabuleiro().get(8).equals("O"))) return 2; else if ( (jogoVo.getTabuleiro().get(2).equals("O")) && (jogoVo.getTabuleiro().get(4).equals("O")) && (jogoVo.getTabuleiro().get(6).equals("O"))) return 2; else return 0; } public int verificaFimDeJogo(JogoVo jogoVo) { if (jogoVo.getNJogadasJogador1()+jogoVo.getNJogadasJogador2() >= 9) return 1; else if (this.verificaVencedor(jogoVo) != 0) return 1; else return 0; } }

Criando a View

1- O objetivo é desenvolver um Html parecido com o apresentado abaixo

2- Para tanto, criar um novo arquivo JSP conforme apresentado nas figuras abaixo:

3- Clicar em Finish e na tela seguinte colocar o código listado abaixo.

4-

<%@ page contentType="text/html; charset=ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script> function jogar(pos) { document.form1.txtjogada.value = pos; document.form1.submit(); } </script> </head> <body> <form name="form1" action="EscutaJogadaServlet" method="get"> <input type="hidden" name="txtjogada"/> <table border="1"> <tr> <td><input type="button" value= "<c:out value="${jogoVo.pos1}"/>" onclick="jogar(1)"/></td> <td><input type="button" value="<c:out value="${jogoVo.pos2}"/>" onclick="jogar(2)"/></td> <td><input type="button" value="<c:out value="${jogoVo.pos3}"/>" onclick="jogar(3)"/></td> </tr> <tr> <td><input type="button" value="<c:out value="${jogoVo.pos4}"/>" onclick="jogar(4)"/></td> <td><input type="button" value="<c:out value="${jogoVo.pos5}"/>" onclick="jogar(5)"/></td> <td><input type="button" value="<c:out value="${jogoVo.pos6}"/>" onclick="jogar(6)"/></td> </tr> <tr> <td><input type="button" value="<c:out value="${jogoVo.pos7}"/>" onclick="jogar(7)"/></td> <td><input type="button" value="<c:out value="${jogoVo.pos8}"/>" onclick="jogar(8)"/></td> <td><input type="button" value="<c:out value="${jogoVo.pos9}"/>" onclick="jogar(9)"/></td> </tr> </table> </form> <c:out value="${jogoVo.msg}"/> <table> <tr> <td>Jogador 1: <c:out value="${jogoVo.simboloJogador1}"/></td> <td>Jogadas: </td> </tr> <tr> <td>Jogador 2: <c:out value="${jogoVo.simboloJogador2}"/></td> <td>Jogadas: </td> </tr> </table> Vez: <c:out value="${jogoVo.vez}"/> </body> </html>

Importar as bibliotecas do JSTL conforme figuras abaixo

Construindo o Servlet

1- Clique com o botão direito no pacote servlets e crie um novo servlet

2- Insira o código abaixo no servlet criado

package br.santacruz.jogodavelhaweb2.control.servlets; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import br.santacruz.jogodavelhaweb2.control.JogoControl; import br.santacruz.jogodavelhaweb2.model.vo.JogoVo; /** * Servlet implementation class EscutaJogadaServlet */ public class EscutaJogadaServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public EscutaJogadaServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub processRequest(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //Codigo da minha aplicacao! JogoVo jvo = (JogoVo) request.getSession().getAttribute("jogoVo"); if (jvo == null) { //Jogo Novo! jvo = new JogoVo(); request.getSession().setAttribute("jogoVo", jvo); } jvo = (JogoVo) request.getSession().getAttribute("jogoVo"); if (jvo.getFimJogo() == 1) { jvo = new JogoVo(); } String jogada = request.getParameter("txtjogada"); if (jogada == null) { request.getSession().setAttribute("jogoVo", jvo); RequestDispatcher view = request.getRequestDispatcher("index.jsp"); view.forward(request, response); } int jogadaint = Integer.parseInt(jogada); JogoControl jc = new JogoControl();

//Valida if (jc.verificaJogada(jogadaint,jvo) == 1) jvo = jc.realizaJogada(jogadaint,jvo); else jvo.setMsg("JOGADA INVALIDA!"); if (jc.verificaFimDeJogo(jvo) == 1) { jvo.setFimJogo(1); if (jc.verificaVencedor(jvo) == 1) jvo.setMsg("Fim de Jogo! Vencedor Jogador 1"); else if (jc.verificaVencedor(jvo) == 2) jvo.setMsg("Fim de Jogo! Vencedor Jogador 2"); else jvo.setMsg("Fim de Jogo! DEU VELHA!"); } request.getSession().setAttribute("jogoVo", jvo); RequestDispatcher view = request.getRequestDispatcher("jogoView.jsp"); view.forward(request, response); } }

Basta testar agora e verificar se tudo esta funcion ando! Bom divertimento!