Ejecutar Acción de JavaScript

Descripción general

La acción Run 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 se active.

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

Cuando se selecciona la acción Run JavaScript, verás una opción para Execution Environment 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:

Acorn Interpreter: Ideal para escenarios donde solo se está leyendo/escribiendo variables.
Native JavaScript: Habilita 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 que 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 Native JavaScript para controlar elementos dentro del Modelo de Objetos del Documento (DOM), un factor importante a considerar es saber a qué nodo HTML adjuntar, así como considerar algunas guías de estilo.

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

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

En los ejemplos descritos aquí, gameContainer es el contenedor principal / div del contenido personalizado y debe adoptar una posición absolute para la cual necesitas establecer 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 en la que utilizamos la opción Native JavaScript para implementar el Juego de Pong en Labvanced: https://www.labvanced.com/page/library/75148

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