WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
HTML
CSS
JS
Aventura nas Alturas
* { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } body { background-color: #81D4FA; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Verdana', sans-serif; } #area-visualizacao-jogo { border: 5px solid #263238; border-radius: 10px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.35); background-image: url('imagens/fundo-nuvens.png'); background-repeat: repeat-x; background-position: top; }
import org.teavm.jso.canvas.CanvasRenderingContext2D; import org.teavm.jso.canvas.HTMLCanvasElement; import org.teavm.jso.dom.html.HTMLDocument; import org.teavm.jso.dom.events.KeyboardEvent; public class MotorJogoAventura { // Dados gerais da tela private static final int LARGURA_TELA = 850; private static final int ALTURA_TELA = 620; // Dados do personagem principal private int posicaoX = 60; private int posicaoY = 480; private int deslocamentoHorizontal = 0; private int deslocamentoVertical = 0; private final int TAMANHO_LARGURA_PERSONAGEM = 42; private final int TAMANHO_ALTURA_PERSONAGEM = 65; private final double FORCA_GRAVIDADE = 0.75; private final double IMPULSO_PULO = -15.5; private boolean estaSoloFirme = false; // Dados das plataformas private int[] posXplataformas = {0, 180, 420, 670, 90, 330, 580, 750}; private int[] posYplataformas = {550, 470, 400, 440, 320, 270, 200, 150}; private int[] tamLarguraPlataformas = {850, 140, 170, 130, 110, 150, 90, 100}; private final int tamAlturaPlataformas = 28; public void iniciarMotor() { HTMLCanvasElement quadroJogo = HTMLDocument.current().createElement("canvas"); quadroJogo.setWidth(LARGURA_TELA); quadroJogo.setHeight(ALTURA_TELA); HTMLDocument.current().getBody().appendChild(quadroJogo); CanvasRenderingContext2D ferramentaDesenho = (CanvasRenderingContext2D) quadroJogo.getContext("2d"); // Controle de teclas pressionadas HTMLDocument.current().addEventListener("keydown", evento -> { KeyboardEvent tecla = (KeyboardEvent) evento; switch (tecla.getKeyCode()) { case 37: deslocamentoHorizontal = -6; break; case 39: deslocamentoHorizontal = 6; break; case 38: if (estaSoloFirme) { deslocamentoVertical = (int) IMPULSO_PULO; estaSoloFirme = false; } break; } }); HTMLDocument.current().addEventListener("keyup", evento -> { KeyboardEvent tecla = (KeyboardEvent) evento; if (tecla.getKeyCode() == 37 || tecla.getKeyCode() == 39) { deslocamentoHorizontal = 0; } }); // Ciclo principal do jogo CicloJogo.executar(instante -> { processarFisicaMovimento(); renderizarElementosTela(ferramentaDesenho); }); } // Atualiza movimentos e colisões private void processarFisicaMovimento() { // Limites laterais posicaoX += deslocamentoHorizontal; if (posicaoX < 0) posicaoX = 0; if (posicaoX + TAMANHO_LARGURA_PERSONAGEM > LARGURA_TELA) posicaoX = LARGURA_TELA - TAMANHO_LARGURA_PERSONAGEM; // Aplica gravidade deslocamentoVertical += FORCA_GRAVIDADE; posicaoY += deslocamentoVertical; // Verifica contato com plataformas estaSoloFirme = false; for (int indice = 0; indice < posXplataformas.length; indice++) { if (verificarEncontro( posicaoX, posicaoY, TAMANHO_LARGURA_PERSONAGEM, TAMANHO_ALTURA_PERSONAGEM, posXplataformas[indice], posYplataformas[indice], tamLarguraPlataformas[indice], tamAlturaPlataformas )) { // Colisão por baixo if (deslocamentoVertical < 0) { posicaoY = posYplataformas[indice] + tamAlturaPlataformas; deslocamentoVertical = 0; } // Colisão por cima else if (deslocamentoVertical > 0) { posicaoY = posYplataformas[indice] - TAMANHO_ALTURA_PERSONAGEM; deslocamentoVertical = 0; estaSoloFirme = true; } } } // Limite inferior da tela if (posicaoY + TAMANHO_ALTURA_PERSONAGEM >= ALTURA_TELA) { posicaoY = ALTURA_TELA - TAMANHO_ALTURA_PERSONAGEM; deslocamentoVertical = 0; estaSoloFirme = true; } } // Desenha tudo na tela private void renderizarElementosTela(CanvasRenderingContext2D ferramenta) { // Limpa fundo ferramenta.setFillColor("#81D4FA"); ferramenta.fillRect(0, 0, LARGURA_TELA, ALTURA_TELA); // Desenha plataformas ferramenta.setFillColor("#5D4037"); for (int i = 0; i < posXplataformas.length; i++) { ferramenta.fillRect(posXplataformas[i], posYplataformas[i], tamLarguraPlataformas[i], tamAlturaPlataformas); } // Desenha personagem ferramenta.setFillColor("#E53935"); ferramenta.fillRect(posicaoX, posicaoY, TAMANHO_LARGURA_PERSONAGEM, TAMANHO_ALTURA_PERSONAGEM - 12); ferramenta.setFillColor("#1E88E5"); ferramenta.fillRect(posicaoX, posicaoY + TAMANHO_ALTURA_PERSONAGEM - 12, TAMANHO_LARGURA_PERSONAGEM, 12); } // Checa se dois objetos se tocam private boolean verificarEncontro(int x1, int y1, int l1, int a1, int x2, int y2, int l2, int a2) { return x1 < x2 + l2 && x1 + l1 > x2 && y1 < y2 + a2 && y1 + a1 > y2; } } // Classe auxiliar com nome novo class CicloJogo { public static native void executar(OperacaoFrame acao); static { TeaVMInternals.exportMethod(CicloJogo.class, "executar"); } @FunctionalInterface public interface OperacaoFrame { void rodar(long tempo); } }
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
Aventura nas Alturas
* { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } body { background-color: #81D4FA; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Verdana', sans-serif; } #area-visualizacao-jogo { border: 5px solid #263238; border-radius: 10px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.35); background-image: url('imagens/fundo-nuvens.png'); background-repeat: repeat-x; background-position: top; }
import org.teavm.jso.canvas.CanvasRenderingContext2D; import org.teavm.jso.canvas.HTMLCanvasElement; import org.teavm.jso.dom.html.HTMLDocument; import org.teavm.jso.dom.events.KeyboardEvent; public class MotorJogoAventura { // Dados gerais da tela private static final int LARGURA_TELA = 850; private static final int ALTURA_TELA = 620; // Dados do personagem principal private int posicaoX = 60; private int posicaoY = 480; private int deslocamentoHorizontal = 0; private int deslocamentoVertical = 0; private final int TAMANHO_LARGURA_PERSONAGEM = 42; private final int TAMANHO_ALTURA_PERSONAGEM = 65; private final double FORCA_GRAVIDADE = 0.75; private final double IMPULSO_PULO = -15.5; private boolean estaSoloFirme = false; // Dados das plataformas private int[] posXplataformas = {0, 180, 420, 670, 90, 330, 580, 750}; private int[] posYplataformas = {550, 470, 400, 440, 320, 270, 200, 150}; private int[] tamLarguraPlataformas = {850, 140, 170, 130, 110, 150, 90, 100}; private final int tamAlturaPlataformas = 28; public void iniciarMotor() { HTMLCanvasElement quadroJogo = HTMLDocument.current().createElement("canvas"); quadroJogo.setWidth(LARGURA_TELA); quadroJogo.setHeight(ALTURA_TELA); HTMLDocument.current().getBody().appendChild(quadroJogo); CanvasRenderingContext2D ferramentaDesenho = (CanvasRenderingContext2D) quadroJogo.getContext("2d"); // Controle de teclas pressionadas HTMLDocument.current().addEventListener("keydown", evento -> { KeyboardEvent tecla = (KeyboardEvent) evento; switch (tecla.getKeyCode()) { case 37: deslocamentoHorizontal = -6; break; case 39: deslocamentoHorizontal = 6; break; case 38: if (estaSoloFirme) { deslocamentoVertical = (int) IMPULSO_PULO; estaSoloFirme = false; } break; } }); HTMLDocument.current().addEventListener("keyup", evento -> { KeyboardEvent tecla = (KeyboardEvent) evento; if (tecla.getKeyCode() == 37 || tecla.getKeyCode() == 39) { deslocamentoHorizontal = 0; } }); // Ciclo principal do jogo CicloJogo.executar(instante -> { processarFisicaMovimento(); renderizarElementosTela(ferramentaDesenho); }); } // Atualiza movimentos e colisões private void processarFisicaMovimento() { // Limites laterais posicaoX += deslocamentoHorizontal; if (posicaoX < 0) posicaoX = 0; if (posicaoX + TAMANHO_LARGURA_PERSONAGEM > LARGURA_TELA) posicaoX = LARGURA_TELA - TAMANHO_LARGURA_PERSONAGEM; // Aplica gravidade deslocamentoVertical += FORCA_GRAVIDADE; posicaoY += deslocamentoVertical; // Verifica contato com plataformas estaSoloFirme = false; for (int indice = 0; indice < posXplataformas.length; indice++) { if (verificarEncontro( posicaoX, posicaoY, TAMANHO_LARGURA_PERSONAGEM, TAMANHO_ALTURA_PERSONAGEM, posXplataformas[indice], posYplataformas[indice], tamLarguraPlataformas[indice], tamAlturaPlataformas )) { // Colisão por baixo if (deslocamentoVertical < 0) { posicaoY = posYplataformas[indice] + tamAlturaPlataformas; deslocamentoVertical = 0; } // Colisão por cima else if (deslocamentoVertical > 0) { posicaoY = posYplataformas[indice] - TAMANHO_ALTURA_PERSONAGEM; deslocamentoVertical = 0; estaSoloFirme = true; } } } // Limite inferior da tela if (posicaoY + TAMANHO_ALTURA_PERSONAGEM >= ALTURA_TELA) { posicaoY = ALTURA_TELA - TAMANHO_ALTURA_PERSONAGEM; deslocamentoVertical = 0; estaSoloFirme = true; } } // Desenha tudo na tela private void renderizarElementosTela(CanvasRenderingContext2D ferramenta) { // Limpa fundo ferramenta.setFillColor("#81D4FA"); ferramenta.fillRect(0, 0, LARGURA_TELA, ALTURA_TELA); // Desenha plataformas ferramenta.setFillColor("#5D4037"); for (int i = 0; i < posXplataformas.length; i++) { ferramenta.fillRect(posXplataformas[i], posYplataformas[i], tamLarguraPlataformas[i], tamAlturaPlataformas); } // Desenha personagem ferramenta.setFillColor("#E53935"); ferramenta.fillRect(posicaoX, posicaoY, TAMANHO_LARGURA_PERSONAGEM, TAMANHO_ALTURA_PERSONAGEM - 12); ferramenta.setFillColor("#1E88E5"); ferramenta.fillRect(posicaoX, posicaoY + TAMANHO_ALTURA_PERSONAGEM - 12, TAMANHO_LARGURA_PERSONAGEM, 12); } // Checa se dois objetos se tocam private boolean verificarEncontro(int x1, int y1, int l1, int a1, int x2, int y2, int l2, int a2) { return x1 < x2 + l2 && x1 + l1 > x2 && y1 < y2 + a2 && y1 + a1 > y2; } } // Classe auxiliar com nome novo class CicloJogo { public static native void executar(OperacaoFrame acao); static { TeaVMInternals.exportMethod(CicloJogo.class, "executar"); } @FunctionalInterface public interface OperacaoFrame { void rodar(long tempo); } }
Preview
Validating your code, please wait...