APS - JOGO em JAVA - Parte Escrita

Prévia do material em texto

UNIVERSIDADE PAULISTA – UNIP 
 APS – ATIVIDADES PRÁTICAS SUPERVISIONADAS CURSO DE 
CIÊNCIA DA COMPUTAÇÃO 3º SEMESTRE – NOTURNO 
 
 
 
 
 
 
ALUNO: Darlan Thiago Costa RA: N23436-9 
ALUNO: Hudson Ruan da Silva Costa RA: D53BFH-8 
 
 
 
 
 
 
 
 
 
 
 
Brasília 
2019 
 
 
 
 
SUMÁRIO 
 
OBJETIVO E MOTIVAÇÃO DO TRABALHO ........................................... 3 
INTRODUÇÃO .......................................................................................... 4 
REGRAS DO JOGO ................................................................................. 5 
PLANO E DESENVOLVIMENTO DO JOGO ............................................ 6 
PROJETO ................................................................................................. 7 
RELATÓRIO COM LINHAS DE CÓDIGO ................................................ 8 
CÓDIGO FONTE: ................................................................................. 8 
 BIBLIOGRAFIA:....................................................................................25 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3 
 
OBJETIVO E MOTIVAÇÃO DO TRABALHO 
 
O objetivo principal da APS do 3 semestre é criar um jogo com interface 
gráfica feita na linguagem JAVA. 
O mercado hoje em dia está dominado pelo desenvolvimento de jogos 
em C/C++, porém, devido ser uma linguagem de grande desempenho com o 
software e hardware, a linguagem de programação Java tem conquistado a 
cada dia seu espaço, graças a constante evolução em desempenho, sua 
portabilidade e magnificas façanhas. 
O jogo trata-se de um labirinto, porém, será contato uma história do jogo 
antes de iniciar-se, para que o usuário que estiver jogando, sinta-se 
familiarizado com o ambiente do jogo. 
O objetivo final deste projeto, é conscientizar o usuário a preservar a 
natureza e diminuir os impactos de poluições causados por grandes 
metrópoles. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4 
 
INTRODUÇÃO 
 
A proposta desse projeto, além de atender o pré-requisito da APS, que é a 
criação de um jogo para conscientizar sobre as desvantagens de um 
metrópole/megalópole e os impactos do lixo descartado pelo ser humano no 
meio ambiente. 
 Alinhado com uma história bem elaborada, o trabalho visa por meio de 
interface gráfica no âmbito de um jogo, alertar sobre os fatores citados no 
primeiro parágrafo. 
 A crônica permeia pela vida de um jovem biólogo que tenta escapar da 
cidade por meio de becos vivos, porém, ao decorrer pelas fases, percebe-se 
que não é uma tarefa muito fácil de se completar. 
 O jogo funciona através de eventos do JavaScript, que checam se o mouse 
sai ou não dos blocos, ou então, se entram ou não no início e na saída. 
 Ele conta também com um sistema de ranking armazenando dados em um 
servidor MYSQL. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5 
 
REGRAS DO JOGO 
 
O jogo começa com uma história para familiarizar o usuário do objetivo 
do labirinto, logo em seguida, aparece o labirinto contendo apenas três fases, 
fácil, média e difícil. 
Ao entrar com o mouse no primeiro bloco do labirinto (o bloco mais 
acima da tela), o objetivo é alcançar o último bloco sem sair do espaço que os 
blocos ocupam, ou seja, ao tocar nas paredes do labirinto, o jogo é perdido. 
 Quando o usuário encostar no último bloco o jogador será enviado 
para tela de vitória, aonde poderá se identificar com 3 caracteres e gravar sua 
pontuação no ranking do jogo. 
 O jogo conta com 3 dificuldades, tendo como diferença entre elas o 
tamanho de cada bloco e quantidade deles. 
 O jogador deve percorrer o labirinto o mais rápido possível para obter 
uma pontuação alta, quanto mais demorar, menor será a pontuação. 
 
Obs.: (Mantenha o cursor do mouse em cima do percurso para que se 
inicie o jogo.) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6 
 
PLANO E DESENVOLVIMENTO DO JOGO 
 
O jogo será executado em uma página de navegador. 
O foi estruturado em HTML e o layout foi feito em CSS junto com 
Bootstrap. 
 O jogador poderá escolher entre três níveis de dificuldade: fácil, médio, 
difícil. 
 A parte central da página é o local onde acontecerá as ações do jogo, 
vale destacar que as funcionalidades do jogo foram utilizadas a linguagem 
JavaScript. 
O labirinto que vai ser gerado por blocos de forma randômica, utilizando 
a função Math.random, e de acordo com o nível escolhido que será gerado o 
caminho a ser percorrido, com um efeito de deslizar da direita pra esquerda para 
indicar que está iniciando o jogo. 
Para começar a jogar o player precisa passar o mouse pela barra verde 
para ativar onmouseenter e seguir o caminho demarcado pelo sistema, até 
passar pela barra vermelha, para adicionar ao evento onmouseout e concluir o 
jogo. Caso tenha desviado o mouse para outro canto da tela que não seja o local 
demarcado, o mouse será adicionado ao evento onmouseout e o jogo será 
finalizado. 
 Após concluir o jogo, aparecerá a próxima etapa, o jogador deverá inserir suas 
iniciais para saber qual sua pontuação no jogo. 
 A pontuação será baseada no número de blocos que foram passados pelo 
cursor e no menor tempo até possível para concluir o jogo. O usuário saberá 
qual sua colocação no ranking das pessoas que jogaram na máquina. 
 
Obs.: Está parte foi utilizada Java com API JDBC para gravar o ranking no 
localhost do mySQL. 
 
 
 
 
 
7 
 
PROJETO 
O projeto foi estruturado em duas partes: 
A primeira parte é o jogo em si, aonde temos o Javascript construindo a 
estrutura do labirinto com efeitos e calculados a para construção aleatória do 
mesmo. 
A segunda parte é o sistema de ranking feito com Java, ele consiste em gravar 
os dados da partida do jogador (pontuação) e salvar no banco de dados estes 
dados. 
 
No jogo utilizamos da função Math.random() para gerar números aleatórios e 
através deles decidir para qual lado o labirinto deve se "construir". Através de 
eventos do DOM reconhecemos se o jogador saiu do labirinto ou entrou no 
campo de vitória. 
 
Na parte de ranking foi utilizado o driver JDBC para se conectar com o banco 
de dados e gravar a entidade ranking dentro dele. Usamos esse driver tambem 
para pegar os rankings do banco de dados e mostrar para o usuario os 
rankings em ordem do maior para o menor. 
 
Obs.: O código das bibliotecas como Bootstrap e Jquery não estão presentes. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8 
 
 
RELATÓRIO COM LINHAS DE CÓDIGO 
 
CÓDIGO FONTE: 
 
estilo.css 
 
body { 
 overflow-x: hidden; 
 /* background-color: #606060; */ 
 background-image: url(../assets/img/background.png); 
 background-size: cover; 
 font-family: Gamer; 
} 
@font-face{ 
 font-family: "Gamer"; 
 src: url(PressStartReg.woff) 
} 
h1{ 
 font-size: 60px; 
} 
.fonte{ 
 font-size: 20px; 
} 
.tamanho{ 
 font-size: 50px; 
} 
.borda-black { 
 border: 1px solid black !important; 
} 
.borda-azul{ 
 border: 1px solid blue !important; 
} 
.borda-preta, { 
 border: 1px solid black !important; 
 background-color: black; 
} 
.planoFundo { 
 background-color: rgba(105,128,153,0.5); 
} 
 
