Étape 3: L’App et JQuery
index.html
Ajouter un script personnalisé et feuille de style en incluant les fichiers custom.css et custom.js dans la section head de index.html.
<link rel="stylesheet" type="text/css" href="custom.css"> <script src="custom.js"></script>
Pour créer un élément mobile qui placera les blocs plus petits, ajouter un div avec la classe joueur.
<div class="player"></div>
Custom.js
Pour passer de X, Y utiliser les attributs gauche et supérieure avec .css() méthode JQuery. J’utilise la méthode .append() pour ajouter de nouveaux éléments. C’est difficile parce que nous voulons définir dans le logiciel lorsque le bouton est déclenché après la boucle, la valeur doit être sous forme précédente. Tout doit être mis à jour en temps réel donc le moyen le plus simple est d’ajouter le script en fonction setInterval comme ceci :
var updateScreen = function(){ //move the player on screen and rotate $(".player").css({ left: involtReceivedPin[0], top: involtReceivedPin[1], transform: "rotate("+involtReceivedPin[2]+"deg)" }); //Now let's place bricks when hitting the button :) if(analogPins[3]=="click"){ var x = involtReceivedPin[0]+40; var y = involtReceivedPin[1]+40; var rot = "rotate("+involtReceivedPin[2]+"deg)"; $("body").append('<div class="brick" style="left:'+x+'px; top:'+y+'px; transform: '+rot+'"></div>'); //reset the value to wait for next time the button is pressed involtReceivedPin[3] = 0; }; }; setInterval(updateScreen, 50); Pour plus d’infos sur JQuery et Involt lire cette page.
Custom.CSS
N’oubliez pas sur l’ajout de la CSS des éléments placés. Le plus important ici est l’attribut position :
html{ overflow: hidden!important; } .player{ width: 80px; height:80px; position:absolute; background: blue; z-index: -1; } .brick{ width: 35px; height: 35px; position: absolute; background: green; } Maintenant Ouvrez l’application, sélectionnez votre port d’Arduino et commencer à jouer:) Vous pouvez ajouter plus d’interactions ou modifier le css.
