Joc per arrossegar i deixar anar per a principiants amb HTML, SCSS i JS

Bloc

Joc per arrossegar i deixar anar per a principiants amb HTML, SCSS i JS

Aquest breu tutorial us ensenyarà a construir un joc senzill d'arrossegar i deixar anar mitjançant l'API HTML5. El codepen és aquí .



El comportament de DnD és natiu a HTML5, de manera que podeu utilitzar l'API en lloc d'intentar trobar solucions amb jQuery més o menys.

Comencem per la imatge general: en qualsevol aplicació d’arrossegar i deixar anar, tindreu elements arrossegables, com ara les imatges anteriors, i deixareu zones o zones de solta. En aquest joc, tenim dos tipus d’àrees de caiguda:



  • les caselles de la part superior, que contenen els noms dels animals
  • el contenidor a la part inferior, on hi ha les imatges dels animals al principi

Qualsevol element de la pàgina es pot arrossegar simplement afegint un atribut al codi HTML, com a continuació:

     

medium.com

Joc per arrossegar i deixar anar per a principiants amb HTML, SCSS i JS

Aquest breu tutorial us ensenyarà a construir un joc senzill d'arrossegar i deixar anar mitjançant l'API HTML5. El codepen és aquí. El comportament de DnD és natiu a HTML5, de manera que podeu utilitzar l'API en lloc d'intentar trobar solucions amb jQuery més o menys.