mauriciabad / WebHero

🎵 A game like guitar hero as website for a worckshop of Web at JEDI

Activitat pel worckshop de HTML, CSS i JS de JEDI de 2018 a la FIB.

Guió

1. Intro: [20min]

   1. Preguntar que saben de HTML, CSS i JS.
   2. Explicar que tindrem 3 arxius, i que fa cada un.
   3. Explicar que volem fer i dir l'objectiu: entendre com funciona i que es pot fer.

2. Menu simple: [20min]

   1. Explicar funcionament del menu simple.
   2. Fer HTML del menu simple.
   3. Fer CSS menu simple.

3. Game section: [20min]

   1. Explicar funcionament de game section.
   2. Fer HTML de game section.
   3. Fer CSS de game section.

4. Game implementation: [40min]

   1. Explicar la estrategia: JSON i esquelet.
   2. Programar ChangeSongName() i posar els onclick="" als inputs.
   3. Programar LoadGame() sense creationMode.
      1. Programar CreateBoard().
      2. Programar StartGame() => MoveBoard(), UpdateProgressBar() i CheckStreak().
   4. Programar els keyEventListeners, CheckPulsation(key) i veure com s’apreta el boto.
   5. Programar EndGame().

5. Preguntes: [5min]

6. Creation menu: [10min]

   1. Explicar funcionament de creation menu.
   2. Explicar HTML i CSS del creation menu.

7. Creation implementation: [10min]

   1. Explicar funcionament de crear partides.
   2. Explicar canvis per poder crear partides.

8. Creation Ended Menu: [5min]

   1. Explicar HTML i CSS del creation ended menu.
   2. Explicar funcionament de mostrar la partida creada.

9. Jugar: [5min]

Links

https://caniuse.com

https://css-tricks.com

https://www.w3schools.com/