editor

Folleto

Cómo descargar

Campo de golf

El editor sólo funciona con el navegador, la tableta o el teléfono Chrome . Sin embargo, los juegos exportados, que eliminan primero el editor, no tienen limitación.

• Vivir
• Descargar
  • descargar bacione.html
  • abre tu administrador de archivos
  • Haga clic en bacione.html para ejecutarlo en su navegador Chrome.
  • haz clic en Ejecutar para jugar al juego de esquí.
• Games.pdf - tutorial para Ski y Marslander
• YouTube: demostración del producto
• Reddit - discusiones sobre reddit
• Github - discusiones sobre github

¿Bacione?

Bacione significa "gran BESO", como en "Keep It Satisfyingly Simple".

Objetivo

Programar pequeños juegos javascript en un teléfono sin conexión

Misión

Cree el IDE más amigable para los pulgares de su clase

Diseño

Los objetivos de diseño de este editor son brindar una experiencia agradable para quienes no tienen una computadora o simplemente prefieren un teléfono o tableta para programar pequeños juegos de JavaScript. Las limitaciones adicionales que se abordan son estar fuera de línea y no tener un teclado externo (escribir en la pantalla con el pulgar o un lápiz óptico). Si bien hay muchos editores y aplicaciones de teclado que se ajustan a este caso de uso, todos son subóptimos. Los dos problemas principales son la reducción de clics para: 1) acceder a caracteres especiales y 2) refactorizar. Para resolver el punto 1, es necesario admitir una capacidad de teclas adicionales o instalar una aplicación de teclado. Para resolver el punto 2, es necesario hacer que la refactorización requiera menos clics. Después de resolver estos dos problemas, se ocupa una gran parte de la pantalla, dejando poco espacio para el área de código. Para solucionar este problema, el editor incluye un teclado integrado y herramientas de refactorización eficientes.

Características

• Menos clics en comparación con otros editores de teléfonos.
• Las claves comunes son un clic.
• La lógica consciente del contexto reduce los clics.
• Menos trabajo para refactorizar su código.
• Teclado totalmente programable.
• Crea tus propios iconos y funciones de teclado.
• Diseñado para teléfonos y tabletas.
• No se requiere configuración.
• Un archivo.
• Fácil de compartir.
• Desconectado.
• JavaScript simple y sencillo.
• Sin dependencias.
• Gratis (licencia GPL)
• Sin anuncios
• Ejecute desde el administrador de archivos de Android en el navegador Chrome.
• Editor fácil de modificar.
• Edite el editor en el editor.
• El editor pesa solo 7 kilobytes.
• Admite deslizar y repetir pulsación larga.

Limitaciones

• Compatibilidad con el modo vertical : este editor solo admite el modo vertical.
• Compatibilidad : El editor sólo funciona con el navegador Chrome en una tableta o teléfono. Sin embargo, los juegos exportados, que eliminan el editor, no tienen tales limitaciones.
• Varios archivos: el editor no está diseñado para juegos grandes o proyectos de varios archivos. Esto se debe a que abrir un archivo HTML desde el Administrador de archivos en Android en el navegador Chrome no admite varios archivos; todo debe estar contenido en un único archivo HTML monolítico. Esto también significa que no se pueden utilizar imágenes externas o archivos de audio. En su lugar, se pueden utilizar elementos creados mediante programación; por ejemplo, el juego Marslander utiliza gráficos vectoriales y un generador de ruido, y varios otros juegos utilizan emojis.

Si este editor no satisface sus necesidades, podría considerar probar Neovim con Termux y Apache. Puede encontrar mi configuración para esas herramientas aquí.

Asuntos

• Desalineación del cursor : deslizar con fuerza hacia arriba al final del archivo en la ventana del editor puede hacer que el cursor se desalinee con el texto. Una solución sugerida es retroceder un poco desde el final.

Notas

Cualquier referencia a cambios a continuación se refiere a la funcionalidad Editar el editor que se encuentra en el botón Varios, representado por el símbolo de diamante.

