Unitat 12. Framework sobre SVG.
(Si voleu fer algún comentari dins aquesta pàgina podeu emprar, u: “Tic2020”, pass “ComentariGimnesia”)
Introducció.
Un framework proporciona interfícies de treball simplificades sobre un llenguatge de programació. Actua com a eina ensamblada sobre el llenguatge i facilita al programador un llibret d’instruccions pròpies que actuen sobre el llenguatge.
Quan es programa sense un framework s’anomena Vanilla, Vanilla Javascript. Durant les anteriors sessions hem usat el framework Jquery sobre javascript i el framework w3 sobre CSS.
En aquesta unitat usarem un framework que actua sobre SVG,
- El Framework SVG
- Funcionament bàsic del Framework
Podem consultar el manual de la pàgina de svg.js on hi torbam les especificacions i explicacions sobre aquest framework.
L’instal·lació d’aquest framework és fa afegint una línia al head del document html, amb aquesta instrucció tenin accés a les instruccions que proporciona el framework.
[cc lang=”html”][/cc]
Primera pràctica.
El següent codi conté la implementació de un escenari i un jugador que es mou quan pitjam una tecla cursor.
See the Pen
SVG-JS-Pas1-MovemJugador by Pere Antoni Melisucre (@pere-antoni-melisucre)
on CodePen.
Mira el següent video on s’explica el funcionament bàsic.
Exercicis
Exercici 1. Controlam la posició del jugador.
Aquest primer exercici consisteix en crear un paràgraf (o altres) amb identificador on hi surti la informació de la posició del jugador. S’ha de crear un funció mostraPosicio(passam per paràmetre el jugador) que serà cridada desde el addEventListener.
Exercici 2. El jugador té la velocitat com atribut.
Aquest exercici consisteix en emprar el getter i setters d’atributs de SVG per tenir la velocitat dins de jugador. manual attr().
getter: var x = jugador.attr(“velocitat”); //ens retornarà l’atribut velocitat dins de x
setter: jugador.attr(“velocitat”,x); //canviarà l’atribut velocitat de jugador al valor contingut dins la variable x.
Exercici 3. Sistema per canviar la velocitat.
S’ha de fer un sistema per poder augmentar i disminuir la velocitat del jugador. Per exemple si pitjam damunt la tecla “w” puja 1, “s” baixa 1.
Per aquesta pràctica també ens convendrà posar un paràgraf(o altres) amb identificador que ens mostri la velocitat actual del jugador.
Per entregar els exercicis: