Stap 3: De App en JQuery
index.html
Aangepast script en stylesheet toevoegen door de bestanden aangepast custom.css en custom.js in de kopsectie van index.html.
<link rel="stylesheet" type="text/css" href="custom.css"> <script src="custom.js"></script>
Voeg bewegende om element te maken die de kleinere blokken, een div met de klasse speler.
<div class="player"></div>
Custom.js
Als wilt verplaatsen van X, Y gebruik de linker- en bovenrand kenmerken met .css() JQuery methode. Als u wilt toevoegen van nieuwe elementen ben ik met behulp van de methode .append(). Dit is lastig omdat we definiëren in software willen wanneer de knop wordt gestart, zodat na de lus de waarde in het voorgaande formulier moet. Alles moet in real-time worden bijgewerkt, zodat de gemakkelijkste manier is script toevoegen in setInterval functie als volgt:
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);
Lees deze pagina voor meer informatie over JQuery en Involt.
aangepast custom.CSS
Vergeet niet over het toevoegen van de CSS van de geplaatste elementen. Het belangrijkste hier is het kenmerk 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; }
Open nu de app, selecteer uw poort van de Arduino en beginnen te spelen :) U kunt meer interacties toevoegen of bewerken van de css.