editor

Folheto

Como baixar

Ligações

O editor só funciona com o navegador Chrome, tablet ou telefone . Porém, jogos exportados, que removem primeiro o editor, não têm limitação.

• Ao vivo
• Download
  • baixar bacione.html
  • abra seu gerenciador de arquivos
  • clique em bacione.html para executar em seu navegador Chrome
  • clique em Executar para jogar o jogo de esqui
• Games.pdf - tutorial para Ski e Marslander
• YouTube – demonstração do produto
• Reddit - discussões no reddit
• Github - discussões no github

Bacione?

Bacione significa "grande KISS", como em "Keep It Satisfyingly Simple".

Propósito

Programando pequenos jogos javascript em um telefone offline

Missão

Crie o IDE mais amigável de sua classe

Projeto

O objetivo do design deste editor é proporcionar uma experiência agradável para quem não tem computador ou simplesmente prefere um telefone ou tablet para programar pequenos jogos JavaScript. As restrições adicionais abordadas são estar offline e não ter um teclado externo (digitar na tela com o polegar ou caneta). Embora existam muitos editores e aplicativos de teclado que se adaptam a esse caso de uso, todos eles são abaixo do ideal. Os dois principais problemas são a redução de cliques para: 1) acessar caracteres especiais e 2) refatorar. Para resolver o número 1, é necessário oferecer suporte a um recurso de teclas extras ou instalar um aplicativo de teclado. Para resolver o número 2, é necessário fazer com que a refatoração exija menos cliques. Depois de resolver esses dois problemas, uma grande parte da tela é ocupada, deixando pouco espaço para a área do código. Para resolver isso, o editor inclui um teclado integrado e ferramentas de refatoração eficientes.

Características

• Menos cliques em comparação com outros editores de telefone.
• As teclas comuns custam um clique.
• A lógica ciente do contexto reduz os cliques.
• Menos trabalho para refatorar seu código.
• Teclado totalmente programável.
• Crie seus próprios ícones e funções de teclado.
• Projetado para telefones e tablets.
• Nenhuma configuração necessária.
• Um arquivo.
• Fácil de compartilhar.
• Off-line.
• JavaScript simples.
• Sem dependências.
• Gratuito (licença GPL)
• Sem anúncios
• Execute a partir do gerenciador de arquivos Android no navegador Chrome.
• Editor fácil de modificar.
• Edite o editor no editor.
• O editor tem apenas 7 kilobytes.
• Suporta furto e repetição longa.

Limitações

• Suporte ao modo retrato : este editor suporta apenas o modo retrato.
• Compatibilidade : O editor só funciona com o navegador Chrome em um tablet ou telefone. Porém, os jogos exportados, que removem o editor, não possuem tais limitações.
• Vários arquivos: O editor não foi projetado para jogos grandes ou projetos com vários arquivos. Isso ocorre porque abrir um arquivo HTML do Gerenciador de arquivos do Android no navegador Chrome não oferece suporte a vários arquivos – tudo deve estar contido em um único arquivo HTML monolítico. Isso também significa que imagens externas ou arquivos de áudio não podem ser usados. Em vez disso, elementos criados programaticamente podem ser utilizados; por exemplo, o jogo Marslander usa gráficos vetoriais e um gerador de ruído, e vários outros jogos utilizam emojis.

Se este editor não atender às suas necessidades, você pode considerar experimentar o Neovim com Termux e Apache. Você pode encontrar minha configuração para essas ferramentas aqui.

Problemas

• Desalinhamento do cursor : deslizar com força no final do arquivo na janela do editor pode fazer com que o cursor fique desalinhado com o texto. Uma solução sugerida é recuar um pouco no final.

Notas

Qualquer referência à alteração abaixo refere-se à funcionalidade Editar o Editor encontrada no botão Diversos, representado pelo símbolo de diamante.

