Arquivo: flappy.css
* {
box-sizing: border-box;
}
@font-face{
font-family: 'Pixel';
src: url('../fonts/Pixel.ttf');/*importando fonte*/
}
[wm-flappy]{
position: relative;/*posição relativa*/
border: 5px solid dodgerblue;/*borda 5 pixel*/
height: 700px;
width: 1200px;
margin: 15px;/*margem*/
background-color: darkslateblue; /*cor */
overflow: hidden; /*qualquer item fora definida nessa div não vai aparecer*/
}
.passaro{
position: absolute;
width: 60px;
left: calc(50% - 30px); /*50% à esquerda menos 30 pixel*/
}
.par-de-barreiras {
position: absolute;
top: 0;
height: 100%;
display: flex;
flex-direction: column;/*organiza na vertical*/
justify-content: space-between; /*um embaixo , outro em cima, ...*/
}
.barreira {
display: flex;
flex-direction: column;
align-items: center;
}
.barreira .borda {
height: 30px;
width: 130px; /*largura*/
background: linear-gradient(90deg, #639301, #A5E82E);
border: 2px solid #000;
}
.barreira .corpo { /*corpo*/
height: 150px;
width: 110px;
background: linear-gradient(90deg, #639301, #A5E82E);
border-left: 2px solid #000;
border-right: 2px solid #000;
}
.progresso {
position: absolute;
top: 10px; /*no topo*/
right: 10px; /*alinhado 10 pixel a esquerdad*/
font-family: Pixel;
font-size: 70px;
z-index: 100;
}
Arquivo: flappy.js
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`
}
// 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()
})
}
}
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`
window.onkeydown = e => voando = true
window.onkeyup = e => voando = false
this.animar = () => {
const novoY = this.getY() + (voando ? 8 : -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)
}
// const barreiras = new Barreiras(700, 1200, 200, 400)
// const passaro = new Passaro(700)
// const areaDoJogo = document.querySelector('[wm-flappy]')
// areaDoJogo.appendChild(passaro.elemento)
// areaDoJogo.appendChild(new Progresso().elemento)
// barreiras.pares.forEach(par => areaDoJogo.appendChild(par.elemento))
// setInterval(() => {
// barreiras.animar()
// passaro.animar()
// }, 20)
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
}
function FlappyBird() {
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 = () => {//inicia o jogo
// loop do jogo
const temporizador = setInterval(() => {
barreiras.animar()
passaro.animar()
if (colidiu(passaro, barreiras)) {
clearInterval(temporizador)
}
}, 20)
}
}
new FlappyBird().start()
Arquivo: flappy.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flappy Bird</title>
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/flappy.css">
</head>
<body class="conteudo">
<h1>Flappy Bird</h1>
<div wm-flappy></div>
<script src="flappy.js"></script>
</body>
</html>
Créditos para: Nilson Leitão