• Editar el editor : el editor se puede editar dentro del editor. Sin embargo, no está activo, por lo que debe hacer clic en Guardar y abrir el archivo HTML con marca de tiempo recién creado. Si el nuevo está roto, abre el anterior. Esta característica es para admitir cambios simples. Los cambios complejos deben realizarse en un entorno más robusto como Neovim.
• Ejecutar : el botón Ejecutar ejecuta o detiene el juego que contiene el cursor. Para simplificar, el marco del juego es cuadrado y se muestra encima del teclado. Esto facilita el cambio entre edición y ejecución (ida y vuelta con 2 clics ). Si esto parece limitante y quieres un marco de juego más grande, entonces puedes cambiar el editor o el código de tamaño del lienzo en la Biblioteca o ni siquiera usar la Biblioteca. También puedes exportar lo que esté en la vista del editor con el botón Exportar juego. Es posible que incluso desees cambiar el funcionamiento de la función exportgame(). La desventaja de usar Exportar es que luego debe ejecutar ese archivo HTML desde el administrador de archivos de Android ( 7 clics de ida y vuelta ).
• Tamaño del teclado : El tamaño del teclado es cualquier área restante después de tener en cuenta un marco de juego cuadrado. Esto significa que en un teléfono el ancho del teclado es aproximadamente el ancho de la pantalla y en una tableta aproximadamente la mitad del ancho de la pantalla.
• Posición del teclado : en una tableta, el teclado está ubicado en la esquina inferior derecha . Si usa el pulgar izquierdo para escribir en lugar del derecho, puede cambiarlo .
• Funcionalidad de teclado personalizado : este editor es particularmente útil porque cuenta con un teclado personalizado donde se puede acceder a todas las funciones principales con un solo clic. Para ello, se puede acceder a 22 de los 32 caracteres especiales, que son importantes para la programación, con un solo clic, mientras que a los 10 restantes se puede acceder mediante la tecla Shift. Tenga en cuenta que la tecla de espacio es inusualmente pequeña y está ubicada en la esquina inferior derecha. Además, las teclas de retroceso y retorno están en la segunda fila porque a menudo se coordinan con otras teclas. Por ejemplo, para cortar texto, presiona copiar y luego retroceder, y para deseleccionar, presiona la tecla de retorno. Si no te gusta este diseño, puedes cambiarlo .
• Selección : una de las principales ventajas de este editor es la selección eficiente. La selección se basa en el contexto; Dependiendo de dónde esté el cursor, seleccionará una palabra, una línea, un párrafo o un bloque de código. Para ver cómo funciona la selección, puedes ver el vídeo de YouTube. La selección se realiza con el botón Copiar, es decir, suceden dos cosas a la vez. Esto es principalmente para reducir la cantidad de botones. Cortar consta de dos pasos: haga clic en Copiar (selecciona y copia) y luego haga clic en Retroceso (elimina la selección). Al hacer clic en el botón Entrar después de una Copia, el cursor se moverá al final de la selección. Si Cortar (Copiar/Retroceso) contiene una línea, el cursor avanzará una línea. Esto se debe a que a menudo la intención del usuario al cortar una línea es pegarla después de la siguiente línea. Esto ayuda a reducir la cantidad de clics al refactorizar el código. La selección (Copiar) también se puede utilizar para la navegación, por ejemplo, para mover el cursor al final de un bloque, colocar el cursor antes del carácter del bloque de apertura, hacer clic en Copiar y hacer clic en Entrar. Sin embargo, no hagas eso si tienes algo en el búfer de pegado que deseas usar. Al hacer clic en Copiar varias veces se ampliará la selección de acuerdo con las reglas de selección, y las teclas de flecha extenderán (o extenderán) una selección un carácter a la vez.
• Copiar y pegar : debe usar los botones internos de copiar y pegar en el editor para copiar y pegar código dentro del editor. Para copiar código de fuentes externas, utilice técnicas de copiar y pegar del sistema, como presionar prolongadamente y luego elegir copiar y pegar.
• Formato : en un teléfono, el espacio del editor es escaso y no puedes permitirte mucho espacio en blanco, especialmente espacio en blanco horizontal. Para la sangría, puede utilizar la tecla Espacio (no hay tecla Tabulador) y la tecla Intro conservará la sangría anterior. Intente usar sangría solo para ramas y bucles y, en lugar de sangrar el cuerpo de una función, use espacios en blanco verticales antes y después. Vea el juego Marslander como ejemplo.
• Botón Comentar : El botón Comentar es muy útil para depurar. Cuando presiona el botón Comentar, comenta el código y coloca una copia en el búfer de pegado. El siguiente paso es pegarlo y luego editarlo. Si no le gustan los resultados del nuevo código, es fácil eliminarlo y descomentar el original.
• Navegación : la navegación se realiza principalmente tocando la pantalla, por lo que no hay teclas de inicio, fin o flechas verticales. En su lugar, se proporciona una flecha de izquierda a derecha para ayudar a posicionar el cursor con precisión después de tocar la ubicación aproximada. La tecla Zoom, que aumenta el tamaño del texto, también puede ayudar a colocar el cursor en el lugar correcto.
• Tamaño sugerido : dado que navegar por el código en un teléfono puede ser todo un desafío, es recomendable crear juegos que sean lo suficientemente pequeños como para poder desplazarlos con un solo gesto.
• Pantalla completa : activar el modo de pantalla completa le brindará más espacio para navegar y editar su código. Puede alternar la pantalla completa deslizando hacia arriba el botón Zoom.
• Vistas de cierre : no hay botones de cierre. Para cerrar una Vista, haga clic en cualquier lugar o seleccione una opción. Las Vistas son: Ayuda, Varios, Diferencias y Error.
• Generación de emojis : al abrir la Vista miscelánea por primera vez, los íconos tardarán un momento en cargarse.
• Selectores : Color-Picker y Icon-Picker ponen un código en Pegar, así que no te alarmes si parece que no ha pasado nada. Haga clic en el botón Pegar para ver el código.
• Detección de errores : este editor no tiene detección de errores en tiempo real (mientras escribe). Los errores se descubren al hacer clic en Ejecutar. Se mostrará un mensaje de error y cuando se descarte el error (haciendo clic en cualquier lugar de esa Vista), el cursor se colocará automáticamente en el código donde ocurrió el error. A veces, el mensaje de error no lo hace obvio cuando simplemente olvidaste un par u otro carácter de bloque que requiere un par coincidente. Para ayudar con esto, un proceso adjunto contará ingenuamente todos los caracteres del bloque para garantizar que haya un recuento uniforme y mostrará un mensaje adicional en la Vista de error.
• Función Diff: La función Diff es ingenua y no producirá resultados precisos. Está diseñado para proporcionar sólo una indicación aproximada del progreso desde que se abrió o guardó el archivo por última vez.
• Mecanismo de guardar: la función de guardar en el editor está limitada por restricciones de HTML. Como solución alternativa, se genera un nuevo archivo con marca de tiempo cada vez que guarda. Si está guardando en su carpeta de Descargas, es importante mantenerla libre de archivos de otros fines, ya que esto puede dificultar la reapertura rápida de su trabajo. Además, elimine periódicamente los archivos HTML del editor más antiguos y conserve únicamente la versión más reciente.
• Temas : el editor ofrece temas claros y oscuros para una experiencia de visualización personalizable. Puede alternar entre temas deslizando hacia arriba el botón Varios. También puedes cambiar o agregar más.