• Edit-the-Editor : O editor pode ser editado dentro do editor. No entanto, ele não está ativo, então você deve clicar em Salvar e abrir o arquivo HTML com carimbo de data e hora recém-criado. Se o novo estiver quebrado, abra o anterior. Este recurso é para suportar mudanças simples. Mudanças complexas devem ser realizadas em um ambiente mais robusto como o Neovim.
• Executar : O botão Executar inicia ou interrompe o jogo que contém o cursor. Para simplificar, o quadro do jogo é quadrado e exibido acima do teclado. Isso torna mais fácil alternar entre edição e execução ( 2 cliques ida e volta ). Se isso parecer limitante e você quiser um quadro de jogo maior, poderá alterar o editor ou o código de dimensionamento da tela na Biblioteca ou nem mesmo usar a Biblioteca. Além disso, você pode exportar o que estiver na visualização do editor com o botão Export-Game. Você pode até querer alterar o funcionamento da função exportgame(). A desvantagem de usar Exportar é que você precisa executar o arquivo HTML no gerenciador de arquivos do Android ( 7 cliques de ida e volta ).
• Tamanho do teclado : O tamanho do teclado é qualquer área restante após contabilizar um quadro de jogo quadrado. Isso significa que em um telefone a largura do teclado é aproximadamente a largura da tela e em um tablet aproximadamente metade da largura da tela.
• Posição do teclado : Em um tablet, o teclado está localizado no canto inferior direito . Se você usar o polegar esquerdo para digitar em vez do polegar direito, poderá alterá -lo.
• Funcionalidade de teclado personalizado : Este editor é particularmente útil porque possui um teclado personalizado onde todas as funcionalidades principais são acessíveis com um clique. Para apoiar isto, 22 dos 32 caracteres especiais, que são importantes para a programação, são acessíveis com um clique, enquanto os restantes 10 são acessíveis através da tecla Shift. Observe que a tecla de espaço é excepcionalmente pequena, localizada no canto inferior direito. Além disso, as teclas backspace e return estão na segunda linha porque são frequentemente coordenadas com outras teclas. Por exemplo, para cortar texto, pressione copiar e depois retroceder e, para desmarcar, pressione a tecla Enter. Se você não gostar desse layout, poderá alterá -lo.
• Seleção : Uma grande vantagem deste editor é a seleção eficiente. A seleção é baseada no contexto; dependendo de onde o cursor estiver, ele selecionará uma palavra, uma linha, um parágrafo ou um bloco de código. Para ver como funciona a seleção, você pode assistir ao vídeo do YouTube. A seleção é feita através do botão Copiar, ou seja, duas coisas acontecem ao mesmo tempo. Isto serve principalmente para reduzir a quantidade de botões. Cortar é feito em duas etapas: clique em Copiar (seleciona e copia) e depois clique em Backspace (exclui a seleção). Clicar no botão Enter após uma Cópia moverá o cursor para o final da seleção. Se Cortar (Copiar/Retroceder) contiver uma linha, o cursor avançará uma linha. Isso ocorre porque muitas vezes a intenção do usuário, ao cortar uma linha, é colá-la após a próxima linha. Isso ajuda a reduzir o número de cliques ao refatorar o código. A seleção (Copiar) também pode ser usada para navegação, por exemplo, para mover o cursor para o final de um bloco, colocar o cursor antes do caractere de abertura do bloco, clicar em Copiar e clicar em Enter. No entanto, não faça isso se você tiver algo no buffer de colagem que pretende usar. Clicar em Copiar várias vezes estenderá a seleção de acordo com as regras de seleção, e as teclas de seta estenderão (ou cancelarão a extensão) uma seleção um caractere por vez.
• Copiar e Colar : Você deve usar os botões internos de copiar e colar no editor para copiar e colar o código dentro do editor. Para copiar código de fontes externas, use técnicas de copiar e colar do sistema, como manter pressionado e escolher copiar e colar.
• Formatação : em um telefone, o espaço do editor é valioso e você não pode se dar ao luxo de ter muitos espaços em branco, especialmente espaços em branco horizontais. Para recuo, você pode usar a tecla Espaço (não há tecla Tab) e a tecla Enter manterá o recuo anterior. Tente usar recuo apenas para ramificações e loops e, em vez de recuar o corpo de uma função, use espaços em branco verticais antes e depois. Veja o jogo Marslander como exemplo.
• Botão Comentário : O botão Comentário é muito útil para depuração. Quando você pressiona o botão Comentário, ele comenta o código e coloca uma cópia no buffer de colagem. A próxima etapa é colá-lo e editá-lo. Se você não gostar dos resultados do novo código, é fácil excluí-lo e descomentar o original.
• Navegação : A navegação é feita principalmente tocando na tela, portanto não há teclas de início, fim ou setas verticais. Em vez disso, é fornecida uma seta esquerda-direita para ajudar a posicionar o cursor com precisão após tocar na localização aproximada. A tecla Zoom, que aumenta o tamanho do texto, também pode auxiliar no posicionamento do cursor no local correto.
• Tamanho sugerido : como navegar pelo código em um telefone pode ser bastante desafiador, é aconselhável criar jogos pequenos o suficiente para serem rolados com um único gesto.
• Tela cheia : ativar o modo de tela cheia lhe dará mais espaço para navegar e editar seu código. Você pode alternar para tela cheia deslizando para cima no botão Zoom.
• Fechando visualizações : Não há botões para fechar. Para fechar uma Visualização, clique em qualquer lugar ou selecione uma opção. As visualizações são: Ajuda, Diversos, Diferença e Erro.
• Geração de Emoji : Ao abrir a Visualização Diversos pela primeira vez, levará um momento enquanto os ícones são carregados.
• Seletores : Color-Picker e Icon-Picker colocam um código em Paste, então não se assuste se parecer que nada aconteceu. Clique no botão Colar para ver o código.
• Detecção de erros : este editor não possui detecção de erros em tempo real (conforme você digita). Erros são descobertos quando você clica em Executar. Uma mensagem de erro será exibida e quando o erro for descartado (clicando em qualquer lugar daquela View), o cursor será posicionado automaticamente no código onde ocorreu o erro. Às vezes, a mensagem de erro não fica óbvia quando você simplesmente esqueceu um parêntese ou outro caractere de bloco que requer um par correspondente. Para ajudar com isso, um processo adjunto contará ingenuamente todos os caracteres do bloco para garantir que haja uma contagem uniforme e exibirá uma mensagem adicional na visualização de erro.
• Função Diff: A função Diff é ingênua e não produzirá resultados precisos. Ele foi projetado para fornecer apenas uma indicação aproximada do progresso desde que o arquivo foi aberto ou salvo pela última vez.
• Mecanismo de salvamento: A função de salvamento no editor é limitada por restrições de HTML. Como solução alternativa, um novo arquivo com carimbo de data/hora é gerado sempre que você salva. Se você estiver salvando na pasta Downloads, é importante mantê-la livre de arquivos de outras finalidades, pois isso pode dificultar a reabertura rápida do seu trabalho. Além disso, exclua periodicamente os arquivos HTML do editor mais antigo, mantendo apenas a versão mais recente.
• Temas : O editor oferece temas claros e escuros para uma experiência de visualização personalizável. Você pode alternar entre os temas deslizando para cima no botão Diversos. Você também pode alterar ou adicionar mais.