Error in my Bird Flappy

Asked

Viewed 102 times

0

In my code the barriers remain the same size without alternating when they pass.

What can it be?

function novoElemento(tagName, className) {
    const elem = document.createElement(tagName);
    elem.className = className;
    return elem;
}

function Barreira(reversa = false) {
    this.elemento = novoElemento('div', 'barreira');

    const borda = novoElemento('div', 'borda');
    const corpo = novoElemento('div', 'corpo');
    this.elemento.appendChild(reversa ? corpo : borda);
    this.elemento.appendChild(reversa ? borda : corpo);

    this.setAltura = altura => corpo.style.heigth = `${altura}px`;
}

// const b = new Barreira(true);
// b.setAltura(300);
// document.querySelector('[wm-flappy').appendChild(b.elemento);

function ParDeBarreiras(altura, abertura, x) {
    this.elemento = novoElemento('div', 'par-de-barreiras');

    this.superior = new Barreira(true);
    this.inferior = new Barreira(false);

    this.elemento.appendChild(this.superior.elemento);
    this.elemento.appendChild(this.inferior.elemento);

    this.sortearAbertura = () => {
        const alturaSuperior = Math.random() * (altura - abertura);
        const alturaInferior = altura - abertura - alturaSuperior;
        this.superior.setAltura(alturaSuperior);
        this.inferior.setAltura(alturaInferior);
    }

    this.getX = () => parseInt(this.elemento.style.left.split('px')[0]);
    this.setX = x => this.elemento.style.left = `${x}px`;
    this.getLargura = () => this.elemento.clientWidth;

    this.sortearAbertura();
    this.setX(x);
}

// const b = new ParDeBarreiras(700, 200, 800);
// document.querySelector('[wm-flappy]').appendChild(b.elemento);

function Barreiras(altura, largura, abertura, espaco, notificarPonto) {
    this.pares = [
        new ParDeBarreiras(altura, abertura, largura),
        new ParDeBarreiras(altura, abertura, largura + espaco),
        new ParDeBarreiras(altura, abertura, largura + espaco * 2),
        new ParDeBarreiras(altura, abertura, largura + espaco * 3)
    ]

    const deslocamento = 3;
    this.animar = () => {
        this.pares.forEach(par => {
            par.setX(par.getX() - deslocamento);

            // quando o elemento sair da área do jogo
            if (par.getX() < -par.getLargura()) {
                par.setX(par.getX() + espaco * this.pares.length);
                par.sortearAbertura()
            }

            const meio = largura / 2;
            const cruzouOMeio = par.getX() + deslocamento >= meio
                && par.getX() < meio;
            if (cruzouOMeio) notificarPonto();

        })
    }
}

const barreiras = new Barreiras(700, 1200, 200, 400);
const areaDoJogo = document.querySelector('[wm-flappy');
barreiras.pares.forEach(par => areaDoJogo.appendChild(par.elemento));
setInterval(() => {
    barreiras.animar();
}, 20)

inserir a descrição da imagem aqui

javascript
  • 3

    I’m trying to come up with an answer, but it’s hard to understand what you’re building without telling me a little more about your HTML and CSS. Besides, we’re missing the ] in his .querySelector('[wm-flappy').

  • Oops good afternoon and a game of Flappy Bird!!! But the barriers are getting the same size without varying and can’t see the error in this. Thanks I’ll fix it

  • 3

    I know it’s a Bird Flappy. What I’m saying is that things like the size and position of the HTML elements get hard to understand and see what might be wrong with them without having the HTML structure that you’ve built and CSS.

2 answers

2

function Barreira(reversa = false) {
    this.elemento = novoElemento('div', 'barreira');

in place of barrier "pair-of-barriers"

0

this.setAltura = height => body.style.heigth = ${altura}px;

the heigth is misspelled

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.