-1

Eu fiz um jogo em javascript, mas queria saber como adicionar o Pause e start apertando apenas uma tecla. Exemplo se apertar a tecla P pausa o jogo, e se apertar a tecla S o jogo inicia da onde parou. alguém pode ajudar ? o codigo é esse 👇👇👇👇


const audio = {
    die: new Audio('audio/die.mp3'),
}


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.height = `${altura}px`
}

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

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)

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


function Passaro(alturaJogo) {
    let voando = false

    this.elemento = novoElemento('img', 'passaro')
    this.elemento.src = 'imgs/passaro.png'

    this.getY = () => parseInt(this.elemento.style.bottom.split('px')[0])
    this.setY = y => this.elemento.style.bottom = `${y}px`
        
    document.addEventListener("keydown", Passaro => {
    if (Passaro.keyCode === 38)
        voando = true
    })
    
    document.addEventListener("keyup", Passaro => {
        if (Passaro.keyCode === 38)
             voando = false
        })

    this.animar = () => {
        const novoY = this.getY() + (voando ? 7 : -5)
        const alturaMaxima = alturaJogo - this.elemento.clientHeight
        
        if (novoY <= 0) {
            this.setY(0)
        } else if (novoY >= alturaMaxima) {
            this.setY(alturaMaxima)
        } else {
            this.setY(novoY)
        }
    }

    this.setY(alturaJogo / 2)
}

function Progresso() {
    this.elemento = novoElemento('span', 'progresso')
    this.atualizarPontos = pontos => {
        this.elemento.innerHTML = pontos
    }

    this.atualizarPontos(0)
}

function estaoSobrepostos(elementoA, elementoB) {
    const a = elementoA.getBoundingClientRect()
    const b = elementoB.getBoundingClientRect()

    const horizontal = a.left + a.width >= b.left
        && b.left + b.width >= a.left
    const vertical = a.top + a.height >= b.top
        && b.top + b.height >= a.top
    return horizontal && vertical       
}

function colidiu(passaro, barreiras) {
    let colidiu = false
    barreiras.pares.forEach(parDeBarreiras => {
        if (!colidiu) {
            const superior = parDeBarreiras.superior.elemento
            const inferior = parDeBarreiras.inferior.elemento
            colidiu = estaoSobrepostos(passaro.elemento, superior)
                || estaoSobrepostos(passaro.elemento, inferior)
                
        }
    })
    return colidiu &&  audio.die.play()



}


class FlappyBird {
    constructor() {
    let pontos = 0

    const areaDoJogo = document.querySelector('[wm-flappy]')
    const altura = areaDoJogo.clientHeight
    const largura = areaDoJogo.clientWidth

    const progresso = new Progresso()
    const barreiras = new Barreiras(altura, largura, 200, 400,
        () => progresso.atualizarPontos(++pontos))
    const passaro = new Passaro(altura)
    
    areaDoJogo.appendChild(progresso.elemento)
    areaDoJogo.appendChild(passaro.elemento)
    barreiras.pares.forEach(par => areaDoJogo.appendChild(par.elemento))

    this.start = () => {
        const temporizador = setInterval(() => {
            barreiras.animar()
            passaro.animar()
           
            if (colidiu(passaro, barreiras)) {
                clearInterval(temporizador)
                 
               

            }
        },20)

         }
    
    }
}

new FlappyBird().start()

2 Respostas 2

1

Boa tarde Anderson, tudo certo?

Para o seu problema antes de tudo você precisa encontrar o código da tecla que você vai apertar, pode utilizar esse site pra encontrar isso:

Key Code Info

Após isso é necessário colocar um Listener no seu jogo utilizando a seguinte sintaxe: Key code p = 80 Key code s = 83

window.onkeyup = function(e) {
    let keyCode = e.keyCode ? e.keyCode : e.which;

    if ( keyCode == 80 ) {
        // Função para parar o jogo
    }

    if ( keyCode == 83 ) {
        // Função para iniciar o jogo
    }
}

Após isso você pode implementar da forma que quiser, para salvar o jogo e continuar do momento em que foi salvo.

1
  • Olá Lavarda, obrigado pela ajuda , mas queria saber também qual código eu uso para conseguir pausar o jogo, seria algo com o SetInterval() ou ClearInterval() ou não? você saberia ? Commented 5/12/2020 às 18:53
-1

Bom, vamo lá...

Algo que não percebi no seu código foi o estabelecimento da engine pra "rodar" o jogo.

Como isso envolve um procedimento que precisa ser repetido diversas vezes, é importante setar uma função que segue atualizando os dados a x frames/s. Basicamente essa função precisa estar em execução constante pra calcular e atualizar as informações do jogo.

-> Sempre que falar de "programar", é importante pensar que o que você está fazendo é programar um computador para executar uma série de comandos, então é necessário imaginar tudo na cabeça como DADOS a serem processados.

Visto isso, sua camada responsável por renderizar ou desenhar está apenas exibindo processos na tela a cada x frames, com dados diferentes.

Então bom, recomendo que leia as páginas no DevDocs com as documentações dos métodos setInterval() e clearInterval().

Então a lógica que eu sugiro usar é:

1. Elaborar um evento que chama uma função de processamento do jogo;

2. Ao mesmo tempo que chamar a função de processamento, chamar uma de renderização;

3. Definir variáveis com intervalos de execução, para ambas as funções, em x frames/s (frames por segundo).

Com essa lógica, quando quiser pausar ou continuar o game, é só adicionar ou remover o intervalo à variável.

Exemplo:


var frame_rate = 10
var game_proces;

function start_game(){ // Função que chama o processamento, atualização, loop do jogo, como quiser nomear.

game_proces = setInterval(run, frame_rate); // Insere o intervalo na variável.
game_proces; // Chama o conteúdo da variável, no caso uma função.
}

function run(){
// Seu processamento de dados, informações a serem checadas sempre, etc.
}


Essa é a estrutura base, no modelo de arquitetura que eu recomendo, porém é sempre melhor que você estabeleça de acordo com seu próprio gosto. ;D

OBS.: Pra remover o intervalo de execução do processo, usar clearInterval() na variável.

clearInterval(game_proces);

É isso, basicamente, espero ter dado uma boa iluminada no seu caminho, sucesso!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .