Mover elementos HTML con JQuery vía Serial (3 / 4 paso)

Paso 3: La aplicación y JQuery

index.html

Agregar secuencia de comandos personalizada y hoja de estilos incluyendo los archivos custom.css y custom.js en la sección head del index.html.

 <link rel="stylesheet" type="text/css" href="custom.css"> <script src="custom.js"></script> 

Para crear el elemento móvil que se ponen pequeños bloques, añadir un div con la clase de jugador.

 <div class="player"></div> 

Custom.js

Para mover X, Y utilizar los atributos de la izquierda y superior con .css() método de JQuery. Estoy usando el método .append() para agregar nuevos elementos. Esto es complicado porque queremos definir en el software cuando el botón es para que después del bucle, el valor debe ser en la forma anterior. Todo debe ser actualizado en tiempo real por lo que la forma más fácil es añadir el script en la función setInterval como esta:

 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); 

Para más información sobre JQuery y Involt Lea esta página.

Custom.CSS

Recuerde agregar el CSS de los elementos colocados. El más importante aquí es el atributo de posición:

 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; } 

Ahora abre la aplicación, seleccione el puerto de Arduino y empieza a jugar :) Puede agregar más interacciones o editar el código css.

Artículos Relacionados

Hacer un sitio web todo sobre usted con Visual Studio (HTML, CSS, JQUERY)

Hacer un sitio web todo sobre usted con Visual Studio (HTML, CSS, JQUERY)

¡ Hola todos!Este es mi primer instructivo y en este instructable voy a mostrarle cómo utilizar Visual Studio para crear su propio sitio web!Aquí va un link de descarga para Visual Studio:Enlace Inicio Visual Studio´sEnlace de descarga directaEsto po
Cómo a PACK y mover su gato con seguridad a una nueva residencia

Cómo a PACK y mover su gato con seguridad a una nueva residencia

en alquiler A Green Box, hemos visto nuestra cuota de movimiento relacionados con temas de mascotas: mascotas tristes, falta de las mascotas y cabreado de mascotas. Con movimientos más 80.000 completados, se pidió constantemente que la misma pregunta
¿Flash: Mover un movieclip con las teclas de flecha

¿Flash: Mover un movieclip con las teclas de flecha

que ha jugado un juego flash en línea? ¿Alguna vez has pensado "hey, yo podría hacer algo mejor que esto?", pero no sabes cómo? Bueno, todo lo que trata de cambiar con estos (si gente como ellos) instructables en Flash.Paso 1: ¿por qué?Por qué e
Quinto elemento piedras con LED

Quinto elemento piedras con LED

este instuctable detallará cómo hacer una de las piedras de El quinto elemento. Para cada piedra necesita: alrededor de 6 pulgadas de alambre, dos muelles, una pila AAA, un bot maker y un LED del color del elemento que está creando.Paso 1: cuerpo En
¿Cómo convertir WAV, MP3, MP2, MP1, MPEG, MP4 a OGG, AVI, MPC, MOV, QT, WMA con ALO Audio Center?

¿Cómo convertir WAV, MP3, MP2, MP1, MPEG, MP4 a OGG, AVI, MPC, MOV, QT, WMA con ALO Audio Center?

worldpopulargames.com ( http://www.worldpopulargames.com ) ALO Audio Center - 8 en 1 ALO Audio Center es un audio de gran alcance, todo-en-uno, solicitud de apoyo: Editor de Audio, Audio CD Burner, MP3 CD Burner, Audio CD Ripper, convertidor de Audio
Open API de tiempo - mostrar el proyecto de clima Local

Open API de tiempo - mostrar el proyecto de clima Local

Una gran serie de 9 parte para programadores con poca o ninguna experiencia en el uso de APIs utilizando jQuery. Al final de la serie que será:Entender cómo llamar a una API con getJSON()Cómo recuperar geo-localización de un usuarioCómo llamar a la A
Slider HTML RGB para Arduino vía Serial

Slider HTML RGB para Arduino vía Serial

Hola de nuevo!Me decidí a escribir más tutoriales acerca de mi proyecto de Arduino llamado Involt & HTML/CSS. Para obtener más detalles qué es consultar la página web del proyecto.En este instructable mostraré tinfrecuente hasta control de LED RGB co
Cómo hacer una película con imágenes usando el Windows Movie Maker

Cómo hacer una película con imágenes usando el Windows Movie Maker

en todos Microsoft Windows hay un programa gratuito llamado "Windows Movie Maker". Para encontrar este programa, vaya a "Inicio". En la búsqueda de programas y archivos cuadro; TIPO, cineasta de Windows. Los resultados se encuentra en
Convertir MOV a Flash FLV SWF con MOV a Flash convertidor

Convertir MOV a Flash FLV SWF con MOV a Flash convertidor

MOV a Flash convertidor---convertir .mov a Flash con unos pocos clics de ratónMOV a Flash convertidor---¿qué se puede hacer por usted y por qué es necesario este programa? El MOV a Flash convertidor es capaz de convertir el archivo existente MOV a Fl
Añadir Bluetooth a una pantalla de LCD con entrada serial

Añadir Bluetooth a una pantalla de LCD con entrada serial

Pantallas de LCD con entrada serial pueden actualizarse a Bluetooth mediante un puerto de serie Bluetooth JY-MCU. Una buena razón para hacer esto es por lo que la pantalla se puede utilizar con un teléfono Android o tablet. Una sencilla aplicación An
Control remoto de webcam usando Arduino, SensorMonkey, jQuery y Justin.tv

Control remoto de webcam usando Arduino, SensorMonkey, jQuery y Justin.tv

Web-activar tus sensores interactivos sobre dispositivos de escritorio, smartphone y tablet.Este tutorial describe detalladamente cómo utilizar el servicio gratuito de SensorMonkey para remotamente controlar un pan y tilt cámara web conectada a un Ar
Utiliza sensores, módulos de RF de 433Mhz y chip de Bluefruit BLE de Adafruit para reunir datos en Smartphone con Evothings Studio

Utiliza sensores, módulos de RF de 433Mhz y chip de Bluefruit BLE de Adafruit para reunir datos en Smartphone con Evothings Studio

En este proyecto aprenderás cómo utilizar Bluefruit LE UART amigo de Adafruit, un chip Bluetooth Low Energy y el Banco de trabajo Evothings enviar datos hacia delante y hacia atrás entre un Arduino Uno y tu Smartphone. La aplicación será codificada e
Sensor de temperatura inalámbrico simple actualización de sitio web con electric imp y termistor

Sensor de temperatura inalámbrico simple actualización de sitio web con electric imp y termistor

[Edición 2014] El planificador que fue utilizado por Imp eléctrico ya no es usado y no está disponible ya. [/Edit]Este es un pequeño proyecto para empezar con la eléctrica imp y un termistor para que pueda ver cómo puede obtener las lecturas de tempe
Moviendo un Motor utilizando Arduino y comunicación Serial

Moviendo un Motor utilizando Arduino y comunicación Serial

te has preguntado ¿cómo mover robots?  ¿Que siempre quisiste escribir un programa para controlar un robot?  Si es así, este tutorial será un excelente lugar partido para aprender controles electrónicos con el Arduino Microcontroller.  Usted estará ha