Criando o andaime ​

Então, para não perder mais tempo do que perdi apenas tentando entender a ideia de não conseguir nem mesmo executar um "add" sem ter que escrevê-lo eu mesmo, não perdi muito tempo e criei as pastas, é index.html e bytepusher.js.

O HTML não poderia ser mais simples:

<corpo>
     <canvas
         largura="256"
         altura="256"
         style="transform: scale(4); transform-origin: superior esquerdo"
         id="tela"
     ></canvas>
     <script src="bytepusher.js"></script>
</body>

Basicamente, estou apenas criando uma tela que seria usada para a tela e dimensionando-a com algum css embutido para ver melhor os pixels. Então, estou importando um script que seria o próprio BytePusher(BP).

Por enquanto, o arquivo JS está vazio.

Entendendo as especificações ​

Na página Wiki, as especificações do BP são:

Assim, com base nisso, devemos ter 5 dispositivos principais para trabalhar:

1. A própria CPU
2. A Memória
3. A exibição 256*256
4. Mesa de Som
5. Teclado

E nós temos que programá-lo por nós mesmos. Yay!

O mapa da memória ​

Para programar corretamente a CPU, temos que entender o que ela acessa em cada loop, então aqui está o mapa de memória:

E o loop externo é:

1. Aguarde o próximo tick do timer (60 ticks são gerados por segundo).
2. Pesquise as chaves e armazene seus estados como um valor de 2 bytes no endereço 0.
3. Busque o contador de programa de 3 bytes do endereço 2 e execute exatamente 65.536 instruções.
4. Envie o bloco de dados de pixel de 64 KiB designado pelo valor do byte no endereço 5 para o dispositivo de exibição. Envie o bloco de dados de amostra de 256 bytes designado pelo valor de 2 bytes no endereço 6 para o dispositivo de áudio.
5. Volte para a etapa 1.

Ou, em outras palavras, para cada segundo:

1. Crie um let tick = 60;
2. Crie um loop for decrescente para tick;
3. Percorra todas as teclas pressionadas no momento e armazene seus estados em suas respectivas memórias;
4. Crie outro loop for, desta vez para cada instrução;
5. Depois de sair do for loop, envie o endereço que inicia o array de 64kb bytes (256 * 256) para o Pixel Address desenhar no display
6. Logo após, envie o endereço que inicia o array de 256 bytes para o Audio Address tocar no aparelho de som
7. Aguarde até o próximo quadro
8. Vá para a etapa 1.

Com base nisso, vamos criar o loop principal no bytepusher.js:

função principal() {
     setInterval(() => {
         deixe carrapatosEsquerda = 60;
         while (ticksEsquerda) {
             ticksLeft--;
         }
     }, 1000);
}

Não é muito, mas é um trabalho honesto.

Logo depois disso, criei as memórias:

const MEMORY_MAP = new Uint8Array(2 ** 6);
const MEMORY_ROM = new Uint8Array(2 ** 27);
const PAGE_SIZE = 2 ** 3;

E atualize a função de loop para ser um pouco mais legível;

função principal() {
     setInterval(() => {
         const KEYS_MAP = MEMORY_MAP.slice(0x0, PAGE_SIZE * 2);
         const INSTRUCTIONS_MAP = MEMORY_MAP.slice(
             KEYS_MAP.comprimento,
             KEYS_MAP.length + PAGE_SIZE * 3
         );
         const GFX_MAP = MEMORY_MAP.slice(
             INSTRUCTIONS_MAP.comprimento,
             INSTRUCTIONS_MAP.comprimento + PAGE_SIZE * 1
         );
         const SOUND_MAP = MEMORY_MAP.slice(
             GFX_MAP.comprimento,
             GFX_MAP.length + PAGE_SIZE * 2
         );

         deixe carrapatosEsquerda = 60;
         while (ticksEsquerda) {
             ticksLeft--;
         }
         desenharToCanvas();
     }, 1000);
}

::: informações Vale a pena notar que não tenho ideia do que estou fazendo, mas continuo codificando enquanto parece funcionar e fazer sentido (na minha mente real). :::

Então aproveitei para criar uma função initMemory() para valores padrão;

OK. Deixa para lá.

Enquanto eu tentava resolver, o código mudou muito conforme descobri maneiras muito melhores de conseguir algo.

Em vez de escrever um tutorial ou algo assim, vou esperar até obter uma exibição funcional e explicar o código aqui.