El tutorial més senzill de Flappy Bird? - Joc JavaScript per a principiants

Bloc

El tutorial més senzill de Flappy Bird? - Joc JavaScript per a principiants

En aquest vídeo se us mostrarà com codificar Flappy Bird amb només html, css i javascript. És molt divertit de jugar i no és massa difícil de codificar i podeu canviar alguns dels valors perquè el vostre joc sigui únic si voleu.

Per començar, creeu una carpeta nova, anomeneu-la flappy bird i obriu-la amb claudàtors. Brackets és un editor de text que facilita la visualització prèvia de l'aspecte del vostre lloc web.

Creeu tres fitxers: index.html, style.css, script.js. Al fitxer index.html, començarem creant un disseny HTML bàsic, un cap i un cos i canviarem el títol per Flappy Bird. A continuació, connecteu el fitxer css i el fitxer script.

Creeu un div divís que contingui tots els elements de flappy bird. Dins d’això, creeu 3 divs més, el primer amb id = block, el següent amb forat i el div final amb caràcter.

Aneu al fitxer CSS i comenceu eliminant els farcits i els marges bàsics que el navegador afegeix automàticament. A continuació, comenceu a donar al joc div alguns estils. Una amplada i una alçada i una vora per poder-ne veure el contorn. Afegiu també marge: auto; perquè sempre estigui centrat.

A continuació, comenceu a dissenyar el bloc div. Afegirem una amplada i una alçada i un color de fons. Afegeix esquerra: 400 px, perquè és l’amplada del joc i aquesta propietat esquerra no funcionarà tret que el div tingui una posició: relativa.

Ara creeu una animació de fotograma clau que començarà amb el bloc a la dreta i acabarà amb ella a l'esquerra. Afegiu-lo al bloc div amb la propietat d'animació i configureu-lo perquè sigui infinit. Notareu que el bloc surt fora de la divisió del joc, així que només cal afegir un desbordament: amagat a la divisió del joc perquè tingui un aspecte molt millor.

A continuació, comenceu a afegir propietats al forat div. Doneu-li principalment les mateixes propietats que el bloc div, excepte que l’alçada només serà de 150 px i el color de fons serà blanc. Com que el bloc i el forat div són positius relatius a la posició, el que significa que vénen a la part superior de l’altre, així que afegiu la propietat superior: -500 px al forat per fer-lo baixar 500 px, que és l’alçada del bloc.

A continuació, canviarem la posició del forat després de cada animació.

Comenceu creant algunes variables per al bloc i el forat perquè puguem utilitzar els elements adequats. A continuació, creeu un oient d'esdeveniments que executi una funció després de cada animació de forats. Dins d’aquesta funció, crearem una variable aleatòria. Math.random retorna un decimal aleatori entre 0 i 1, multipliqueu-lo per 300 de manera que retorni un nombre entre 0 i 300. També afegiu 150 després, de manera que retorni un número entre 150 i 450 i, a continuació, també establiu que sigui negatiu de manera que estigui entre -150 i -450. Estableix la posició superior del forat en aquest número aleatori. Ara, cada cop que s'executa l'animació, el forat tindrà una posició diferent.

Ara al personatge. Comenceu afegint algunes propietats css; amplada, alçada, color de fons: vermell, posició: absolut, superior: 100 px i radi de vora per fer-ne una bola.

A continuació, creeu una funció que actuï com a gravetat. Feu una funció d'interval que s'executi cada 10 mil·lisegons. Creeu un nou personatge variable Top i serà igual a la posició superior actual del personatge div. Ho podem aconseguir utilitzant window.getComputedStyles () i, a continuació, l'element des del qual volem els estils, després getPropertyValue () i volem la propietat superior. Ara la nostra variable characterTop serà igual al valor css de la propietat superior del caràcter div. A continuació, configureu una nova posició superior per al personatge i serà la mateixa quantitat que abans, tret que hi afegirem 3 px.

A continuació, creeu una altra funció anomenada salt que farà pujar la pilota, bàsicament el contrari de la nostra funció de gravetat. Haurem de tornar al nostre HTML i afegir un onclick per executar la nostra funció de salt i el posarem a l’etiqueta html perquè funcioni si l’usuari fa clic literalment en alguna cosa.

A continuació, torneu al javascript i creeu un salt variable variable i establiu-lo a zero.
Dins de la funció de salt, configureu la nostra nova variable a 1 i, quan finalitzi la funció, torneu a establir-la a 0. Això vol dir que si la variable de salt és igual a 1, estem saltant actualment; si és igual a 0, no saltem.

Afegiu ara una afirmació if per tal que la funció de gravetat només canviï la part superior si actualment no saltem o, en cas contrari, mouríem la pilota cap amunt i cap avall al mateix temps i això només es posarà desordenat.

transcripció, etc.

Ara el nostre joc de flappy birds funciona completament. Però no us atureu aquí! Continueu ajustant el codi i les propietats i feu que el joc sigui més interessant. Potser blocs súper amples? O moviments més lents o més ràpids! Tot és possible!

#html #css #javascript # desenvolupament del joc

www.youtube.com

El tutorial més senzill de Flappy Bird? - Joc JavaScript per a principiants

Obteniu informació sobre com codificar Flappy Bird amb només html, css i javascript. És molt divertit de jugar i no és massa difícil de codificar i podeu canviar alguns dels valors perquè el vostre joc sigui únic si voleu.