Webleb - UI Elements

HTML

CSS

JS

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);
    }
}

meu jogo