Ejecutar Acción de JavaScript

Resumen

La acción Ejecutar JavaScript te permite programar eventos específicos y leer/establecer variables de Labvanced, pero también controlar objetos en tu estudio ingresando JavaScript personalizado que se ejecutará como una acción cuando sea activada.

La Acción Ejecutar JavaScript en el menú de acciones de Labvanced.

Cuando se selecciona la acción Ejecutar JavaScript, verás una opción para Entorno de Ejecución así como el editor de código donde se debe escribir el código JavaScript (donde se encuentran algunas instrucciones útiles):

El editor de código JavaScript en Labvanced.

Opciones del Entorno de Ejecución

Aquí puedes especificar la naturaleza del JavaScript que estás ejecutando, las opciones incluyen:

  • Intérprete Acorn: Ideal para escenarios donde solo se está leyendo/escribiendo variables.
  • JavaScript Nativo: Permite la ejecución de JavaScript personalizado para la manipulación directa del Modelo de Objetos del Documento (DOM) dentro de los experimentos, permitiendo la edición de elementos en pantalla, lo cual es útil para integrar juegos interactivos basados en JavaScript y crear contenido más dinámico a través de JavaScript.

Utilizando JavaScript Nativo

Al utilizar el JavaScript Nativo para controlar elementos dentro del Modelo de Objetos del Documento (DOM), un factor importante a considerar es saber qué nodo HTML adjuntar, así como también considerar algunas guías de estilo.

Una ID fácil de considerar es el identificador background, lo que hace posible que otros objetos de Labvanced puedan seguir estando en el marco, como en el ejemplo a continuación:

const container = document.getElementById('background');
container.appendChild(gameContainer);

En los ejemplos delineados aquí, gameContainer es entonces el contenedor principal / div del contenido personalizado y debe tener una posición absolute para la que necesitas establecer el width y height:

const gameContainer = document.createElement('div');
gameContainer.style.position = 'absolute';
gameContainer.style.width = window.innerWidth +"px";
gameContainer.style.height = window.innerHeight +"px";

Los resultados de tal enfoque se pueden ver aquí en esta demostración donde utilizamos la opción JavaScript Nativo para implementar el juego Pong en Labvanced: https://www.labvanced.com/page/library/75148

Para cualquier pregunta sobre la usabilidad general de la acción Ejecutar JavaScript, no dudes en contactarnos por correo electrónico o chat.