.background-game { 
 /* background: url("../assets/img/predios.jpg"); */ 
 /* background-size: 65px; */ 
 /* background-size: cover; */ 
 /* background-repeat: repeat-x; */ 
 /* background: linear-gradient(#191d19, #191d19, #191d19 ,#11cb09 ); 
*/ 
 
} 
.muro { 
 background: url("../assets/img/beco-grama.jpg"); 
 background-color: black; 
 background-size: cover; 
 
 
 
 
9 
 
FactoryConnection.java 
package util; 
 
import java.sql.Connection; 
import java.sql.DriverManager; 
import java.sql.SQLException; 
 
public class DB { 
 
 private static Connection conn = null; 
 
 public static Connection getConnection() { 
 try { 
 DriverManager.registerDriver(new com.mysql.jdbc.Driver()); 
 conn = 
DriverManager.getConnection("jdbc:mysql://localhost:3306/aps","root", 
"2525"); 
 
 } catch (SQLException e) { 
 throw new RuntimeException(e.getMessage()); 
 } 
 return conn; 
 } 
 
 public static void closeConnection() { 
 try { 
 if (conn != null) { 
 conn.close(); 
 } 
 }catch (SQLException e) { 
 throw new RuntimeException(e.getMessage()); 
 } 
 } 
 
 
} 
 
gameOver.jsp 
 
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
<div class="container-fluid"> 
 <div class="row"> 
 <div class="col-3 align-self-end ml-n4"> 
 </div> 
 <div class="col-7" style="margin-top: 10%;"> 
 <h1 class="text-center"> 
 <span style="color: #4AAE59;">GAME</span> 
 <span style="color: black;" >OVER</span> 
 </h1> 
 <div class="row"> 
 <div class="col d-flex justify-content-center"> 
 <button id="retry" class="btn btn-dark fonte m-2 p-3 mr-4" 
style="letter-spacing: -5px">Reiniciar</button> 
 </div> 
 </div> 
 </div> 
 </div> 
</div> 
 
 
<%-- <div class="row"> 
 <div class="col-12"> 
 <button type="button" id="retry" class="btn btn-danger w-100 mt-5">Tente 
de novo</button> 
10 
 
 </div> 
</div> --%> 
 
<script> 
 $("#retry").focus(); 
 $("#retry").click(function(event) { 
 $("#tela").load("nivelSelect.jsp"); 
 
 $("#inicio").mouseenter(function() {}); 
 $("#caminho").mouseleave(function() {}); 
 $(".vencer").mouseenter(function() {}); 
 
 }); 
</script> 
 
getRanks.jsp 
 
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
<%@ page import="entities.Ranking, entities.dao.RankingDao, java.util.List, 
java.util.ArrayList" %> 
<% 
 String nivel = request.getParameter("nivel"); 
 int quantidade = Integer.parseInt(request.getParameter("quantidade")); 
 
 RankingDao rankDao = new RankingDao(); 
 List<Ranking> ranking = new ArrayList(); 
 if(nivel != "nulo" && quantidade != 0){ 
 ranking = rankDao.getRankings(quantidade, nivel); 
 } 
 
%> 
 
 
<table style="font-size: 11px !important;" class="table table-hover table-
striped table-dark table-sm"> 
<thead> 
 <tr> 
 <th scope="col">#</th> 
 <th scope="col">Nome Jogador</th> 
 <th scope="col">Pontuação</th> 
 <th scope="col">Data</th> 
 </tr> 
</thead> 
<tbody> 
 <% 
 int c = 1; 
 for (Ranking rank : ranking){ 
 
 %> 
 <tr> 
 <th scope="row"><%=c%></th> 
 <td><%=rank.getNomeJogador()%></td> 
 <td><%=rank.getPontuacao()%></td> 
 <td><%=rank.getDataRank()%></td> 
 </tr> 
 
 <% c+= 1;}%> 
</tbody> 
</table> 
 
11 
 
gravarRanking.jsp 
 
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
<%@ page import="entities.Ranking, entities.dao.RankingDao, java.util.Date" %> 
<% 
 
 String nomeJogador = request.getParameter("nomeJogador"); 
 int pontuacao = Integer.parseInt(request.getParameter("pontuacao")); 
 String nivel = request.getParameter("nivel"); 
 
 Ranking rank = new Ranking(pontuacao, new Date(), nomeJogador, nivel); 
 RankingDao dao = new RankingDao(); 
 dao.addRanking(rank); 
 
%> 
 
index.jsp 
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>APS</title> 
 <link rel="icon" href="assets/img/icone_labirinto.ico"> 
 <link rel="stylesheet" href="css/bootstrap.min.css"> 
 <link rel="stylesheet" href="css/estilo.css"> 
 <link rel="stylesheet" href="css/starwarsintro.css"> 
 </head> 
 <body> 
 <div class="row" id="topo" hidden="true"></div> 
 <div class="row" hidden="true" id="jogo-conteudo"> 
 <div class="col-2 "></div> 
 <div class="col-7 ml-5 planoFundo borda-black"> 
 <div id="tela"> 
 </div> 
 </div> 
 <div class="col-2 "></div> 
 </div> 
 
 
 
 <div class="star-wars-intro" id="lore"> 
 <p class="intro-text" style="display: absolute; bottom: 100px;font-
family: Gamer;"> 
 <span style="color: #4AAE59;font-size: 100px;">BIO</span><br> 
 <span style="color: black;font-size: 100px;">GAME</span> 
 </p> 
 <div class="main-content"> 
 <div class="title-content"> 
 <p class="content-header">EPISÓDIO IV<br/>Uma nova esperança</p> 
 <br> 
 <p class="content-body text-center"> 
 Certa vez, existiu uma cidade totalmente consumida pela 
urbanização.<br> 
 Industrias poluem enquanto os habitantes produzem quantidades 
massivas de lixo. <br> 
 Porém, no meio de todo este caos, existe um jovem biólogo, cuja a 
luz não foi apagada pelo cinza da cidade.<br> 
 A única esperança existente para escapar desse labirinto é 
esgueirasse pelos becos que ainda possuem vida 
 <br> 
 Ajude-o a escapar! 
 </p> 
 </div> 
 </div> 
 </div> 
 
12 
 
 <script src="js/jquery-3.3.1.min.js" charset="utf-8"></script> 
 <script src="js/bootstrap.min.js" charset="utf-8"></script> 
 <script src="js/javascript.js" charset="utf-8"></script> 
 </body> 
</html> 
 
javascript.js 
 
$(document).ready(() => { 
 setTimeout(function() { 
 terminaLore(); 
 }, 32000); 
 
 
 $("#topo").css("height", (window.innerHeight / 6) + "px"); 
 $("#tela").css("height", (window.innerHeight / 1.5) + "px"); 
 var nivel = 50; 
 
 $("#tela").load("nivelSelect.jsp"); 
 
 
}); 
 
function setLabirinto(nivel){ 
 $("#tela").addClass("background-game"); 
 $("#tela").empty(); 
 $("#tela").append("<div id=\"caminho\"></div>"); 
 inicia(nivel); 
 
 setLabRoad(nivel); 
 delay = 1500; 
 
 var alturaTela = $("#tela").css("height"); 
 alturaTela = alturaTela.split("px")[0]; 
 alturaTela = parseInt(alturaTela); 
 
 $("#caminho > div:last-child").removeClass("muro"); 
 $("#caminho > div:last-child").css("background-color", "red"); 
 $("#caminho > div:last-child").addClass("vencer"); 
 $(".vencer").css("border-color", "red"); 
 var vertical = getVertical(); 
 $("#caminho > div:last-child").css("height", alturaTela - vertical + 
"px"); 
 setLoseAndWin(nivel); 
} 
 
function inicia(nivel){ 
 var horizontal = Math.floor((Math.random() * 15) + 1); 
 horizontal *= 50; 
 $("#caminho").append("<div id=\"inicio\" style=\" background-color: 
green !important; position: absolute; left: 0px; top: 0px; height:" + 
nivel + "px; width: " + nivel + "px;\"></div>"); 
 $("#caminho > div:last-child").animate({left: horizontal + "px"}, 
1500); 
 $("#caminho > div:last-child").css("left", horizontal + "px"); 
} 
 
var delay = 1500; 
function move(direcao, nivel){ 
 var vertical = getVertical() 
 var horizontal = getHorizontal(); 
 if(direcao == "baixo"){ 
13 
 
 vertical += nivel; 
 }else if (direcao == "esquerda"){ 
 horizontal -= nivel; 
 }else if (direcao == "direita"){ 
 horizontal += nivel; 
 } 
 
 $("#caminho").append("<div class=\"muro\" style=\"position: 
absolute; top:" + vertical + "px; left: 0px; height:" + nivel + "px; 
width: " + nivel + "px;\"></div>"); 
 $("#caminho > div:last-child").animate({left: horizontal + "px"}, 
delay); 
 $("#caminho > div:last-child").css("left", horizontal + "px"); 
 delay += nivel * 2; 
} 
 
function getHorizontal(){ 
 var horizontal = $("#caminho > div:last-child").css("left"); 
 horizontal = horizontal.split("px")[0]; 
 horizontal = parseInt(horizontal); 
 return horizontal; 
} 
 
function getVertical(){ 
 var vertical = $("#caminho > div:last-child").css("top"); 
 vertical = vertical.split("px")[0]; 
 vertical = parseInt(vertical); 
 return vertical; 
} 
 
function calcPontos(tempoInicial) { 
 var muros = $("#caminho > div").length; 
 var tempoFinal = new Date().getTime(); 
 var tempo = tempoFinal - tempoInicial; 
 var pontuacao = 50000 - Math.floor((tempo / muros) * 42); 
 return pontuacao; 
} 
 
function setLoseAndWin(nivel) { 
 var str_nivel = ""; 
 if(nivel == 50){ 
 str_nivel = "facil"; 
 }else if (nivel == 25){str_nivel = "medio"; 
 }else if (nivel == 13){ 
 str_nivel = "dificil"; 
 } 
 
 $("#inicio").mouseenter(function() { 
 var tempoInicial = new Date().getTime(); 
 $("#caminho").mouseleave(function() { 
 $("#tela").removeClass("background-game"); 
 $("#tela").empty(); 
 $("#tela").load("gameOver.jsp"); 
 }); 
 $(".vencer").mouseover(function() { 
 $("#tela").removeClass("background-game"); 
 var pontuacao = calcPontos(tempoInicial); 
 
 $("#tela").empty(); 
 $("#tela").load("winGame.jsp", { 
 nivel: str_nivel, 
14 
 
 pontuacao: pontuacao 
 }); 
 }) 
 }) 
} 
 
function setLabRoad(nivel) { 
 var vertical = getVertical(); 
 var horizontal = getHorizontal(); 
 var rand = 0; 
 var anterior_move1 = 0; 
 var anterior_move2 = 0; 
 var descidas; 
 var verticalMax = nivel == 13 ? 450 : 440; 
 
 while(vertical <= verticalMax){ 
 rand = Math.floor(Math.random() * 3 + 1); 
 
 if(rand == 1){ 
 if(canMoveLeft(anterior_move1, anterior_move2, horizontal)){ 
 descidas = 0; 
 move("esquerda", nivel); 
 anterior_move2 = anterior_move1; 
 anterior_move1 = rand; 
 } 
 }else if(rand == 2){ 
 if(canMoveDown(descidas)){ 
 move("baixo", nivel); 
 descidas += 1; 
 anterior_move2 = anterior_move1; 
 anterior_move1 = rand; 
 } 
 }else if (rand == 3){ 
 if(canMoveRight(anterior_move1, anterior_move2, horizontal)){ 
 descidas = 0; 
 move("direita", nivel); 
 anterior_move2 = anterior_move1; 
 anterior_move1 = rand; 
 } 
 } 
 vertical = getVertical(); 
 horizontal = getHorizontal(); 
 anterior_move(1); 
 } 
} 
 
function canMoveLeft(anterior_move1, anterior_move2, horizontal) { 
 return (anterior_move1 != 3 && horizontal > 10 && anterior_move2 != 
3); 
} 
 
function canMoveDown(descidas) { 
 return (descidas <= 2); 
} 
 
function canMoveRight(anterior_move1, anterior_move2, horizontal) { 
 return (anterior_move1 != 1 && horizontal < 750 && anterior_move2 != 
1); 
} 
 
function anterior_move(past_move) { 
 var teste = $("#caminho > div:nth-last-child(" + past_move + ")"); 
15 
 
 // console.log(teste); 
} 
 
function terminaLore(){ 
 $("#lore").animate({"opacity" : "0"}, 2000); 
 setTimeout(function() { 
 $("#lore").attr('hidden', 'true'); 
 $("#topo").removeAttr('hidden'); 
 $("#jogo-conteudo").removeAttr('hidden'); 
 }, 2000); 
} 
 
nivelSelect.jsp 
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
<div class="container-fluid"> 
 <div class="row"> 
 <div class="col-3 align-self-end" style="bottom: -30px;"> 
 <img src="assets/img/arvore.png" width="150px"> 
 </div> 
 
 <div class="col-6"> 
 <h1 class="text-center"> 
 <span style="color: #4AAE59">BIO</span> 
 <span style="color: black">GAME</span> 
 </h1> 
 <div class="row"> 
 <div class="col d-flex justify-content-center"> 
 <button style="width: 174px;" id="facil" class="btn btn-lg btn-
success fonte m-1 p-3">Fácil</button> 
 </div> 
 </div> 
 <div class="row"> 
 <div class="col d-flex justify-content-center"> 
 <button style="width: 174px;" id="medio" class="btn btn-lg btn-
warning fonte m-1 p-3 text-white">Médio</button> 
 </div> 
 </div> 
 <div class="row"> 
 <div class="col d-flex justify-content-center" style="letter-
spacing: -5px;"> 
 <button style="width: 174px;" id="dificil" class="btn btn-lg 
btn-danger fonte m-1 p-3">Difícil</button> 
 </div> 
 </div> 
 <div class="row"> 
 <div class="col d-flex justify-content-center"> 
 <button id="ranking" class="btn btn-sm btn-secondary fonte m-1" 
style="padding: 14px; letter-spacing: -4px; width: 174px;">Ranking</button> 
 </div> 
 </div> 
 
 </div> 
 
 <div class="col align-self-end" style="bottom: -28px;"> 
 <img src="assets/img/predio.png" width="70px" class="float-right"> 
 </div> 
 </div> 
</div> 
 
 
 
<%-- <br> 
<button type="button" class="btn btn-warning" id="ranking">Ranking</button> 
<br> 
<br> 
16 
 
<div class="row"> 
 <div class="col-12"> 
 <button type="button" id="facil" class="btn btn-secondary w-
100">Facil</button> 
 </div> 
</div> 
<br> 
<div class="row"> 
 <div class="col-12"> 
 <button type="button" id="medio" class="btn btn-primary w-
100">Medio</button> 
 </div> 
</div> 
<br> 
<div class="row"> 
 <div class="col-12"> 
 <button type="button" id="dificil" class="btn btn-danger w-
100">Dificil</button> 
 </div> 
</div> --%> 
 
<script> 
 $("#ranking").click(function() { 
 $("#tela").load("Ranking.jsp"); 
 }) 
 
 $("#facil").click(function() { 
 setLabirinto(50); 
 }) 
 $("#medio").click(function() { 
 setLabirinto(25); 
 }) 
 $("#dificil").click(function() { 
 setLabirinto(13); 
 }) 
 
</script> 
 
 
Ranking.java 
package entities; 
 
import java.util.Date; 
 
public class Ranking { 
 private int pontuacao; 
 private Date dataRank; 
 private String nomeJogador; 
 private String nivel; 
 
 public Ranking(){} 
 
 public Ranking(int pontuacao, Date dataRank, String nomeJogador){ 
 this.pontuacao = pontuacao; 
 this.dataRank = dataRank; 
 this.nomeJogador = nomeJogador; 
 } 
 
 public Ranking(int pontuacao, Date dataRank, String nomeJogador, 
String nivel){ 
 this.pontuacao = pontuacao; 
 this.dataRank = dataRank; 
 this.nomeJogador = nomeJogador; 
 this.nivel = nivel; 
17 
 
 } 
 
 public int getPontuacao(){ 
 return this.pontuacao; 
 } 
 
 public void setPontuacao(int pontuacao){ 
 this.pontuacao = pontuacao; 
 } 
 
 public Date getDataRank(){ 
 return this.dataRank; 
 } 
 
 public void setDataRank(Date dataRank){ 
 this.dataRank = dataRank; 
 } 
 
 public String getNomeJogador(){ 
 return this.nomeJogador; 
 } 
 
 public void setNomeJogador(String nomeJogador){ 
 this.nomeJogador = nomeJogador; 
 } 
 
 public String getNivel(){ 
 return this.nivel; 
 } 
 
 public void setNivel(String nivel){ 
 this.nivel = nivel; 
 } 
} 
 
Ranking.jsp 
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
<div class="h-100 w-100" style=" overflow: hidden;"> 
 <div class="row mt-3"> 
 <div class="col-4"> 
 <select style="font-size: 11px !important;" class="form-control" 
id="rank-nivel"> 
 <option value="nulo">Selecione o nivel</option> 
 <option value="facil">Facil</option> 
 <option value="medio">Medio</option> 
 <option value="dificil">Dificil</option> 
 </select> 
 </div> 
 <div class="col-2"> 
 <button style="font-size: 11px !important;" type="button" id="jogar" 
class="btn btn-danger w-100">Jogar</button> 
 </div> 
 <div class="col-2"> 
 <button style="font-size: 11px !important;" type="button" id="procurar-
rank" class="btn btn-dark w-100">Procurar</button> 
 </div> 
 <div class="col-4"> 
 <select style="font-size: 11px !important;" class="form-control" 
id="qtd-rank"> 
 <option value="0">Selecione quantos</option> 
 <option value="10">10</option> 
 <option value="20">20</option> 
 <option value="30">30</option> 
 <option value="40">40</option> 
18 
 
 <option value="50">50</option> 
 </select> 
 </div> 
 </div> 
 <div id="ranking" class="mt-2 table-responsive " style="height: 92% 
!important;"> 
 </div> 
</div> 
<script> 
 $("#procurar-rank").click(function(e) { 
 $("#ranking").load("getRanks.jsp", { 
 nivel: $("#rank-nivel").val(), 
 quantidade: $("#qtd-rank").val() 
 }) 
 }); 
 
 $("#jogar").click(function() { 
 $("#tela").load("nivelSelect.jsp"); 
 }); 
 $(document).ready(function() { 
 $("#procurar-rank").click(); 
 }); 
</script> 
 
RankingDao.javapackage entities.dao; 
 
import util.FactoryConnection; 
import java.sql.Connection; 
import entities.Ranking; 
import java.sql.PreparedStatement; 
import java.sql.SQLException; 
import java.util.Date; 
import java.sql.ResultSet; 
import java.util.List; 
import java.util.ArrayList; 
 
public class RankingDao { 
 
 Connection conn = null; 
 
 public RankingDao(){} 
 
 public RankingDao(Connection conn){ 
 this.conn = conn; 
 } 
 
 public void addRanking(Ranking rank) throws SQLException{ 
 PreparedStatement stmt = null; 
 StringBuilder sql = new StringBuilder(); 
 sql.append("INSERT INTO ranking (pontuacao, dataRank, nomeJogador, 
nivel) "); 
 sql.append("VALUE (?, ?, ?, ?) ;"); 
 try { 
 conn = FactoryConnection.getConnection(); 
 stmt = conn.prepareStatement(sql.toString()); 
 stmt.setInt(1, rank.getPontuacao()); 
 stmt.setDate(2, new java.sql.Date(rank.getDataRank().getTime())); 
 stmt.setString(3, rank.getNomeJogador()); 
 stmt.setString(4, rank.getNivel()); 
 stmt.executeUpdate(); 
 }catch(SQLException e){ 
 throw new SQLException(e.getMessage()); 
19 
 
 }finally { 
 if(conn != null){ 
 conn.close(); 
 } 
 } 
 } 
 
 public List<Ranking> getRankings(int quantidade, String nivel) throws 
SQLException{ 
 List<Ranking> ranking = new ArrayList<>(); 
 PreparedStatement stmt = null; 
 ResultSet rs = null; 
 StringBuilder sql = new StringBuilder(); 
 sql.append("SELECT pontuacao, dataRank, nomeJogador FROM ranking 
WHERE nivel = ? ORDER BY pontuacao DESC limit ? ;"); 
 try { 
 conn = FactoryConnection.getConnection(); 
 stmt = conn.prepareStatement(sql.toString()); 
 stmt.setString(1, nivel); 
 stmt.setInt(2, quantidade); 
 rs = stmt.executeQuery(); 
 while(rs.next()){ 
 ranking.add(new Ranking(rs.getInt(1), rs.getDate(2), 
rs.getString(3))); 
 } 
 }catch(SQLException e){ 
 throw new SQLException(e.getMessage()); 
 }finally{ 
 if(conn != null){ 
 conn.close(); 
 } 
 } 
 return ranking; 
 } 
 
 
} 
starwarsintro.css 
/* 
Name: StarWarsIntro.css 
URI: polarnotion.github.io/starwarsintro 
Author: Polar Notion 
Author URI: http://polarnotion.com/ 
Description: A simple CSS library for creating a Star Wars Intro 
Crawl. May the Force be with you. 
Version: 1.0 
*/ 
 
body, html{ 
 height: 100%; 
 min-height: 100vh; 
 margin: 0px; 
} 
 
.star-wars-intro { 
 background: url(../assets/img/background.png) center center; 
 width: 100%; 
 height: 100%; 
 font-family: "Droid Sans", arial, verdana, sans-serif; 
 font-weight: 700; 
 color: #EBD71C; 
20 
 
 background-color: #000; 
 overflow: hidden; 
 position: relative; 
} 
 
.star-wars-intro p.intro-text { 
 position: relative; 
 max-width: 16em; 
 font-size: 200%; 
 font-weight: 400; 
 margin: 20% auto; 
 color: #4ee; 
 opacity: 0; 
 z-index: 1; 
 text-align: center; 
 -webkit-animation: intro 2s ease-out; 
 -moz-animation: intro 2s ease-out; 
 -ms-animation: intro 2s ease-out; 
 -o-animation: intro 2s ease-out; 
 animation: intro 2s ease-out; 
} 
 
.star-wars-intro .main-content{ 
 margin-left: auto; 
 margin-right: auto; 
 position: absolute; 
 z-index: 3; 
 width: 98%; 
 height: 50em; 
 bottom: 0; 
 font-size: 80px; 
 font-weight: bold; 
 /* text-align: justify; */ 
 overflow: hidden; 
 transform-origin: 50% 100%; 
 transform: perspective(350px) rotateX(25deg); 
} 
 
.star-wars-intro .main-content:after { 
 position: absolute; 
 content: ' '; 
 top: 0; 
 bottom: 60%; 
 background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 
100%); 
 pointer-events: none; 
} 
 
.star-wars-intro .space-button { 
 color: #EBD71C; 
 border: 12px solid #EBD71C; 
 padding: 20px; 
 background: transparent; 
 text-decoration: none; 
 margin: 0 auto; 
 display: block; 
 text-align: center; 
} 
 
.star-wars-intro .space-button:hover { 
 background-color: #D2BE03; 
 border-color: #D2BE03; 
21 
 
 color: black; 
} 
 
.star-wars-intro .space-button:active, 
.star-wars-intro .space-button:focus { 
 background-color: #B8A40A; 
 border-color: #B8A40A; 
 color: black; 
} 
 
.star-wars-intro .title-content { 
 position: absolute; 
 top: 100%; 
 animation: scroll 120s linear 2.2s forwards; 
} 
 
.star-wars-intro .title-content > .content-header { 
 text-align: center; 
} 
 
/* Main Image Styles */ 
 
.star-wars-intro .main-logo { 
 position: absolute; 
 width: 2.6em; 
 left: 50%; 
 top: 20vh; 
 font-size: 10em; 
 text-align: center; 
 margin-left: -1.3em; 
 line-height: 0.8em; 
 letter-spacing: -0.05em; 
 color: #000; 
 text-shadow: -2px -2px 0 #EBD71C, 2px -2px 0 #EBD71C, -2px 2px 0 
#EBD71C, 2px 2px 0 #EBD71C; 
 opacity: 0; 
 z-index: 1; 
 -webkit-animation: logo 5s ease-out 2.5s; 
 -moz-animation: logo 5s ease-out 2.5s; 
 -ms-animation: logo 5s ease-out 2.5s; 
 -o-animation: logo 5s ease-out 2.5s; 
 animation: logo 5s ease-out 2.5s; 
} 
 
.star-wars-intro .main-logo > img { 
 max-width: 100%; 
} 
 
@-webkit-keyframes intro { 
 0% { opacity: 1; } 
 90% { opacity: 1; } 
 100% { opacity: 0; } 
} 
 
@-moz-keyframes intro { 
 0% { opacity: 1; } 
 90% { opacity: 1; } 
 100% { opacity: 0; } 
} 
 
@-ms-keyframes intro { 
 0% { opacity: 1; } 
22 
 
 90% { opacity: 1; } 
 100% { opacity: 0; } 
} 
 
@-o-keyframes intro { 
 0% { opacity: 1; } 
 90% { opacity: 1; } 
 100% { opacity: 0; } 
} 
 
@keyframes intro { 
 0% { opacity: 1; } 
 90% { opacity: 1; } 
 100% { opacity: 0; } 
} 
 
 
@-webkit-keyframes logo { 
 0% { -webkit-transform: scale(1); opacity: 1; } 
 50% { opacity: 1; } 
} 
 
@-moz-keyframes logo { 
 0% { -moz-transform: scale(1); opacity: 1; } 
 50% { opacity: 1; } 
 100% { -moz-transform: scale(0.1); opacity: 0; } 
} 
 
@-ms-keyframes logo { 
 0% { -ms-transform: scale(1); opacity: 1; } 
 50% { opacity: 1; } 
 100% { -ms-transform: scale(0.1); opacity: 0; } 
} 
 
@-o-keyframes logo { 
 0% { -o-transform: scale(1); opacity: 1; } 
 50% { opacity: 1; } 
 100% { -o-transform: scale(0.1); opacity: 0; } 
} 
 
@keyframes logo { 
 0% { transform: scale(1); opacity: 1; } 
 50% { opacity: 1; } 
 100% { transform: scale(0.1); opacity: 0; } 
} 
 
@keyframes scroll { 
 0% { top: 100%; } 
 100% { top: -170%; } 
 100% { -webkit-transform: scale(0.1); opacity: 0; } 
} 
 
@media screen and (max-width: 720px) { 
 .star-wars-intro .main-content { 
 font-size: 35px; 
 } 
 .star-wars-intro .title-content { 
 position: absolute; 
 top: 100%; 
 animation: scroll 100s linear 4s forwards; 
 } 
} 
23 
 
 
winGame.jsp 
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
<% 
 
 String str_nivel = request.getParameter("nivel"); 
 String pontuacao = request.getParameter("pontuacao"); 
%> 
 
<div class="container-fluid"> 
 <div class="row"> 
 <div class="col-2 align-self-end ml-n4"> 
 </div> 
 <div class="col-9 "> 
 <h1 class="text-center" id="win"> 
 <span style="color: black;">VOCÊ</span> 
 <span style="color: #4AAE59;" >GANHOU!</span> 
 </h1> 
 <p class="text-center fonte">Digite o nome:</p> 
 <form> 
 <div class="row"> 
 <div class="col-2"></div> 
 <div class="col-10"> 
 <input placeholder="-" id="letra1" type="text" class="form-
control" style="height:120px;width: 120px; font-size: 100px; display: inline 
!important;"> 
 <input placeholder="-" id="letra2" type="text" class="form-
control" style="height:120px;width: 120px; font-size: 100px; display: inline 
!important;"> 
 <input placeholder="-" id="letra3" type="text" class="form-
control" style="height:120px;width: 120px; font-size: 100px; display: inline 
!important;"> 
 </div> 
 </div> 
 </form> 
 <div class="row mt-3"> 
 <div class="col d-flex justify-content-start"><button id="jogar" class="btn btn btn-dark fonte mt-4 " 
style="letter-spacing: -5px;font-size: 15px;">Reiniciar</button> 
 </div> 
 <div class="col"> 
 <p class="mt-4" style="font-size: 20px">PONTUAÇÃO:</p> 
 <span style="font-size: 35px; text-align: 
center;"><%=pontuacao%></span> 
 </div> 
 <div id="buttonRank" class="col d-flex justify-content-end"> 
 <button id="gravar" class="btn btn btn-success fonte mt-4 " 
style="letter-spacing: -1px;font-size: 15px;">Gravar</button> 
 </div> 
 </div> 
 </div> 
 </div> 
</div> 
 
<%-- <h1 class="text-white text-center">Você ganhou!</h1> 
<span class="text-white"><small>PONTUAÇÃO : <%=pontuacao%></small></span> 
<br> 
<label class="text-white" for="nomeJogador">Digite o nome: </label> 
<input type="text" name="nomeJogador" id="nomeJogador" class="form-control"> 
 <button type="button" class="btn btn-danger mt-2" id="jogar">Jogar de 
novo</button> 
<button type="button"class="btn btn-primary mt-2" id="gravar" 
disabled="true">GRAVAR</button> --%> 
 
<script> 
 $("#letra1").focus(); 
 $("#letra1").keyup(function(e) { 
24 
 
 $("#letra1").val($("#letra1").val()[0].toUpperCase()); 
 $("#letra2").focus(); 
 }); 
 $("#letra2").keyup(function() { 
 $("#letra2").val($("#letra2").val()[0].toUpperCase()); 
 $("#letra3").focus(); 
 }); 
 $("#letra3").keyup(function() { 
 $("#letra3").val($("#letra3").val()[0].toUpperCase()); 
 $("#gravar").focus(); 
 }); 
 // $("#nomeJogador").keyup(function() { 
 // if($("#nomeJogador").val().length > 2){ 
 // $("#gravar").removeAttr("disabled"); 
 // }else { 
 // $("#gravar").attr("disabled", "true"); 
 // } 
 // }); 
 
 $("#gravar").click(function() { 
 var nomeJogador = $("#letra1").val()[0] + $("#letra2").val()[0] + 
$("#letra3").val()[0]; 
 
 // $("#gravar").html("GRAVADO"); 
 // $("#gravar").attr("disabled", "true"); 
 // $("#gravar").addClass("btn btn-success"); 
 // $("#tela").append("<button type=\"button\" class=\"btn btn-warning mt-
2\" id=\"ranking\">RANKING</button>"); 
 $("#gravar").remove(); 
 $("#buttonRank").append("<button id=\"ranking\" class=\"btn btn-warning 
fonte mt-4 \" style=\"letter-spacing: -1px;font-size: 
15px;\">Ranking</button>"); 
 $("#ranking").click(function() { 
 $("#tela").load("Ranking.jsp"); 
 }); 
 $("#ranking").focus(); 
 $.ajax({ 
 url: 'gravarRanking.jsp', 
 data: { 
 nomeJogador: nomeJogador, 
 pontuacao: <%=pontuacao%>, 
 nivel: "<%=str_nivel%>" 
 } 
 }) 
 }); 
 
 $("#jogar").click(function() { 
 $("#tela").load("nivelSelect.jsp"); 
 }); 
</script> 
 
 
 
 
 
 
 
 
 
25 
 
BIBLIOGRAFIA 
 
Sites acessados entre 01 de abril de 2019 à 20 de Maio de 2019: 
 
https://api.jquery.com/ 
https://www.caelum.com.br/apostila-java-web/bancos-de-dados-e-jdbc/ 
https://getbootstrap.com/ 
https://www.w3schools.com/