Brochure

Informations

Comment télécharger

Links

L' éditeur ne fonctionne qu'avec le navigateur Chrome, la tablette ou le téléphone . Cependant, les jeux exportés, qui suppriment d'abord l'éditeur, n'ont aucune limitation.

En direct
Télécharger
- télécharger bacione.html
- ouvrez votre gestionnaire de fichiers
- cliquez sur bacione.html pour exécuter dans votre navigateur Chrome
- cliquez sur Courir pour jouer au jeu Ski
Games.pdf - tutoriel pour Ski et Marslander
YouTube - démo du produit
Reddit - discussions sur Reddit
Github - discussions sur Github

Bacion?

Bacione signifie « gros KISS », comme dans « Keep It Satisfyingly Simple ».

But

Programmer des petits jeux javascript sur un téléphone hors ligne

Mission

Créez l'IDE le plus convivial de sa catégorie

Conception

Les objectifs de conception de cet éditeur sont d'offrir une expérience agréable à ceux qui n'ont pas d'ordinateur ou qui préfèrent simplement un téléphone ou une tablette pour programmer de petits jeux JavaScript. Des contraintes supplémentaires résolues sont le fait d'être hors ligne et de ne pas disposer d'un clavier externe (en tapant sur l'écran avec un pouce ou un stylet). Bien qu’il existe de nombreux éditeurs et applications de clavier adaptés à ce cas d’utilisation, ils ne sont tous pas optimaux. Les deux principaux problèmes sont la réduction des clics pour : 1) l'accès aux caractères spéciaux et 2) la refactorisation. Pour résoudre le problème n°1, il est nécessaire de prendre en charge une fonctionnalité de touches supplémentaires ou d'installer une application de clavier. Pour résoudre le problème n°2, il est nécessaire de faire en sorte que la refactorisation nécessite moins de clics. Après avoir résolu ces deux problèmes, une grande partie de l’écran est occupée, laissant peu de place à la zone de code. Pour résoudre ce problème, l'éditeur comprend un clavier intégré et des outils de refactoring efficaces.

Caractéristiques

Moins de clics par rapport aux autres éditeurs de téléphones.
Les clés communes sont en un seul clic.
La logique contextuelle réduit les clics.
Moins de travail pour refactoriser votre code.
Clavier entièrement programmable.
Créez vos propres icônes et fonctions de clavier.
Conçu pour les téléphones et les tablettes.
Aucune configuration requise.
Un fichier.
Facile à partager.
Hors ligne.
JavaScript vanille ordinaire.
Aucune dépendance.
Gratuit (licence GPL)
Aucune publicité
Exécutez à partir du gestionnaire de fichiers Android dans le navigateur Chrome.
Éditeur facile à modifier.
Modifiez l'éditeur dans l'éditeur.
L'éditeur ne fait que 7 kilo-octets.
Prend en charge le balayage et la répétition d'une pression longue.

Limites

Prise en charge du mode portrait : cet éditeur ne prend en charge que le mode portrait.
Compatibilité : L'éditeur fonctionne uniquement avec le navigateur Chrome sur tablette ou téléphone. Cependant, les jeux exportés, qui suppriment l'éditeur, ne présentent pas de telles limitations.
Multi-fichiers : L'éditeur n'est pas conçu pour les grands jeux ou les projets multi-fichiers. En effet, l'ouverture d'un fichier HTML à partir du gestionnaire de fichiers sur Android dans le navigateur Chrome ne prend pas en charge plusieurs fichiers : tout doit être contenu dans un seul fichier HTML monolithique. Cela signifie également que les images ou fichiers audio externes ne peuvent pas être utilisés. Des éléments créés par programme peuvent être utilisés à la place ; par exemple, le jeu Marslander utilise des graphiques vectoriels et un générateur de bruit, et plusieurs autres jeux utilisent des emojis.

Si cet éditeur ne répond pas à vos besoins, vous pouvez envisager d'essayer Neovim avec Termux et Apache. Vous pouvez trouver ma configuration pour ces outils ici.

Problèmes

Désalignement du curseur : faire glisser votre doigt vers la fin du fichier dans la fenêtre de l'éditeur peut entraîner un désalignement du curseur avec le texte. Une solution de contournement suggérée consiste à reculer un peu depuis la fin.

Remarques

Toute référence à une modification ci-dessous fait référence à la fonctionnalité Modifier l'éditeur trouvée dans le bouton Divers, représenté par le symbole du losange.

Edit-the-Editor : L'éditeur peut être modifié dans l'éditeur. Cependant, il n'est pas en ligne, vous devez donc cliquer sur Enregistrer et ouvrir le fichier HTML horodaté nouvellement créé. Si le nouveau est cassé, ouvrez l'ancien. Cette fonctionnalité est destinée à prendre en charge des modifications simples. Les changements complexes doivent être effectués dans un environnement plus robuste tel que Neovim.
Exécuter : Le bouton Exécuter lance ou arrête le jeu qui contient le curseur. Pour plus de simplicité, le cadre de jeu est carré et s'affiche au-dessus du clavier. Cela facilite le basculement entre l'édition et l'exécution ( aller-retour en 2 clics ). Si cela semble limitatif et que vous souhaitez un cadre de jeu plus grand, vous pouvez modifier l'éditeur ou le code de dimensionnement du canevas dans la bibliothèque ou même ne pas utiliser la bibliothèque. Vous pouvez également exporter tout ce qui se trouve dans la vue de l'éditeur avec le bouton Exporter-Jeu. Vous souhaiterez peut-être même modifier le fonctionnement de la fonction exportgame(). L'inconvénient de l'utilisation de l'exportation est que vous devez ensuite exécuter ce fichier HTML à partir du gestionnaire de fichiers Android ( aller-retour en 7 clics ).
Taille du clavier : La taille du clavier correspond à la zone restante après avoir pris en compte un cadre de jeu carré. Cela signifie que sur un téléphone, la largeur du clavier correspond approximativement à la largeur de l'écran et sur une tablette, à environ la moitié de la largeur de l'écran.
Position du clavier : Sur une tablette, le clavier est situé dans le coin inférieur droit . Si vous utilisez votre pouce gauche pour taper au lieu de votre pouce droit, vous pouvez le modifier .
Fonctionnalité de clavier personnalisé : Cet éditeur est particulièrement utile car il propose un clavier personnalisé où toutes les fonctionnalités principales sont accessibles en un seul clic. Pour cela, 22 des 32 caractères spéciaux importants pour la programmation sont accessibles en un clic, tandis que les 10 restants sont accessibles via la touche Shift. Notez que la touche espace est inhabituellement petite, située dans le coin inférieur droit. De plus, les touches retour arrière et retour se trouvent sur la deuxième ligne car elles se coordonnent souvent avec d'autres touches. Par exemple, pour couper du texte, vous appuyez sur copier puis sur retour arrière, et pour désélectionner, vous appuyez sur la touche retour. Si vous n'aimez pas cette mise en page, vous pouvez la modifier .
Sélection : Un avantage majeur de cet éditeur est une sélection efficace. La sélection est basée sur le contexte ; selon l'endroit où se trouve le curseur, il sélectionnera un mot, une ligne, un paragraphe ou un bloc de code. Pour voir comment fonctionne la sélection, vous pouvez regarder la vidéo YouTube. La sélection s'effectue avec le bouton Copier, ce qui signifie que deux choses se produisent en même temps. Il s'agit principalement de réduire le nombre de boutons. Couper se déroule en deux étapes : cliquez sur Copier (sélectionne et copie), puis cliquez sur Retour arrière (supprime la sélection). Cliquer sur le bouton Entrée après une copie déplacera le curseur à la fin de la sélection. Si Couper (Copier/Retour arrière) contient une ligne, le curseur avancera d'une ligne. En effet, l'utilisateur a souvent l'intention, lorsqu'il coupe une ligne, de la coller après la ligne suivante. Cela permet de réduire le nombre de clics lors de la refactorisation du code. La sélection (Copier) peut également être utilisée pour la navigation, par exemple pour déplacer le curseur à la fin d'un bloc, placer le curseur avant le caractère d'ouverture du bloc, cliquer sur Copier, cliquer sur Entrée. Cependant, ne faites pas cela si vous avez quelque chose dans le tampon de collage que vous avez l'intention d'utiliser. Cliquer plusieurs fois sur Copier étendra la sélection selon les règles de sélection, et les touches fléchées étendront (ou annuleront) une sélection d'un caractère à la fois.
Copier et Coller : Vous devez utiliser les boutons copier-coller internes de l'éditeur pour copier et coller du code dans l'éditeur. Pour copier du code à partir de sources externes, utilisez les techniques de copier-coller du système, telles qu'un appui long puis un choix de copier-coller.
Formatage : Sur un téléphone, l'immobilier de l'éditeur est limité et vous ne pouvez pas vous permettre beaucoup d'espace blanc, en particulier un espace blanc horizontal. Pour l'indentation, vous pouvez utiliser la touche Espace (il n'y a pas de touche Tab) et la touche Entrée conservera l'indentation précédente. Essayez d'utiliser uniquement l'indentation pour les branches et les boucles et au lieu d'indenter le corps d'une fonction, utilisez des espaces verticaux avant et après. Voir le jeu Marslander pour un exemple.
Bouton Commentaire : Le bouton Commentaire est très utile pour le débogage. Lorsque vous appuyez sur le bouton Commentaire, il commente le code et place une copie dans le tampon de collage. L'étape suivante consiste à coller cela, puis à le modifier. Si vous n'aimez pas les résultats du nouveau code, il est facile de le supprimer et de décommenter l'original.
Navigation : La navigation se fait principalement en touchant l'écran, il n'y a donc pas de touches Début, Fin ou fléchées verticales. Au lieu de cela, une flèche gauche-droite est fournie pour aider à positionner le curseur avec précision après avoir touché l'emplacement approximatif. La touche Zoom, qui augmente la taille du texte, peut également aider à positionner le curseur au bon endroit.
Taille suggérée : étant donné que naviguer dans le code sur un téléphone peut être assez difficile, il est conseillé de créer des jeux suffisamment petits pour pouvoir défiler d'un seul geste.
Plein écran : L'activation du mode plein écran vous donnera plus d'espace pour naviguer et modifier votre code. Vous pouvez basculer en plein écran en faisant glisser vers le haut le bouton Zoom.
Vues de fermeture : il n'y a pas de boutons de fermeture. Pour fermer une vue, cliquez n'importe où ou sélectionnez une option. Les vues sont : Aide, Divers, Diff et Erreur.
Génération Emoji : lors de la première ouverture de la vue Divers, le chargement des icônes prendra un moment.
Pickers : Color-Picker et Icon-Picker mettent un code dans Paste, alors ne vous inquiétez pas s'il semble que rien ne s'est passé. Cliquez sur le bouton Coller pour voir le code.
Détection d'erreurs : cet éditeur n'a pas de détection d'erreurs en temps réel (au fur et à mesure que vous tapez). Des erreurs sont découvertes lorsque vous cliquez sur Exécuter. Un message d'erreur s'affichera et lorsque l'erreur sera ignorée (en cliquant n'importe où sur cette vue), le curseur sera automatiquement positionné dans le code où l'erreur s'est produite. Parfois, le message d'erreur n'est pas évident lorsque vous avez simplement oublié une parenthèse ou un autre caractère de bloc nécessitant une paire correspondante. Pour vous aider, un processus complémentaire comptera naïvement tous les caractères de bloc pour garantir un nombre pair et affichera un message supplémentaire dans la vue d'erreur.
Fonction Diff : La fonction Diff est naïve et ne produira pas de résultats précis. Il est conçu pour fournir uniquement une indication approximative de la progression depuis l'ouverture du fichier ou son dernier enregistrement.
Mécanisme de sauvegarde : la fonction de sauvegarde dans l'éditeur est limitée par les contraintes HTML. Pour contourner ce problème, un nouveau fichier horodaté est généré à chaque fois que vous enregistrez. Si vous enregistrez dans votre dossier Téléchargements, il est important de le garder exempt de fichiers provenant d'autres objectifs, car cela peut rendre difficile la réouverture rapide de votre travail. Supprimez également périodiquement les anciens fichiers HTML de l'éditeur, en ne conservant que la version la plus récente.
Thèmes : L'éditeur propose des thèmes clairs et sombres pour une expérience visuelle personnalisable. Vous pouvez basculer entre les thèmes en faisant glisser vers le haut le bouton Divers. Vous pouvez également modifier ou en ajouter davantage.